【ExtJS实践】之六 ：Combobox从后台获取JSON格式的数据

1、直接看代码：

Ext.BLANK_IMAGE_URL = "extjs/resources/images/default/s.gif";
    
var storeUnit = new Ext.data.JsonStore({
    fields: ['units_code', 'units_name'],
    url : "../Cost_JsonDb.ashx?tablename=cost_units",
    autoLoad:true,
    root : "units"
});


// 单位（计量单位）的下拉列表
var comboUnit = new Ext.form.ComboBox({
    store: storeUnit,
    displayField:'units_code',
    typeAhead: true,
    mode: 'local',
    forceSelection: true,
    triggerAction: 'all',
    emptyText:'选择单位...',
    selectOnFocus:true
});

Ext.onReady(function(){
    comboUnit.render("combo-div");
});

 

2、在实例化JsonStore时，需要指定的参数有：

fields : 绑定数据的字段

url : 获取后台数据的地址

autoload : 设置为true时，Ext会自动的调用url中指定的地址获取数据；设置为false，则需要执行JsonStore.load()来获取数据

root : 后台返回数据的根节点的名字。Ext中为combobox和grid绑定数据时，后台返回的数据必须有一个根节点，否则不能正确绑定。

 

3、后台需返回数据格式示例：

{
    "units":[
    {"units_code":"kg","units_name":"\u5343\u514B"},
    {"units_code":"m","units_name":"\u7C73"},
    {"units_code":"m2","units_name":"\u5E73\u65B9\u7C73"},
    {"units_code":"m3","units_name":"\u7ACB\u65B9\u7C73"},
    {"units_code":"t","units_name":"\u5428"}
    ]
}