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
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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue