Extjs3.0 checkboxGroup 動態(tài)添加item實現(xiàn)思路
更新時間：2013年08月14日 15:16:07 作者：
Extjs3.0中的CheckboxGroup默認(rèn)不能動態(tài)添加item,如需要數(shù)據(jù)動態(tài)創(chuàng)建，試著創(chuàng)建整個CheckboxGroup，而不是動態(tài)添加item，具體實現(xiàn)如下，感興趣的朋友可以了解下
Extjs3.0 中的CheckboxGroup默認(rèn)不能動態(tài)添加item。雖然它繼承了Ext.form.Field，但是卻類似于容器。
CheckboxGroup配置中的items處理生成一個對應(yīng)的panel，該處理過程只有一次，所以很難對CheckboxGroup進行動態(tài)添加。
如需要數(shù)據(jù)動態(tài)創(chuàng)建，試著創(chuàng)建整個CheckboxGroup，而不是動態(tài)添加item。
var unitColumns=[];
for(var i = 0;i < records.length;i++){
unitColumns.push({
boxLabel: records[i].data.A11,
name: records[i].data.A11,
inputValue: records[i].data.A1,
checked: false
});
}
var itemsGroup = new Ext.form.CheckboxGroup({
id:'unitItems',
bodyStyle:'background-color: transparent;margin-top:10px;',
fieldLabel: '選項',
columns: 2,
items: unitColumns
});
Ext.getCmp('OptionsSet').add(itemsGroup);
Ext.getCmp('OptionsSet').doLayout();
CheckboxGroup配置中的items處理生成一個對應(yīng)的panel，該處理過程只有一次，所以很難對CheckboxGroup進行動態(tài)添加。
如需要數(shù)據(jù)動態(tài)創(chuàng)建，試著創(chuàng)建整個CheckboxGroup，而不是動態(tài)添加item。
復(fù)制代碼 代碼如下:
var unitColumns=[];
for(var i = 0;i < records.length;i++){
unitColumns.push({
boxLabel: records[i].data.A11,
name: records[i].data.A11,
inputValue: records[i].data.A1,
checked: false
});
}
var itemsGroup = new Ext.form.CheckboxGroup({
id:'unitItems',
bodyStyle:'background-color: transparent;margin-top:10px;',
fieldLabel: '選項',
columns: 2,
items: unitColumns
});
Ext.getCmp('OptionsSet').add(itemsGroup);
Ext.getCmp('OptionsSet').doLayout();
相關(guān)文章
這篇文章主要介紹了Extjs如何根據(jù)條件設(shè)置表格某行背景色,需要的朋友可以參考下2014-07-07
Extjs表單驗證包括空驗證、用vtype格式進行簡單的驗證、高級自定義密碼驗證、使用正則表達式驗證等等2014-03-03
下面我們寫一個最簡單的ExtJS應(yīng)用，在hello.html文件中輸入下面的代碼2009-04-04
Extjs Gird 支持中文拼音排序?qū)崿F(xiàn)代碼
本文為大家詳細(xì)介紹下Extjs Gird 支持中文拼音排序以及修復(fù)漢字排序異常的Bug、localeCompare比較漢字字符串，F(xiàn)irefox與IE均支持，感興趣的朋友可以參考下2013-04-04
ExtJS4 Grid改變單元格背景顏色及Column render學(xué)習(xí)
利用的是Column的render實現(xiàn)單元格背景顏色改變,本文給予了實現(xiàn)代碼，感興趣的朋友可以了解下，或許對你學(xué)習(xí)ExtJS4 Grid有所幫助2013-02-02
extjs實現(xiàn)選擇多表自定義查詢功能 前臺部分(ext源碼)
extjs實現(xiàn)選擇多表自定義查詢功能 前臺部分(ext源碼) ，需要的朋友可以參考下。2011-12-12
Ext JS框架中日期函數(shù)的用法及日期選擇控件的實現(xiàn)
Ext JS中的Ext.Date可以看作是JavaScript中date的加強版,提供了許多進階的日期操作函數(shù),下面我們就來看一下Ext JS框架中日期函數(shù)的用法及日期選擇控件的實現(xiàn)2016-05-05
JavaScript的ExtJS框架中數(shù)面板TreePanel的使用實例解析
TreePanel為ExtJS提供了一個方便的樹結(jié)構(gòu)數(shù)據(jù)展示,尤其是在處理JSON格式數(shù)據(jù)時十分常用,接下來我們就來看兩則JavaScript的ExtJS框架中數(shù)面板TreePanel的使用實例解析2016-05-05
Extjs改變樹節(jié)點的勾選狀態(tài)點擊按鈕將復(fù)選框去掉
需要一個功能點擊一個按鈕后將樹節(jié)點前的復(fù)選框去掉，變成沒有選擇的狀態(tài)，百度一下發(fā)現(xiàn)個不錯的方法，需要的朋友可以參考下2013-11-11
Extjs中ComboBox加載并賦初值的實現(xiàn)方法
當(dāng)需要為ComboBox加載數(shù)據(jù)后進行賦初始選中項的話，如果是寫在store.load()之后2012-03-03