<!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>
|
|
<!-- ExtJS -->
|
<script type="text/javascript" src="../../examples/shared/include-ext.js"></script>
|
<script type="text/javascript" src="../../examples/shared/options-toolbar.js"></script>
|
|
<!-- Shared -->
|
<link rel="stylesheet" type="text/css" href="../shared/example.css" />
|
|
<!-- GC -->
|
|
<!-- Example -->
|
<script type="text/javascript" src="combos.js"></script>
|
<style type="text/css">
|
.example {
|
width: 600px;
|
border: 1px solid #CCC;
|
padding: 0 10px;
|
margin: 0 0 10px;
|
}
|
.x-fieldset {
|
margin-top: 20px;
|
}
|
#transformCombo label {
|
display: block;
|
margin: 1em 0 2px;
|
}
|
</style>
|
|
</head>
|
<body>
|
|
<h1>Combo Boxes</h1>
|
<p>ComboBoxes can use any type of Ext.data.Store as a data source.</p>
|
<p>This means your data can be XML, JSON, arrays or any other supported format. It can be loaded using
|
Ajax, JSONP or locally.</p>
|
<p>The js is not minified so it is readable. See <a href="combos.js">combos.js</a>.</p>
|
|
<div class="example">
|
<h2>Remote query mode</h2>
|
<p>This ComboBox uses <code>queryMode: 'remote'</code> to perform the query on a remote API which
|
returns book titles which match the typed string.</p>
|
|
<div id="remoteQueryCombo"></div>
|
|
<pre class="code x-hide-display" id="remoteQueryComboCode">
|
var bookStore = new Ext.data.Store({
|
proxy: {
|
type: 'jsonp',
|
startParam: 'startIndex',
|
limitParam: 'maxResults',
|
url: 'https://www.googleapis.com/books/v1/volumes',
|
reader: {
|
type: 'json',
|
totalProperty: 'totalItems',
|
root: 'items'
|
}
|
},
|
fields: [{
|
name: 'title',
|
mapping: function(raw) {
|
var result = raw.volumeInfo.title;
|
if (raw.volumeInfo.subtitle) {
|
result = result + ' - ' + raw.volumeInfo.subtitle;
|
}
|
return result;
|
}
|
}, {
|
name: 'ISBN',
|
mapping: function(raw) {
|
var ids = raw.volumeInfo.industryIdentifiers;
|
return ids ? ids[0].identifier : 'No identifier for this book';
|
}
|
}]
|
});
|
|
var bookCombo = Ext.create('Ext.form.field.ComboBox', {
|
fieldLabel: 'Select Book',
|
renderTo: 'remoteQueryCombo',
|
displayField: 'title',
|
valueField: 'ISBN',
|
width: 500,
|
labelWidth: 130,
|
store: bookStore,
|
queryParam: 'q',
|
queryMode: 'remote',
|
|
// Do not use the default "all" for unbounded remote datasets.
|
// We could also have used the hideTrigger config
|
triggerAction: 'query',
|
|
listConfig: {
|
getInnerTpl: function() {
|
return '{%var value = this.field.getRawValue().replace(/([.?*+^$[\\]\\\\(){}|-])/g, "\\\\$1");%}' +
|
'{[values.title.replace(new RegExp(value, "i"), function(m) {return "<b>" + m + "</b>";})]}';
|
}
|
},
|
listeners: {
|
select: function() {
|
Ext.Msg.alert('Chosen book', 'Buying ISBN: ' + this.getValue());
|
}
|
}
|
});
|
</pre>
|
</div>
|
|
<div class="example">
|
<h2>Remote loaded, local query mode</h2>
|
<p>This ComboBox uses remotely loaded data, to perform querying client side.</p>
|
<p>This is suitable when the dataset is not too big or dynamic to be manipulated locally</p>
|
<p>This example uses a custom template for the dropdown list to illustrate grouping.</p>
|
|
<div id="remoteLoadedCombo"></div>
|
|
<pre class="code x-hide-display" id="remoteLoadedComboCode">
|
var Country = Ext.define('Country', {
|
extend: 'Ext.data.Model',
|
fields: ['name', {
|
name: 'region',
|
mapping: 'region.value'
|
}]
|
}),
|
countryStore = new Ext.data.Store({
|
model: Country,
|
proxy: {
|
type: 'jsonp',
|
callbackKey: 'prefix',
|
limitParam: 'per_page',
|
url: 'http://api.worldbank.org/countries?format=jsonp',
|
reader: {
|
type: 'json',
|
|
// Response is an array where element [1] is the array of records
|
getData: function(raw) {
|
return raw[1];
|
}
|
}
|
},
|
sorters: {
|
property: 'region'
|
},
|
|
// Data includes aggregates which are not countries
|
filters: {
|
fn: function(rec) {
|
return rec.get('region') !== 'Aggregates'
|
}
|
},
|
// Load whole dataset.
|
// API only returns 25 by default.
|
pageSize: 1000,
|
autoLoad: true
|
});
|
|
var countryCombo = Ext.create('Ext.form.field.ComboBox', {
|
fieldLabel: 'Select Country',
|
renderTo: 'remoteLoadedCombo',
|
displayField: 'name',
|
width: 500,
|
labelWidth: 130,
|
store: countryStore,
|
queryMode: 'local',
|
tpl: '<ul class="x-list-plain">' +
|
'{% var lastRegion, region; %}' +
|
'<tpl for=".">' +
|
// Only show region headers when there are more than 10 choices
|
'if (this.store.getCount() > 10 && region !== lastRegion) {' +
|
'if (region !== lastRegion) {' +
|
'lastRegion = region;%}' +
|
'<li class="x-grid-group-hd x-grid-group-title">{region}</li>' +
|
'{%}%}'+
|
'<li class="x-boundlist-item">' +
|
'{name}' +
|
'</li>'+
|
'</tpl>'+
|
'</ul>'
|
});
|
</pre>
|
</div>
|
|
<div class="example">
|
<h2>Locally loaded data</h2>
|
<p>This ComboBox uses local data from a JS array:</p>
|
|
<div id="simpleCombo"></div>
|
|
<pre class="code x-hide-display" id="simpleComboCode">// Define the model for a State
|
Ext.regModel('State', {
|
fields: [
|
{type: 'string', name: 'abbr'},
|
{type: 'string', name: 'name'},
|
{type: 'string', name: 'slogan'}
|
]
|
});
|
|
// The data store holding the states
|
var store = Ext.create('Ext.data.Store', {
|
model: 'State',
|
data: states
|
});
|
|
// Simple ComboBox using the data store
|
var simpleCombo = Ext.create('Ext.form.field.ComboBox', {
|
fieldLabel: 'Select a single state',
|
renderTo: 'simpleCombo',
|
displayField: 'name',
|
width: 500,
|
labelWidth: 130,
|
store: store,
|
queryMode: 'local',
|
typeAhead: true
|
});</pre>
|
</div>
|
|
<div class="example">
|
<h2>Custom Item Templates</h2>
|
<p>This ComboBox uses the same data, but also illustrates how to use an optional
|
custom template to create custom UI renditions for list items by overriding the getInnerTpl method. In this case
|
each item shows the state's abbreviation, and has a QuickTip which displays the state's nickname when hovered over.</p>
|
|
<div id="customTplCombo"></div>
|
|
<pre class="code x-hide-display" id="customTplComboCode">// Define the model for a State
|
Ext.regModel('State', {
|
fields: [
|
{type: 'string', name: 'abbr'},
|
{type: 'string', name: 'name'},
|
{type: 'string', name: 'slogan'}
|
]
|
});
|
|
// The data store holding the states
|
var store = Ext.create('Ext.data.Store', {
|
model: 'State',
|
data: states
|
});
|
|
// ComboBox with a custom item template
|
var customTplCombo = Ext.create('Ext.form.field.ComboBox', {
|
fieldLabel: 'Select a single state',
|
renderTo: 'customTplCombo',
|
displayField: 'name',
|
width: 500,
|
labelWidth: 130,
|
store: store,
|
queryMode: 'local',
|
listConfig: {
|
getInnerTpl: function() {
|
return '<div data-qtip="{name}. {slogan}">{name} ({abbr})</div>';
|
}
|
}
|
});</pre>
|
</div>
|
|
<div class="example">
|
<h2>Multiple Selection</h2>
|
<p>This ComboBox uses the same data once again, but allows selecting multiple values.</p>
|
|
<div id="multiSelectCombo"></div>
|
|
<pre class="code x-hide-display" id="multiSelectComboCode">// Define the model for a State
|
Ext.regModel('State', {
|
fields: [
|
{type: 'string', name: 'abbr'},
|
{type: 'string', name: 'name'},
|
{type: 'string', name: 'slogan'}
|
]
|
});
|
|
// The data store holding the states
|
var store = Ext.create('Ext.data.Store', {
|
model: 'State',
|
data: states
|
});
|
|
// ComboBox with multiple selection enabled
|
var multiCombo = Ext.create('Ext.form.field.ComboBox', {
|
fieldLabel: 'Select multiple states',
|
renderTo: 'multiSelectCombo',
|
multiSelect: true,
|
displayField: 'name',
|
width: 500,
|
labelWidth: 130,
|
store: store,
|
queryMode: 'local'
|
});</pre>
|
</div>
|
|
<div class="example">
|
<h2>Transformation</h2>
|
<p>ComboBoxes can also be created from existing HTML <code><select></code> elements on the page by
|
specifying the <code>transform</code> config. This allows creation of rich ComboBox fields with autocompletion
|
and list filtering, in an unobtrusive way.</p>
|
|
<div id="transformCombo">
|
<label for="stateSelect">Transformed select:</label>
|
<select name="state" id="stateSelect">
|
<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>
|
|
<label for="stateSelectOrig">Originally looked like:</label>
|
<select name="state-orig" id="stateSelectOrig">
|
<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>
|
|
<pre class="code x-hide-display" id="transformComboCode">var transformed = Ext.create('Ext.form.field.ComboBox', {
|
typeAhead: true,
|
transform: 'stateSelect',
|
width: 135,
|
forceSelection: true
|
});</pre>
|
</div>
|
|
</body>
|
</html>
|
