如何使用基於從服務器返回的JSON對象生成的複選框填充Ext.form.CheckboxGroup

我試圖動態地填充Ext.form.CheckboxGroup和Ext.form.Checkbox從由jsp頁面拉出的JSON對象派生。我的JSON對象看起來是這樣的：如何使用基於從服務器返回的JSON對象生成的複選框填充Ext.form.CheckboxGroup

{ 
    "sensors": [ 
     { "id": 200, "name": "name - B - A" }, 
     { "id": 201, "name": "name - B - B" }, 
     { "id": 202, "name": "name - C - A" }, 
     { "id": 203, "name": "name - C - B" } 
    ] 
}

我可以用代碼加載這些對象爲Ext.data.JsonStore這樣的：

new Ext.data.JsonStore({ 
    id: 'sensorStore', 
    autoLoad: true, 
    method: 'GET', 
    baseParams: { 
     jobType: 'sensor' 
    }, 
    url: 'getstatus.jsp', 
    root: 'sensors', 
    sortInfo: { field: 'id', direction: 'ASC' }, 
    fields: [ 'id', 'name' ] 
}),

我的理解是，這會給我訪問一組Ext.data.Record對象，但是我無法弄清楚如何去迭代這些記錄來創建任何Ext.form.Checkbox，或者如果有其他方法來實現相同的結果。

我不想設置複選框的值，但我需要能夠在提交表單時引用它們。

來源

2011-03-16 Andrew Larned

假設商店被裝載（因爲你有自動加載：真），則需要

通過記錄迭代來創建複選框的陣列CONFIGS
創建checkboxgroup對象（使用創建的數組在＃1以上的項目配置）
這checkboxgroup添加到您的形式（或其他容器），並調用此容器的doLayout（）如果已經呈現

Snipp等迭代和創建複選框configs-

var checkboxconfigs = []; //array of about to be checkboxes. 
mystore.getRange().each(function(record){ 
    checkboxconfigs.push({ //pushing into array 
     id:record.data.id, 
     boxLabel:record.data.name, 
     //any other checkbox properties, layout related or whatever 
    }); 
});

片段創建checkboxgroup-

var myCheckboxgroup = new Ext.form.CheckboxGroup({ 
    id:'myGroup', 
    fieldLabel: 'Checkboxes in two columns', 
    columns:2, 
    items:checkboxconfigs //created in previous snippet. 
    //any other checkbox group configuration 
});

添加到您的容器中，並重繪它 -

mycontainer.add(myCheckboxgroup).doLayout();

編輯 - 您JsonStore配置不匹配到返回的數據。（ID需要是一個整數）

new Ext.data.JsonStore({ 
    id: 'sensorStore', 
    autoLoad: true, 
    method: 'GET', 
    baseParams: { 
     jobType: 'sensor' 
    }, 
    url: 'getstatus.jsp', 
    root: 'sensors', 
    sortInfo: { field: 'id', direction: 'ASC' }, 
    fields: [ {name:'id', type:int}, 'name' ] 
}),

來源

2011-03-16 21:33:26

這看起來像是我所需要的。我已經能夠得到它幾乎工作，但有一個問題。加載JsonStore異步？當我運行此代碼和console.log（）結果時，我的.getRange（）調用爲空。如果稍後使用Chrome Developer Tool Console檢查.getRange（）調用的值，它將顯示數據。如果加載存儲的調用是異步的，那麼在通過記錄開始迭代之前如何確保加載數據？ – 2011-03-17 13:36:08

我已經想出了異步部分，並將所有上述代碼片段放在來自JsonStore.load（）調用的回調中。現在我得到一個「Uncaught TypeError：Object 200 has no method'indexOf'」。（這裏的「200」是我的組中應該是CheckBox的第一個Object的id）。我不知道這是什麼意思。 – 2011-03-17 14:36:15

上面編輯了我的回答 - 在你的JsonStore - 字段中：[{name：'id'，type：int}，'name'] – 2011-03-17 15:52:24

如何使用基於從服務器返回的JSON對象生成的複選框填充Ext.form.CheckboxGroup

回答

相關問題