About dynamically creating an instance of CheckBoxGroup-JS Tutorial-php.cn

There is actually a lot of information on the Internet about dynamically creating CheckBoxGroup. Why should I write this article? It is because there is still a pitfall in ext3. I hope I can provide some help to those who see this.

CheckboxGroup in Extjs3.0 cannot dynamically add items by default. Although it inherits Ext.form.Field, it is similar to a container.
The items processing in the CheckboxGroup configuration generates a corresponding panel. This processing process is only once, so it is difficult to dynamically add a 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
         
          Copy after login

/*这里采用jquery的ajax请求，为解决同步异步问题 * 这里async 必须设置成false * 否则页面加载时，无法将动态创建的checkBoxGroup添加到容器中*/

Copy after login

In fact, the main thing to look at here is this comment. Although it is simple, this question last night It gave me a headache all the time, so I simply didn’t think about it, but I woke up with inspiration.

The bottom is to add the created CheckBoxGroup to the panel, which is different from the online method.

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(); } }] } ] }] });

Copy after login

附录：这是当时参考的网上的例子，不同点（1）ajax（2）添加到容器的方式

Copy after login

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
         
          Copy after login

The above is the detailed content of About dynamically creating an instance of CheckBoxGroup. For more information, please follow other related articles on the PHP Chinese website!