Rumah >hujung hadapan web >tutorial js >关于动态创建CheckBoxGroup中的一个实例
关于动态创建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) { } });
Atas ialah kandungan terperinci 关于动态创建CheckBoxGroup中的一个实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!