ExtJS获取ComboBox远程数据的JsonReader和本地数据的ArrayStore的写法

发布于 2011-08-06 | 更新于 2020-09-20

使用ArrayStore获取本地数据的方法:

MisTab4.createSexCom = function(){
var com_brandType = new Ext.form.ComboBox({
name:‘sex’,
id: ‘sex’,
fieldLabel: ‘适用性别’,
mode:‘local’,
valueField: ‘sexTypeid’,
displayField:‘sexTypename’,
allowBlank:false,
minListWidth:220,
store: new Ext.data.ArrayStore({
id:sexCom,
fields:[
‘sexTypeid’,
‘sexTypename’
],
data:[[“MAN”,“男”],[“WOMEN”,“女”],[“NONE”,“男女不限”]]
}),
listeners :{
expand :function(){
/下拉框展开时重置,否则不能重新加载列表/
Ext.getCmp(‘sex’).reset() ;
}
}
});
return com_brandType;
};

使用JsonReader获取远程数据的方法:

首先创建一个Store 使用HttpProxy代码设置url请求,创建JsonReader解析器,最后使用Record的create方法生成一个构造函数,该函数能产生符合规定的Record对象使用mapping属性把记录的值映射到ComboBox对应的配置项中:

MisTab4.getBrandStore = function(){
var typeStore = new Ext.data.Store({
proxy:new Ext.data.HttpProxy({
url:‘product/Brand-getAllBrandList.action’
}),
reader:new Ext.data.JsonReader({
totalProperty : ‘totalCount’,
root : ‘brand’
},
Ext.data.Record.create([{name:‘brandId’,mapping : ‘brandId’},
{name:‘brandName’,mapping : ‘brandName’}])),
});
return typeStore;
};

如果返回的数据时一个数组,也可以使用ArrayReader解析:

reader:new Ext.data.ArrayReader({},
[{name:‘brandId’},{name:‘brandName’} ]),

也可以使用下面更简单的方法创建Store:

var url = “product/Product-selectType.action”;
return new Ext.data.JsonStore({
root:‘productType’,
url: url,
fields: [‘id’,‘name’]
});

创建ComboBox组件:

MisTab4.createbrandCom = function(){
var brandStore = MisTab4.getBrandStore();
brandStore.load();
var com_brandType = new Ext.form.ComboBox({
name:‘brandCode1’,
id: ‘brandCode1’,
hiddenName:‘brandCode’,
store:brandStore,
fieldLabel: ‘品 牌’,
mode:‘remote’,
triggerAction:‘all’,
valueField: ‘brandId’,
displayField:‘brandName’,
allowBlank:false,
minListWidth:220
});
return com_brandType;
};

本文作者: arthinking

本文链接: https://www.itzhai.comextjs-combobox-access-to-remote-data-and-local-data-arraystore-jsonreader-wording.html

版权声明: 版权归作者所有,未经许可不得转载,侵权必究!联系作者请加公众号。

×
IT宅

关注公众号及时获取网站内容更新。