upgraded yui to 2.2.2 and yui-ext to 1.0.1a
This commit is contained in:
JT Smith
parent
4d9af2c691
commit
547ced6500
1992 changed files with 645731 additions and 0 deletions
29
www/extras/yui-ext/examples/form/combos.css
Normal file
29
www/extras/yui-ext/examples/form/combos.css
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
/*
|
||||
* Ext JS Library 1.0.1
|
||||
* Copyright(c) 2006-2007, Ext JS, LLC.
|
||||
* licensing@extjs.com
|
||||
*
|
||||
* http://www.extjs.com/license
|
||||
*/
|
||||
|
||||
.search-item {
|
||||
font:normal 11px tahoma, arial, helvetica, sans-serif;
|
||||
padding:3px 10px 3px 10px;
|
||||
border:1px solid #fff;
|
||||
border-bottom:1px solid #eeeeee;
|
||||
white-space:normal;
|
||||
}
|
||||
.search-item h3 {
|
||||
display:block;
|
||||
font:inherit;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.search-item h3 span {
|
||||
float: right;
|
||||
font-weight:normal;
|
||||
margin:0 0 5px 5px;
|
||||
width:100px;
|
||||
display:block;
|
||||
clear:none;
|
||||
}
|
||||
184
www/extras/yui-ext/examples/form/combos.html
Normal file
184
www/extras/yui-ext/examples/form/combos.html
Normal file
|
|
@ -0,0 +1,184 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
||||
<title>Combo Boxes</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
|
||||
|
||||
<!-- GC --> <!-- LIBS --> <script type="text/javascript" src="../../adapter/yui/yui-utilities.js"></script> <script type="text/javascript" src="../../adapter/yui/ext-yui-adapter.js"></script> <!-- ENDLIBS -->
|
||||
<script type="text/javascript" src="../../ext-all.js"></script>
|
||||
|
||||
<script type="text/javascript" src="states.js"></script>
|
||||
<script type="text/javascript" src="combos.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="combos.css" />
|
||||
|
||||
<!-- Common Styles for the examples -->
|
||||
<link rel="stylesheet" type="text/css" href="../examples.css" />
|
||||
<style type="text/css">
|
||||
p { width:650px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
|
||||
<h1>Combo Boxes</h1>
|
||||
<p>The js is not minified so it is readable. See <a href="combos.js">combos.js</a>.</p>
|
||||
|
||||
<p>
|
||||
<b>Data Sources</b><br />
|
||||
The combo box can use any type of Ext.data.Store as it's data source.
|
||||
This means your data can be XML, JSON, arrays or any other supported format. It can be loaded using Ajax, script tags or be local.
|
||||
This combo uses local data from a JS array.
|
||||
</p>
|
||||
<div>
|
||||
<input type="text" id="local-states" size="20"/>
|
||||
</div>
|
||||
<pre class="code"><code>// simple array store
|
||||
var store = new Ext.data.SimpleStore({
|
||||
fields: ['abbr', 'state'],
|
||||
data : exampleData
|
||||
});
|
||||
var combo = new Ext.form.ComboBox({
|
||||
store: store,
|
||||
displayField:'state',
|
||||
typeAhead: true,
|
||||
mode: 'local',
|
||||
triggerAction: 'all',
|
||||
emptyText:'Select a state...',
|
||||
selectOnFocus:true
|
||||
});
|
||||
combo.applyTo('local-states');
|
||||
</code></pre>
|
||||
<br />
|
||||
<p>
|
||||
<b>Unobtrusive</b><br />
|
||||
The combo box can very easily be used to convert existing select elements into auto-completing, filtering combos.
|
||||
</p>
|
||||
<div>
|
||||
Transformed select:<br/> <select name="state" id="state">
|
||||
<option value="AL">Alabama</option>
|
||||
<option value="AK">Alaska</option>
|
||||
<option value="AZ">Arizona</option>
|
||||
<option value="AR">Arkansas</option>
|
||||
<option value="CA">California</option>
|
||||
<option value="CO">Colorado</option>
|
||||
<option value="CT">Connecticut</option>
|
||||
<option value="DE">Delaware</option>
|
||||
<option value="FL">Florida</option>
|
||||
<option value="GA">Georgia</option>
|
||||
<option value="HI">Hawaii</option>
|
||||
<option value="ID">Idaho</option>
|
||||
<option value="IL">Illinois</option>
|
||||
<option value="IN">Indiana</option>
|
||||
<option value="IA">Iowa</option>
|
||||
<option value="KS">Kansas</option>
|
||||
<option value="KY">Kentucky</option>
|
||||
<option value="LA">Louisiana</option>
|
||||
<option value="ME">Maine</option>
|
||||
<option value="MD">Maryland</option>
|
||||
<option value="MA">Massachusetts</option>
|
||||
<option value="MI">Michigan</option>
|
||||
<option value="MN">Minnesota</option>
|
||||
<option value="MS">Mississippi</option>
|
||||
<option value="MO">Missouri</option>
|
||||
<option value="MT">Montana</option>
|
||||
<option value="NE">Nebraska</option>
|
||||
<option value="NV">Nevada</option>
|
||||
<option value="NH">New Hampshire</option>
|
||||
<option value="NJ">New Jersey</option>
|
||||
<option value="NM">New Mexico</option>
|
||||
<option value="NY">New York</option>
|
||||
<option value="NC">North Carolina</option>
|
||||
<option value="ND">North Dakota</option>
|
||||
<option value="OH" selected>Ohio</option>
|
||||
<option value="OK">Oklahoma</option>
|
||||
<option value="OR">Oregon</option>
|
||||
<option value="PA">Pennsylvania</option>
|
||||
<option value="RI">Rhode Island</option>
|
||||
<option value="SC">South Carolina</option>
|
||||
<option value="SD">South Dakota</option>
|
||||
<option value="TN">Tennessee</option>
|
||||
<option value="TX">Texas</option>
|
||||
<option value="UT">Utah</option>
|
||||
<option value="VT">Vermont</option>
|
||||
<option value="VA">Virginia</option>
|
||||
<option value="WA">Washington</option>
|
||||
<option value="WV">West Virginia</option>
|
||||
<option value="WI">Wisconsin</option>
|
||||
<option value="WY">Wyoming</option>
|
||||
</select>
|
||||
</div><br />
|
||||
<p>
|
||||
Originally looked like:<br/> <select name="state-orig">
|
||||
<option value="AL">Alabama</option>
|
||||
<option value="AK">Alaska</option>
|
||||
<option value="AZ">Arizona</option>
|
||||
<option value="AR">Arkansas</option>
|
||||
<option value="CA">California</option>
|
||||
<option value="CO">Colorado</option>
|
||||
<option value="CT">Connecticut</option>
|
||||
<option value="DE">Delaware</option>
|
||||
<option value="FL">Florida</option>
|
||||
<option value="GA">Georgia</option>
|
||||
<option value="HI">Hawaii</option>
|
||||
<option value="ID">Idaho</option>
|
||||
<option value="IL">Illinois</option>
|
||||
<option value="IN">Indiana</option>
|
||||
<option value="IA">Iowa</option>
|
||||
<option value="KS">Kansas</option>
|
||||
<option value="KY">Kentucky</option>
|
||||
<option value="LA">Louisiana</option>
|
||||
<option value="ME">Maine</option>
|
||||
<option value="MD">Maryland</option>
|
||||
<option value="MA">Massachusetts</option>
|
||||
<option value="MI">Michigan</option>
|
||||
<option value="MN">Minnesota</option>
|
||||
<option value="MS">Mississippi</option>
|
||||
<option value="MO">Missouri</option>
|
||||
<option value="MT">Montana</option>
|
||||
<option value="NE">Nebraska</option>
|
||||
<option value="NV">Nevada</option>
|
||||
<option value="NH">New Hampshire</option>
|
||||
<option value="NJ">New Jersey</option>
|
||||
<option value="NM">New Mexico</option>
|
||||
<option value="NY">New York</option>
|
||||
<option value="NC">North Carolina</option>
|
||||
<option value="ND">North Dakota</option>
|
||||
<option value="OH" selected>Ohio</option>
|
||||
<option value="OK">Oklahoma</option>
|
||||
<option value="OR">Oregon</option>
|
||||
<option value="PA">Pennsylvania</option>
|
||||
<option value="RI">Rhode Island</option>
|
||||
<option value="SC">South Carolina</option>
|
||||
<option value="SD">South Dakota</option>
|
||||
<option value="TN">Tennessee</option>
|
||||
<option value="TX">Texas</option>
|
||||
<option value="UT">Utah</option>
|
||||
<option value="VT">Vermont</option>
|
||||
<option value="VA">Virginia</option>
|
||||
<option value="WA">Washington</option>
|
||||
<option value="WV">West Virginia</option>
|
||||
<option value="WI">Wisconsin</option>
|
||||
<option value="WY">Wyoming</option>
|
||||
</select>
|
||||
</p>
|
||||
<pre class="code"><code>var converted = new Ext.form.ComboBox({
|
||||
typeAhead: true,
|
||||
triggerAction: 'all',
|
||||
transform:'state',
|
||||
width:135,
|
||||
forceSelection:true
|
||||
});
|
||||
</code></pre>
|
||||
<br />
|
||||
<p>
|
||||
<b>Grid Editor</b><br />
|
||||
<a href="../grid/edit-grid.html">Click here</a> to see the combo as a grid editor.
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
<b>Templates and Ajax</b><br />
|
||||
<a href="forum-search.html">Click here</a> for a more advanced example.
|
||||
</p>
|
||||
<br /><br /><br /><br />
|
||||
</body>
|
||||
</html>
|
||||
35
www/extras/yui-ext/examples/form/combos.js
vendored
Normal file
35
www/extras/yui-ext/examples/form/combos.js
vendored
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
/*
|
||||
* Ext JS Library 1.0.1
|
||||
* Copyright(c) 2006-2007, Ext JS, LLC.
|
||||
* licensing@extjs.com
|
||||
*
|
||||
* http://www.extjs.com/license
|
||||
*/
|
||||
|
||||
Ext.onReady(function(){
|
||||
// simple array store
|
||||
var store = new Ext.data.SimpleStore({
|
||||
fields: ['abbr', 'state'],
|
||||
data : Ext.exampledata.states // from states.js
|
||||
});
|
||||
var combo = new Ext.form.ComboBox({
|
||||
store: store,
|
||||
displayField:'state',
|
||||
typeAhead: true,
|
||||
mode: 'local',
|
||||
triggerAction: 'all',
|
||||
emptyText:'Select a state...',
|
||||
selectOnFocus:true
|
||||
});
|
||||
combo.applyTo('local-states');
|
||||
|
||||
|
||||
|
||||
var converted = new Ext.form.ComboBox({
|
||||
typeAhead: true,
|
||||
triggerAction: 'all',
|
||||
transform:'state',
|
||||
width:135,
|
||||
forceSelection:true
|
||||
});
|
||||
});
|
||||
73
www/extras/yui-ext/examples/form/dynamic.html
Normal file
73
www/extras/yui-ext/examples/form/dynamic.html
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
<!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">-->
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
||||
<title>Forms</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
|
||||
|
||||
<!-- GC --> <!-- LIBS --> <script type="text/javascript" src="../../adapter/yui/yui-utilities.js"></script> <script type="text/javascript" src="../../adapter/yui/ext-yui-adapter.js"></script> <!-- ENDLIBS -->
|
||||
<script type="text/javascript" src="../../ext-all.js"></script>
|
||||
|
||||
<script type="text/javascript" src="states.js"></script>
|
||||
<script type="text/javascript" src="dynamic.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="forms.css" />
|
||||
|
||||
<!-- Common Styles for the examples -->
|
||||
<link rel="stylesheet" type="text/css" href="../examples.css" />
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
|
||||
<h1>Dynamic Forms built with JavaScript</h1>
|
||||
<p>
|
||||
These forms do not do anything and have very little validation. They solely demonstrate
|
||||
how you can use Ext Forms to build and layout forms on the fly.
|
||||
</p>
|
||||
|
||||
<p>The js is not minified so it is readable. See <a href="dynamic.js">dynamic.js</a>.</p>
|
||||
|
||||
<div style="width:300px;">
|
||||
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
|
||||
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
|
||||
<h3 style="margin-bottom:5px;">Simple Form</h3>
|
||||
<div id="form-ct">
|
||||
|
||||
</div>
|
||||
</div></div></div>
|
||||
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
|
||||
</div>
|
||||
<br/>
|
||||
<div style="width:500px;">
|
||||
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
|
||||
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
|
||||
<h3 style="margin-bottom:5px;">Multi-column and labels top</h3>
|
||||
<div id="form-ct2">
|
||||
|
||||
</div>
|
||||
</div></div></div>
|
||||
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
|
||||
</div>
|
||||
<br/>
|
||||
<div style="width:340px;">
|
||||
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
|
||||
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
|
||||
<h3>Fieldsets, labels right and complex fields</h3>
|
||||
<div id="form-ct3">
|
||||
|
||||
</div>
|
||||
</div></div></div>
|
||||
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
|
||||
</div>
|
||||
<br/>
|
||||
<div style="width:600px;">
|
||||
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
|
||||
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
|
||||
<h3 style="margin-bottom:5px;">Multi-column, nesting and fieldsets</h3>
|
||||
<div id="form-ct4">
|
||||
|
||||
</div>
|
||||
</div></div></div>
|
||||
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
|
||||
</div>
|
||||
<div class="x-form-clear"></div>
|
||||
</body>
|
||||
</html>
|
||||
285
www/extras/yui-ext/examples/form/dynamic.js
vendored
Normal file
285
www/extras/yui-ext/examples/form/dynamic.js
vendored
Normal file
|
|
@ -0,0 +1,285 @@
|
|||
/*
|
||||
* Ext JS Library 1.0.1
|
||||
* Copyright(c) 2006-2007, Ext JS, LLC.
|
||||
* licensing@extjs.com
|
||||
*
|
||||
* http://www.extjs.com/license
|
||||
*/
|
||||
|
||||
Ext.onReady(function(){
|
||||
|
||||
Ext.QuickTips.init();
|
||||
|
||||
// turn on validation errors beside the field globally
|
||||
Ext.form.Field.prototype.msgTarget = 'side';
|
||||
|
||||
/*
|
||||
* ================ Simple form =======================
|
||||
*/
|
||||
var simple = new Ext.form.Form({
|
||||
labelWidth: 75, // label settings here cascade unless overridden
|
||||
url:'save-form.php'
|
||||
});
|
||||
simple.add(
|
||||
new Ext.form.TextField({
|
||||
fieldLabel: 'First Name',
|
||||
name: 'first',
|
||||
width:175,
|
||||
allowBlank:false
|
||||
}),
|
||||
|
||||
new Ext.form.TextField({
|
||||
fieldLabel: 'Last Name',
|
||||
name: 'last',
|
||||
width:175
|
||||
}),
|
||||
|
||||
new Ext.form.TextField({
|
||||
fieldLabel: 'Company',
|
||||
name: 'company',
|
||||
width:175
|
||||
}),
|
||||
|
||||
new Ext.form.TextField({
|
||||
fieldLabel: 'Email',
|
||||
name: 'email',
|
||||
vtype:'email',
|
||||
width:175
|
||||
})
|
||||
);
|
||||
|
||||
simple.addButton('Save');
|
||||
simple.addButton('Cancel');
|
||||
|
||||
simple.render('form-ct');
|
||||
|
||||
|
||||
/*
|
||||
* ================ Form 2 =======================
|
||||
*/
|
||||
var top = new Ext.form.Form({
|
||||
labelAlign: 'top'
|
||||
});
|
||||
|
||||
top.column(
|
||||
{width:232}, // precise column sizes or percentages or straight CSS
|
||||
new Ext.form.TextField({
|
||||
fieldLabel: 'First Name',
|
||||
name: 'first',
|
||||
width:200
|
||||
}),
|
||||
|
||||
new Ext.form.TextField({
|
||||
fieldLabel: 'Company',
|
||||
name: 'company',
|
||||
width:200
|
||||
})
|
||||
);
|
||||
|
||||
top.column(
|
||||
{width:222, style:'margin-left:10px', clear:true}, // apply custom css, clear:true means it is the last column
|
||||
new Ext.form.TextField({
|
||||
fieldLabel: 'Last Name',
|
||||
name: 'last',
|
||||
width:200
|
||||
}),
|
||||
|
||||
new Ext.form.TextField({
|
||||
fieldLabel: 'Email',
|
||||
name: 'email',
|
||||
vtype:'email',
|
||||
width:200
|
||||
})
|
||||
);
|
||||
|
||||
top.addButton('Save');
|
||||
top.addButton('Cancel');
|
||||
|
||||
top.render('form-ct2');
|
||||
|
||||
|
||||
/*
|
||||
* ================ Form 3 =======================
|
||||
*/
|
||||
var fs = new Ext.form.Form({
|
||||
labelAlign: 'right',
|
||||
labelWidth: 75
|
||||
});
|
||||
|
||||
fs.fieldset(
|
||||
{legend:'Contact Information'},
|
||||
new Ext.form.TextField({
|
||||
fieldLabel: 'First Name',
|
||||
name: 'first',
|
||||
width:190
|
||||
}),
|
||||
|
||||
new Ext.form.TextField({
|
||||
fieldLabel: 'Last Name',
|
||||
name: 'last',
|
||||
width:190
|
||||
}),
|
||||
|
||||
new Ext.form.TextField({
|
||||
fieldLabel: 'Company',
|
||||
name: 'company',
|
||||
width:190
|
||||
}),
|
||||
|
||||
new Ext.form.TextField({
|
||||
fieldLabel: 'Email',
|
||||
name: 'email',
|
||||
vtype:'email',
|
||||
width:190
|
||||
}),
|
||||
|
||||
new Ext.form.ComboBox({
|
||||
fieldLabel: 'State',
|
||||
hiddenName:'state',
|
||||
store: new Ext.data.SimpleStore({
|
||||
fields: ['abbr', 'state'],
|
||||
data : Ext.exampledata.states // from states.js
|
||||
}),
|
||||
displayField:'state',
|
||||
typeAhead: true,
|
||||
mode: 'local',
|
||||
triggerAction: 'all',
|
||||
emptyText:'Select a state...',
|
||||
selectOnFocus:true,
|
||||
width:190
|
||||
}),
|
||||
|
||||
new Ext.form.DateField({
|
||||
fieldLabel: 'Date of Birth',
|
||||
name: 'dob',
|
||||
width:190,
|
||||
allowBlank:false
|
||||
})
|
||||
);
|
||||
|
||||
fs.addButton('Save');
|
||||
fs.addButton('Cancel');
|
||||
|
||||
fs.render('form-ct3');
|
||||
|
||||
/*
|
||||
* ================ Form 4 =======================
|
||||
*/
|
||||
var form = new Ext.form.Form({
|
||||
labelAlign: 'right',
|
||||
labelWidth: 75
|
||||
});
|
||||
|
||||
form.column({width:342, labelWidth:75}); // open column, without auto close
|
||||
form.fieldset(
|
||||
{legend:'Contact Information'},
|
||||
new Ext.form.TextField({
|
||||
fieldLabel: 'Full Name',
|
||||
name: 'fullName',
|
||||
allowBlank:false,
|
||||
value: 'Jack Slocum'
|
||||
}),
|
||||
|
||||
new Ext.form.TextField({
|
||||
fieldLabel: 'Job Title',
|
||||
name: 'title',
|
||||
value: 'Jr. Developer'
|
||||
}),
|
||||
|
||||
new Ext.form.TextField({
|
||||
fieldLabel: 'Company',
|
||||
name: 'company',
|
||||
value: 'Ext JS'
|
||||
}),
|
||||
|
||||
new Ext.form.TextArea({
|
||||
fieldLabel: 'Address',
|
||||
name: 'address',
|
||||
grow: true,
|
||||
preventScrollbars:true,
|
||||
value: '4 Redbulls Drive'
|
||||
})
|
||||
);
|
||||
form.fieldset(
|
||||
{legend:'Phone Numbers'},
|
||||
new Ext.form.TextField({
|
||||
fieldLabel: 'Home',
|
||||
name: 'home',
|
||||
value: '(888) 555-1212'
|
||||
}),
|
||||
|
||||
new Ext.form.TextField({
|
||||
fieldLabel: 'Business',
|
||||
name: 'business'
|
||||
}),
|
||||
|
||||
new Ext.form.TextField({
|
||||
fieldLabel: 'Mobile',
|
||||
name: 'mobile'
|
||||
}),
|
||||
|
||||
new Ext.form.TextField({
|
||||
fieldLabel: 'Fax',
|
||||
name: 'fax'
|
||||
})
|
||||
);
|
||||
form.end(); // closes the last container element (column, layout, fieldset, etc) and moves up 1 level in the stack
|
||||
|
||||
|
||||
form.column(
|
||||
{width:202, style:'margin-left:10px', clear:true}
|
||||
);
|
||||
|
||||
form.fieldset(
|
||||
{id:'photo', legend:'Photo'}
|
||||
);
|
||||
form.end();
|
||||
|
||||
form.fieldset(
|
||||
{legend:'Options', hideLabels:true},
|
||||
new Ext.form.Checkbox({
|
||||
boxLabel:'Ext 1.0 User',
|
||||
name:'extuser'
|
||||
}),
|
||||
new Ext.form.Checkbox({
|
||||
boxLabel:'Ext Commercial User',
|
||||
name:'extcomm'
|
||||
}),
|
||||
new Ext.form.Checkbox({
|
||||
boxLabel:'Ext Premium Member',
|
||||
name:'extprem'
|
||||
}),
|
||||
new Ext.form.Checkbox({
|
||||
boxLabel:'Ext Team Member',
|
||||
name:'extteam',
|
||||
checked:true
|
||||
})
|
||||
);
|
||||
|
||||
form.end(); // close the column
|
||||
|
||||
|
||||
form.applyIfToFields({
|
||||
width:230
|
||||
});
|
||||
|
||||
form.addButton('Save');
|
||||
form.addButton('Cancel');
|
||||
|
||||
form.render('form-ct4');
|
||||
|
||||
// The form elements are standard HTML elements. By assigning an id (as we did above)
|
||||
// we can manipulate them like any other element
|
||||
var photo = Ext.get('photo');
|
||||
var c = photo.createChild({
|
||||
tag:'center',
|
||||
cn: {
|
||||
tag:'img',
|
||||
src: 'http://extjs.com/forum/image.php?u=2&dateline=1175747336',
|
||||
style:'margin-bottom:5px;'
|
||||
}
|
||||
});
|
||||
new Ext.Button(c, {
|
||||
text: 'Change Photo'
|
||||
});
|
||||
});
|
||||
31
www/extras/yui-ext/examples/form/forms.css
Normal file
31
www/extras/yui-ext/examples/form/forms.css
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
/*
|
||||
* Ext JS Library 1.0.1
|
||||
* Copyright(c) 2006-2007, Ext JS, LLC.
|
||||
* licensing@extjs.com
|
||||
*
|
||||
* http://www.extjs.com/license
|
||||
*/
|
||||
|
||||
.calendar .x-menu-item-icon {
|
||||
background-image:url(../../resources/images/default/shared/calendar.gif);
|
||||
}
|
||||
|
||||
.search-item {
|
||||
font:normal 11px tahoma, arial, helvetica, sans-serif;
|
||||
padding:3px 10px 3px 10px;
|
||||
border-bottom:1px solid #eeeeee;
|
||||
}
|
||||
.search-item h3 {
|
||||
display:block;
|
||||
font:inherit;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.search-item h3 span {
|
||||
float: right;
|
||||
font-weight:normal;
|
||||
margin:0 0 5px 5px;
|
||||
width:100px;
|
||||
display:block;
|
||||
clear:none;
|
||||
}
|
||||
147
www/extras/yui-ext/examples/form/forms.html
Normal file
147
www/extras/yui-ext/examples/form/forms.html
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
||||
<title>Forms</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
|
||||
|
||||
<!-- GC --> <!-- LIBS --> <script type="text/javascript" src="../../adapter/yui/yui-utilities.js"></script> <script type="text/javascript" src="../../adapter/yui/ext-yui-adapter.js"></script> <!-- ENDLIBS -->
|
||||
<script type="text/javascript" src="../../ext-all.js"></script>
|
||||
|
||||
<script type="text/javascript" src="forms.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="forms.css" />
|
||||
|
||||
<!-- Common Styles for the examples -->
|
||||
<link rel="stylesheet" type="text/css" href="../examples.css" />
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
|
||||
<h1>Forms</h1>
|
||||
<p>The js is not minified so it is readable. See <a href="forms.js">forms.js</a>.</p>
|
||||
|
||||
<form id="form1" class="x-form">
|
||||
<div style="width:400px;">
|
||||
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
|
||||
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
|
||||
<h3 style="margin-bottom:5px;">Ext Live Forms</h3>
|
||||
<!-- begin form layout -->
|
||||
<div class="x-form-bd" id="container">
|
||||
<fieldset>
|
||||
<legend>ComboBox Fields</legend>
|
||||
|
||||
<div class="x-form-item">
|
||||
<label for="combo-local">Local Data:</label>
|
||||
<div class="x-form-element">
|
||||
<input type="text" size="20" name="combo-local" id="combo-local" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="x-form-item">
|
||||
<label for="combo-ajax">Ajax Data:</label>
|
||||
<div class="x-form-element">
|
||||
<input type="text" size="20" name="combo-ajax" id="combo-ajax" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="x-form-item">
|
||||
<label for="combo-selection">Only Selection:</label>
|
||||
<div class="x-form-element">
|
||||
<input type="text" size="20" value="OH" name="combo-selection" id="combo-selection" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="x-form-item">
|
||||
<label for="combo-tpl">Item Templates:</label>
|
||||
<div class="x-form-element">
|
||||
<input type="text" size="20" name="combo-tpl" id="combo-tpl" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="x-form-item">
|
||||
<label for="combo-tpl">Unobtrusive:</label>
|
||||
<div class="x-form-element">
|
||||
<select name="light" id="light">
|
||||
<option value="Shade">Shade</option>
|
||||
<option value="Mostly Shady">Mostly Shady</option>
|
||||
<option value="Sun or Shade">Sun or Shade</option>
|
||||
|
||||
<option value="Mostly Sunny">Mostly Sunny</option>
|
||||
|
||||
<option value="Sunny">Sunny</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Component Fields</legend>
|
||||
|
||||
<div class="x-form-item">
|
||||
<label for="markup-date">Date:</label>
|
||||
<div class="x-form-element">
|
||||
<input type="text" size="10" value="03/08/03" name="markup-date" id="markup-date" />
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Live Validation and key filtering</legend>
|
||||
|
||||
<div class="x-form-item">
|
||||
<label for="required">Required:</label>
|
||||
<div class="x-form-element">
|
||||
<input type="text" size="24" name="required" id="required" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="x-form-item">
|
||||
<label for="alpha">Alpha:</label>
|
||||
<div class="x-form-element">
|
||||
<input type="text" size="24" name="alpha" id="alpha" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="x-form-item">
|
||||
<label for="alpha2">(No Filter):</label>
|
||||
<div class="x-form-element">
|
||||
<input type="text" size="24" name="alpha2" id="alpha2" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="x-form-item">
|
||||
<label for="alphanum">Alphanum:</label>
|
||||
<div class="x-form-element">
|
||||
<input type="text" size="24" name="alphanum" id="alphanum" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="x-form-item">
|
||||
<label for="email">Email:</label>
|
||||
<div class="x-form-element">
|
||||
<input type="text" size="32" name="email" id="email" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="x-form-item">
|
||||
<label for="url">URL:</label>
|
||||
<div class="x-form-element">
|
||||
<input type="text" size="32" name="url" id="url" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="x-form-item">
|
||||
<label for="url">Auto grow textareas:</label>
|
||||
<div class="x-form-element">
|
||||
<textarea name="grow" id="grow" cols="25" rows="3"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<!-- end form layout -->
|
||||
</div></div></div>
|
||||
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
|
||||
</div>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
69
www/extras/yui-ext/examples/form/forms.js
vendored
Normal file
69
www/extras/yui-ext/examples/form/forms.js
vendored
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
/*
|
||||
* Ext JS Library 1.0.1
|
||||
* Copyright(c) 2006-2007, Ext JS, LLC.
|
||||
* licensing@extjs.com
|
||||
*
|
||||
* http://www.extjs.com/license
|
||||
*/
|
||||
|
||||
Ext.onReady(function(){
|
||||
Ext.QuickTips.init();
|
||||
|
||||
Ext.MessageBox.alert("Warning", "This example is not done and results may vary.");
|
||||
|
||||
// Change field to default to validation message "under" instead of tooltips
|
||||
Ext.form.Field.prototype.msgTarget = 'under';
|
||||
|
||||
|
||||
var date = new Ext.form.DateField({
|
||||
allowBlank:false
|
||||
});
|
||||
|
||||
date.applyTo('markup-date');
|
||||
|
||||
var tranny = new Ext.form.ComboBox({
|
||||
typeAhead: true,
|
||||
triggerAction: 'all',
|
||||
transform:'light',
|
||||
width:120,
|
||||
forceSelection:true
|
||||
});
|
||||
|
||||
var required = new Ext.form.TextField({
|
||||
allowBlank:false
|
||||
});
|
||||
required.applyTo('required');
|
||||
|
||||
var alpha = new Ext.form.TextField({
|
||||
vtype:'alpha'
|
||||
});
|
||||
alpha.applyTo('alpha');
|
||||
|
||||
var alpha2 = new Ext.form.TextField({
|
||||
vtype:'alpha',
|
||||
disableKeyFilter:true
|
||||
});
|
||||
alpha2.applyTo('alpha2');
|
||||
|
||||
var alphanum = new Ext.form.TextField({
|
||||
vtype:'alphanum'
|
||||
});
|
||||
alphanum.applyTo('alphanum');
|
||||
|
||||
var email = new Ext.form.TextField({
|
||||
allowBlank:false,
|
||||
vtype:'email'
|
||||
});
|
||||
email.applyTo('email');
|
||||
|
||||
var url = new Ext.form.TextField({
|
||||
vtype:'url'
|
||||
});
|
||||
url.applyTo('url');
|
||||
|
||||
var grow = new Ext.form.TextArea({
|
||||
width:200, grow:true
|
||||
});
|
||||
grow.applyTo('grow');
|
||||
|
||||
});
|
||||
43
www/extras/yui-ext/examples/form/forum-search.html
Normal file
43
www/extras/yui-ext/examples/form/forum-search.html
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
||||
<title>ComboBox - Live Search</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
|
||||
|
||||
<!-- GC --> <!-- LIBS --> <script type="text/javascript" src="../../adapter/yui/yui-utilities.js"></script> <script type="text/javascript" src="../../adapter/yui/ext-yui-adapter.js"></script> <!-- ENDLIBS -->
|
||||
<script type="text/javascript" src="../../ext-all.js"></script>
|
||||
|
||||
<script type="text/javascript" src="forum-search.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="combos.css" />
|
||||
|
||||
<!-- Common Styles for the examples -->
|
||||
<link rel="stylesheet" type="text/css" href="../examples.css" />
|
||||
<style type="text/css">
|
||||
p { width:650px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
|
||||
<p>
|
||||
<b>Combo with Templates and Ajax</b><br />
|
||||
This is a more advanced example that shows how you can combine paging, Ext.Template and a remote data store
|
||||
to create a "live search" feature.
|
||||
</p>
|
||||
<p>The js is not minified so it is readable. See <a href="forum-search.js">forum-search.js</a>.</p>
|
||||
|
||||
<!-- The box wrap markup embedded instead of using Element.boxWrap() -->
|
||||
<div style="width:600px;">
|
||||
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
|
||||
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
|
||||
<h3 style="margin-bottom:5px;">Search the Ext Forums</h3>
|
||||
<input type="text" size="40" name="search" id="search" />
|
||||
<div style="padding-top:4px;">
|
||||
Live search requires a minimum of 4 characters.
|
||||
</div>
|
||||
</div></div></div>
|
||||
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
54
www/extras/yui-ext/examples/form/forum-search.js
vendored
Normal file
54
www/extras/yui-ext/examples/form/forum-search.js
vendored
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
/*
|
||||
* Ext JS Library 1.0.1
|
||||
* Copyright(c) 2006-2007, Ext JS, LLC.
|
||||
* licensing@extjs.com
|
||||
*
|
||||
* http://www.extjs.com/license
|
||||
*/
|
||||
|
||||
Ext.onReady(function(){
|
||||
|
||||
Ext.MessageBox.alert("Sorry", "This example is not compatible with the new site, no longer functions and is for reference only");
|
||||
|
||||
var ds = new Ext.data.Store({
|
||||
proxy: new Ext.data.HttpProxy({
|
||||
url: '/forum2/topics-remote.php'
|
||||
}),
|
||||
reader: new Ext.data.JsonReader({
|
||||
root: 'topics',
|
||||
totalProperty: 'totalCount',
|
||||
id: 'post_id'
|
||||
}, [
|
||||
{name: 'title', mapping: 'topic_title'},
|
||||
{name: 'topicId', mapping: 'topic_id'},
|
||||
{name: 'author', mapping: 'author'},
|
||||
{name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
|
||||
{name: 'excerpt', mapping: 'post_text'}
|
||||
])
|
||||
});
|
||||
|
||||
// Custom rendering Template
|
||||
var resultTpl = new Ext.Template(
|
||||
'<div class="search-item">',
|
||||
'<h3><span>{lastPost:date("M j, Y")}<br />by {author}</span>{title}</h3>',
|
||||
'{excerpt}',
|
||||
'</div>'
|
||||
);
|
||||
|
||||
var search = new Ext.form.ComboBox({
|
||||
store: ds,
|
||||
displayField:'title',
|
||||
typeAhead: false,
|
||||
loadingText: 'Searching...',
|
||||
width: 570,
|
||||
pageSize:10,
|
||||
hideTrigger:true,
|
||||
tpl: resultTpl,
|
||||
onSelect: function(record){ // override default onSelect to do redirect
|
||||
window.location =
|
||||
String.format('/forum/viewtopic.php?t={0}#{1}', record.data.topicId, record.id);
|
||||
}
|
||||
});
|
||||
// apply it to the exsting input element
|
||||
search.applyTo('search');
|
||||
});
|
||||
64
www/extras/yui-ext/examples/form/states.js
vendored
Normal file
64
www/extras/yui-ext/examples/form/states.js
vendored
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
/*
|
||||
* Ext JS Library 1.0.1
|
||||
* Copyright(c) 2006-2007, Ext JS, LLC.
|
||||
* licensing@extjs.com
|
||||
*
|
||||
* http://www.extjs.com/license
|
||||
*/
|
||||
|
||||
// some data used in the examples
|
||||
Ext.namespace('Ext.exampledata');
|
||||
|
||||
Ext.exampledata.states = [
|
||||
['AL', 'Alabama'],
|
||||
['AK', 'Alaska'],
|
||||
['AZ', 'Arizona'],
|
||||
['AR', 'Arkansas'],
|
||||
['CA', 'California'],
|
||||
['CO', 'Colorado'],
|
||||
['CN', 'Connecticut'],
|
||||
['DE', 'Delaware'],
|
||||
['DC', 'District of Columbia'],
|
||||
['FL', 'Florida'],
|
||||
['GA', 'Georgia'],
|
||||
['HW', 'Hawaii'],
|
||||
['ID', 'Idaho'],
|
||||
['IL', 'Illinois'],
|
||||
['IN', 'Indiana'],
|
||||
['IA', 'Iowa'],
|
||||
['KS', 'Kansas'],
|
||||
['KY', 'Kentucky'],
|
||||
['LA', 'Louisiana'],
|
||||
['MA', 'Maine'],
|
||||
['MD', 'Maryland'],
|
||||
['MS', 'Massachusetts'],
|
||||
['MI', 'Michigan'],
|
||||
['MN', 'Minnesota'],
|
||||
['MS', 'Mississippi'],
|
||||
['MO', 'Missouri'],
|
||||
['MT', 'Montana'],
|
||||
['NE', 'Nebraska'],
|
||||
['NV', 'Nevada'],
|
||||
['NH', 'New Hampshire'],
|
||||
['NJ', 'New Jersey'],
|
||||
['NM', 'New Mexico'],
|
||||
['NY', 'New York'],
|
||||
['NC', 'North Carolina'],
|
||||
['ND', 'North Dakota'],
|
||||
['OH', 'Ohio'],
|
||||
['OK', 'Oklahoma'],
|
||||
['OR', 'Oregon'],
|
||||
['PA', 'Pennsylvania'],
|
||||
['RH', 'Rhode Island'],
|
||||
['SC', 'South Carolina'],
|
||||
['SD', 'South Dakota'],
|
||||
['TE', 'Tennessee'],
|
||||
['TX', 'Texas'],
|
||||
['UT', 'Utah'],
|
||||
['VE', 'Vermont'],
|
||||
['VA', 'Virginia'],
|
||||
['WA', 'Washington'],
|
||||
['WV', 'West Virginia'],
|
||||
['WI', 'Wisconsin'],
|
||||
['WY', 'Wyoming']
|
||||
];
|
||||
17
www/extras/yui-ext/examples/form/xml-errors.xml
Normal file
17
www/extras/yui-ext/examples/form/xml-errors.xml
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<response success="false">
|
||||
<errors>
|
||||
<field>
|
||||
<id>first</id>
|
||||
<msg><![CDATA[
|
||||
Invalid name. <br /><i>This is a test validation message from the server </i>
|
||||
]]></msg>
|
||||
</field>
|
||||
<field>
|
||||
<id>dob</id>
|
||||
<msg><![CDATA[
|
||||
Invalid Date of Birth. <br /><i>This is a test validation message from the server </i>
|
||||
]]></msg>
|
||||
</field>
|
||||
</errors>
|
||||
</response>
|
||||
48
www/extras/yui-ext/examples/form/xml-form.html
Normal file
48
www/extras/yui-ext/examples/form/xml-form.html
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
||||
<title>XML Form</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
|
||||
|
||||
<!-- GC --> <!-- LIBS --> <script type="text/javascript" src="../../adapter/yui/yui-utilities.js"></script> <script type="text/javascript" src="../../adapter/yui/ext-yui-adapter.js"></script> <!-- ENDLIBS -->
|
||||
<script type="text/javascript" src="../../ext-all.js"></script>
|
||||
|
||||
<script type="text/javascript" src="states.js"></script>
|
||||
<script type="text/javascript" src="xml-form.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="forms.css" />
|
||||
|
||||
<!-- Common Styles for the examples -->
|
||||
<link rel="stylesheet" type="text/css" href="../examples.css" />
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
|
||||
<h1>Loading/Saving a Dynamic Form using XML</h1>
|
||||
<p>
|
||||
This is a very simple example of using XML for load and submit of data with an Ext dynamic form.
|
||||
</p>
|
||||
<p>
|
||||
Click "Load" to load the <a href="xml-form.xml">dummy XML data</a> from the server using an XmlReader.
|
||||
</p>
|
||||
<p>
|
||||
After loading the form, you will be able to hit submit. The submit action will make a post to the server,
|
||||
and the <a href="xml-errors.xml">dummy XML file</a> on the server with test server-side validation failure messages will be sent back.
|
||||
Those messages will be applied to the appropriate fields in the form.
|
||||
</p>
|
||||
<p>
|
||||
Note: The built-in JSON support does not require any special readers for mapping. However, If you don't like the Form's built-in JSON format, you could also use a JsonReader for reading data into a form.
|
||||
</p>
|
||||
<p>The js is not minified so it is readable. See <a href="xml-form.js">xml-form.js</a>.</p>
|
||||
|
||||
<div style="width:340px;">
|
||||
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
|
||||
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc" id="box-bd">
|
||||
<h3>XML Form</h3>
|
||||
<div id="form-ct">
|
||||
|
||||
</div>
|
||||
</div></div></div>
|
||||
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
|
||||
</div>
|
||||
<div class="x-form-clear"></div>
|
||||
</body>
|
||||
</html>
|
||||
124
www/extras/yui-ext/examples/form/xml-form.js
vendored
Normal file
124
www/extras/yui-ext/examples/form/xml-form.js
vendored
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
/*
|
||||
* Ext JS Library 1.0.1
|
||||
* Copyright(c) 2006-2007, Ext JS, LLC.
|
||||
* licensing@extjs.com
|
||||
*
|
||||
* http://www.extjs.com/license
|
||||
*/
|
||||
|
||||
Ext.onReady(function(){
|
||||
|
||||
Ext.QuickTips.init();
|
||||
|
||||
// turn on validation errors beside the field globally
|
||||
Ext.form.Field.prototype.msgTarget = 'side';
|
||||
|
||||
var fs = new Ext.form.Form({
|
||||
labelAlign: 'right',
|
||||
labelWidth: 75,
|
||||
waitMsgTarget: 'box-bd',
|
||||
|
||||
// configure how to read the XML Data
|
||||
reader : new Ext.data.XmlReader({
|
||||
record : 'contact',
|
||||
success: '@success'
|
||||
}, [
|
||||
{name: 'first', mapping:'name/first'}, // custom mapping
|
||||
{name: 'last', mapping:'name/last'},
|
||||
'company', 'email', 'state',
|
||||
{name: 'dob', type:'date', dateFormat:'m/d/Y'} // custom data types
|
||||
]),
|
||||
|
||||
// reusable eror reader class defined at the end of this file
|
||||
errorReader: new Ext.form.XmlErrorReader()
|
||||
});
|
||||
|
||||
fs.fieldset(
|
||||
{legend:'Contact Information'},
|
||||
new Ext.form.TextField({
|
||||
fieldLabel: 'First Name',
|
||||
name: 'first',
|
||||
width:190
|
||||
}),
|
||||
|
||||
new Ext.form.TextField({
|
||||
fieldLabel: 'Last Name',
|
||||
name: 'last',
|
||||
width:190
|
||||
}),
|
||||
|
||||
new Ext.form.TextField({
|
||||
fieldLabel: 'Company',
|
||||
name: 'company',
|
||||
width:190
|
||||
}),
|
||||
|
||||
new Ext.form.TextField({
|
||||
fieldLabel: 'Email',
|
||||
name: 'email',
|
||||
vtype:'email',
|
||||
width:190
|
||||
}),
|
||||
|
||||
new Ext.form.ComboBox({
|
||||
fieldLabel: 'State',
|
||||
hiddenName:'state',
|
||||
store: new Ext.data.SimpleStore({
|
||||
fields: ['abbr', 'state'],
|
||||
data : Ext.exampledata.states // from states.js
|
||||
}),
|
||||
valueField:'abbr',
|
||||
displayField:'state',
|
||||
typeAhead: true,
|
||||
mode: 'local',
|
||||
triggerAction: 'all',
|
||||
emptyText:'Select a state...',
|
||||
selectOnFocus:true,
|
||||
width:190
|
||||
}),
|
||||
|
||||
new Ext.form.DateField({
|
||||
fieldLabel: 'Date of Birth',
|
||||
name: 'dob',
|
||||
width:190,
|
||||
allowBlank:false
|
||||
})
|
||||
);
|
||||
|
||||
// simple button add
|
||||
fs.addButton('Load', function(){
|
||||
fs.load({url:'xml-form.xml', waitMsg:'Loading'});
|
||||
});
|
||||
|
||||
// explicit add
|
||||
var submit = fs.addButton({
|
||||
text: 'Submit',
|
||||
disabled:true,
|
||||
handler: function(){
|
||||
fs.submit({url:'xml-errors.xml', waitMsg:'Saving Data...'});
|
||||
}
|
||||
});
|
||||
|
||||
fs.render('form-ct');
|
||||
|
||||
fs.on({
|
||||
actioncomplete: function(form, action){
|
||||
if(action.type == 'load'){
|
||||
submit.enable();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// A reusable error reader class for XML forms
|
||||
Ext.form.XmlErrorReader = function(){
|
||||
Ext.form.XmlErrorReader.superclass.constructor.call(this, {
|
||||
record : 'field',
|
||||
success: '@success'
|
||||
}, [
|
||||
'id', 'msg'
|
||||
]
|
||||
);
|
||||
};
|
||||
Ext.extend(Ext.form.XmlErrorReader, Ext.data.XmlReader);
|
||||
13
www/extras/yui-ext/examples/form/xml-form.xml
Normal file
13
www/extras/yui-ext/examples/form/xml-form.xml
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<response success="true">
|
||||
<contact>
|
||||
<name>
|
||||
<first>Jack</first>
|
||||
<last>Slocum</last>
|
||||
</name>
|
||||
<company>Ext JS</company>
|
||||
<email>support@extjs.com</email>
|
||||
<state>OH</state>
|
||||
<dob>04/15/2007</dob>
|
||||
</contact>
|
||||
</response>
|
||||
Loading…
Add table
Add a link
Reference in a new issue