【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"}
    ]
}