關於動態建立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: &#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) {
         
                 }
 });

 

#

以上是關於動態建立CheckBoxGroup中的一個實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！