About dynamically creating an instance of CheckBoxGroup

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<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添加到容器中*/

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

　

附录：这是当时参考的网上的例子，不同点（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: &#39;checkboxgroup&#39;,  
            fieldLabel: &#39;申请清算险种&#39;,  
            id:&#39;insTypeCb&#39;,
            name :&#39;insTypeCb&#39;, 
            columns: resLen,
            anchor:"95%",
            msgTarget:"side",
            width:400
           });
         CheckBoxGroupTypes.items = items;
                  var cbp = Ext.getCmp(&#39;checkBoxPanel&#39;);
                  cbp.add(CheckBoxGroupTypes);
                  cbp.doLayout();
                 },
                 failure: function(response, opts) {
         
                 }
 });

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!