Ext组件combobox使用外部数据
本文无实例, 下面进行原理和代码讲解
combobox是用store来存储数据的，store存放的数据是以数组的形式，数组中每个元素的类型为 Ext.data.Record
原理见下图
下面代码展示如何将本地获取的数据通过离线方式显示在combobox中
<1>创建combo与combo对应的store
var store = new Ext.data.Store({});
var combo = new Ext.form.ComboBox({
listeners : {
select : {
fn : function(combo, record, index) {
//选择combo下拉选项时调用此函数
return selectArea(combo, record, index);
}
}
},
allowBlank : false,
store : store,
emptyText : "--请选择--",
fieldLabel : "<font color='red'>*</font>城市",
editable : false,
anchor : "50%",
mode : "local",
id : "id_combo",
displayField : "address",
valueField : "code",
triggerAction : "all"
});<2>创建数据，与combo对应的store进行绑定， 注意 name, address这二个字段必须与comboBox中的
valueField 和 displayField 的值相对应
valueField 在combox选定一个项后，可以根据 Ext.getCmp('id_combo').getValue()来获得相应的code值
displayField显示在界面上
//构建数组，往数组中存放10个Record数据, 将数组存放到combobox的store中
var recordArray = new Array();
for(var i = 0; i < 10; i++){
var data = new Ext.data.Record();
data.set('code', i);
data.set('address', '江苏省南京市');
recordArray.push(data);
}
Ext.getCmp('id_combo').getStore.add(recordArray);效果图:
