184 lines
6.3 KiB
HTML
184 lines
6.3 KiB
HTML
<!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>
|