關於動態建立CheckBoxGroup 網路資料其實也不少,為什麼要寫此篇呢,是因為ext3裡面還有一個坑,希望還能給看到這裡的親們提供一點力所能及的幫助吧。
Extjs3.0 中的CheckboxGroup預設無法動態加入item。雖然它繼承了Ext.form.Field,但卻類似容器。
CheckboxGroup配置中的items處理產生一個對應的panel,這個處理過程只有一次,所以很難對CheckboxGroup進行動態加入。
var checkBoxGroupTypes = new Ext.form.CheckboxGroup({ xtype:'checkboxgroup', fieldLabel:'请选择对应电厂', columns:9, width: 600, name:'plantGroup' }); /*这里采用jquery的ajax请求,为解决同步异步问题 * 这里async 必须设置成false * 否则页面加载时,无法将动态创建的checkBoxGroup添加到容器中*/ $.ajax({ url : plantGroupUrl, method : 'POST', async : false, cache : true, success : function(response){ var res = response; var resLen = res.length; var items = []; for(var i = 0;i<res.length;i++){ var data = res[i]; var chb = {boxLabel:data.BRIEFNAME,name:data.CODE,inputValue:data.CODE,checked:true}; items.push(chb); } checkBoxGroupTypes.items = items; checkBoxGroupTypes.doLayout(); } });
/*这里采用jquery的ajax请求,为解决同步异步问题 * 这里async 必须设置成false * 否则页面加载时,无法将动态创建的checkBoxGroup添加到容器中*/
這裡其實主要看的就是這塊註釋,雖然簡陋,但是這個問題昨天晚上讓我一直頭疼,索性不考慮,一覺醒來就有了靈感。
底下就是將創建的CheckBoxGroup加入了panel裡與網路上的方式有所不同。
var searchForm = new Ext.FormPanel({ region:'north', frame:true, title:'查询条件', height:100, bodyStyle:'border:0px', collapsiple : true, animCollapse : false, layout : 'fit', items: [{ bodyStyle:'border:0px', layout:'column', height:30, border:false, items:[ { bodyStyle:'border:1px', layout:'form', labelWidth:80, width:'220', border:false, allowBlank:false, items:[endMonth] }, checkBoxGroupTypes, { width:60, bodyStyle:'border:0px', layout: 'form', border:false, defaultType: 'textfield', items: [{ xtype: 'button', text: '查询', handler:function(){ if(checkSelectCondition()){ //在点击查询后过段时间再让其再点击查询 this.disable(); var thisObject = this; setTimeout(function(){thisObject.enable();}, 5000); search(); } } }] },{ width:70, bodyStyle:'border:0px', layout: 'form', border:false, defaultType: 'textfield', items: [{ xtype: 'button', text: '重置', handler:function(){ searchForm.getForm().reset(); } }] } ] }] });
附录:这是当时参考的网上的例子,不同点(1)ajax(2)添加到容器的方式
Ext.Ajax.request({ url: 'jsp/insurance/ins_liquidation/data/getPersonInsType.jsp', params : {'employeeId':employeeId}, success: function(response, opts) { var res = Ext.util.JSON.decode(response.responseText).root; var resLen = res.length; var items=[]; for(var i=0;i<res.length;i++) { var d=res[i]; var chk = {boxLabel: d.insName, name: d.insTypesId, inputValue:d.insTypesId,checked:true}; items.push(chk); } //定义多选组 var CheckBoxGroupTypes = new Ext.form.CheckboxGroup( { xtype: 'checkboxgroup', fieldLabel: '申请清算险种', id:'insTypeCb', name :'insTypeCb', columns: resLen, anchor:"95%", msgTarget:"side", width:400 }); CheckBoxGroupTypes.items = items; var cbp = Ext.getCmp('checkBoxPanel'); cbp.add(CheckBoxGroupTypes); cbp.doLayout(); }, failure: function(response, opts) { } });
#
以上是關於動態建立CheckBoxGroup中的一個實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!