237 lines
8.1 KiB
HTML
237 lines
8.1 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" />
|
|
<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="../shared/examples.css" />
|
|
<style type="text/css">
|
|
p { width:650px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<script type="text/javascript" src="../shared/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 its data source.
|
|
This means your data can be XML, JSON, arrays or any other supported format. It can be loaded using
|
|
Ajax, via script tags or locally. 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.ArrayStore({
|
|
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>
|
|
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.ArrayStore({
|
|
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>
|
|
The combo box can also use plain array data directly as its data source, wrapping the array internally
|
|
with a ArrayStore as needed. You can pass a 1-dimensional or multi-dimensional array as the store config:</p>
|
|
<div>
|
|
<input type="text" id="array-states" size="20"/>
|
|
</div>
|
|
<div id="array-combo-code-panel" style="margin-top:10px">
|
|
<pre id="array-combo-code" class="code"><code>var comboFromArray = new Ext.form.ComboBox({
|
|
store: exampleData, //direct array data
|
|
typeAhead: true,
|
|
triggerAction: 'all',
|
|
emptyText:'Select a state...',
|
|
selectOnFocus:true,
|
|
applyTo: 'array-states'
|
|
});
|
|
</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>
|