创建Combobox
combobox可以自己输入值,也可以从下拉框中直接选择。输入的值可以不是下拉框的值。
如果下拉框的值是本地数据,最好设定queryMode为local,这样可以提高用户的响应速度。当typeAhead设定为true时,会自动选择下拉框中第一匹配的字段
Ext.tip.QuickTipManager.init();
// Define the model for a State
Ext.define('State', {
extend: 'Ext.data.Model',
fields: [
{ type: 'string', name: 'abbr' },
{ type: 'string', name: 'name' },
{ type: 'string', name: 'slogan' }
]
});
// The data for all states
var states = [
{ "abbr": "AL", "name": "Alabama", "slogan": "The Heart of Dixie" },
{ "abbr": "WY", "name": "Wyoming", "slogan": "Like No Place on Earth" }
];
// The data store holding the states; shared by each of the ComboBox examples below
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: 'div1',
displayField: 'name',
width: 320,
labelWidth: 130,
store: store,
queryMode: 'local',
typeAhead: true
});
2、设定combobox内容为空时显示的文字
emptyText:'hello the world',
3、自定义数据模板和提示信息
var customTplCombo = Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Select a single state',
renderTo: 'div1',
displayField: 'name',
width: 500,
labelWidth: 130,
store: store,
queryMode: 'local',
listConfig: {
getInnerTpl: function() {
return '<div data-qtip="{name}. {slogan}">{name} ({abbr})</div>';
}
}
});
4、选择多个数据
multiSelect:true,
5、设置选中值(参数可以是数组 如:['1','2'])
combo.setValue('全部');
6、Combobox的内容回传到后台。设置name配置项,在后台就可以通过Request["monthCombo"]来获取combo选择的内容。现在还不知道怎么把valueField的传到后台。这样传过去的是NameField的值
name: 'monthCombo',
7、设置必须从下拉框中选择一个值,只需要设定forceSelection配置项
forceSelection: true,
8、订阅选择事件。在选择一个值后会触发改事件。value参数传过来的是一个数组,可以获取已经选择的内容
listeners: {
select: {
scope: this,
fn: function(combo, value, option) {
var selectValue = value[value.length - 1].data.value;
if (selectValue == "全部") {
isSelectAll = true;
combo.setValue('全部');
}
else if (isSelectAll) {
isSelectAll = false;
combo.setValue(selectValue);
}
}
}
}
9、把HTML的Select标记转换为Combobox
<div id="transformCombo">
<label for="stateSelect">
Transformed select:</label>
<select name="state" id="stateSelect">
<option value="AL">Alabama</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
</select>
</div>
javascript代码
var transformed = Ext.create('Ext.form.field.ComboBox', {
typeAhead: true,
transform: 'stateSelect',
width: 135,
forceSelection: true
});