New file |
0,0 → 1,218 |
<!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" /> |
<link rel="stylesheet" type="text/css" href="../../resources/css/xtheme-gray.css" /> |
|
<!-- GC --> |
<!-- LIBS --> |
<script type="text/javascript" src="../../adapter/ext/ext-base.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> |
<div id="state-combo-code-panel" style="margin-top:10px"> |
<pre id="state-combo-code" 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, |
applyTo: 'local-states' |
}); |
</code></pre></div> |
<br /> |
</p> |
<p> |
The combo below uses the same data, but also illustrates how to use an optional |
custom template to create custom UI renditions for list items. In this case, |
each item has a popup QuickTip which displays the state's nickname when hovered over. |
</p> |
<div> |
<input type="text" id="local-states-with-qtip" size="20"/> |
</div> |
<div id="state-combo-qtip-code-panel" style="margin-top:10px"> |
<pre id="state-combo-qtip-code" class="code"><code>// simple array store |
var store = new Ext.data.SimpleStore({ |
fields: ['abbr', 'state', 'nick'], |
data : exampleData |
}); |
var comboWithTooltip = new Ext.form.ComboBox({ |
tpl: '<tpl for="."><div ext:qtip="{state}. {nick}" class="x-combo-list-item">{state}</div></tpl>', |
store: store, |
displayField:'state', |
typeAhead: true, |
mode: 'local', |
triggerAction: 'all', |
emptyText:'Select a state...', |
selectOnFocus:true, |
applyTo: 'local-states-with-qtip' |
}); |
</code></pre></div> |
<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> |
<div id="transformed-combo-code-panel" style="margin-top:10px"> |
<pre id="transformed-combo-code" class="code"><code>var converted = new Ext.form.ComboBox({ |
typeAhead: true, |
triggerAction: 'all', |
transform:'state', |
width:135, |
forceSelection:true |
}); |
</code></pre></div> |
<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> |