关于动态创建CheckBoxGroup中的一个实例-js教程-PHP中文网

关于动态创建CheckBoxGroup中的一个实例

零下一度

发布： 2017-07-18 15:55:47

原创

3011 人浏览过

关于动态创建CheckBoxGroup 网上资料其实也不少，为什么要写此篇呢，是因为ext3里面还有一个坑，希望还能给看到这里的亲们提供一点力所能及的帮助吧。

Extjs3.0 中的CheckboxGroup默认不能动态添加item。虽然它继承了Ext.form.Field，但是却类似于容器。
CheckboxGroup配置中的items处理生成一个对应的panel，该处理过程只有一次，所以很难对CheckboxGroup进行动态添加。

	var checkBoxGroupTypes = new Ext.form.CheckboxGroup({
		xtype:&#39;checkboxgroup&#39;,
 		fieldLabel:&#39;请选择对应电厂&#39;,
 		columns:9,
 		width: 600, 
 		name:&#39;plantGroup&#39;
	});
	
	/*这里采用jquery的ajax请求，为解决同步异步问题
	 * 这里async 必须设置成false
	 * 否则页面加载时，无法将动态创建的checkBoxGroup添加到容器中*/
	$.ajax({
		url : plantGroupUrl,
		method : &#39;POST&#39;,
		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:&#39;north&#39;,
		frame:true,
		title:&#39;查询条件&#39;,
		height:100,
		bodyStyle:&#39;border:0px&#39;,
		collapsiple : true,
		animCollapse : false,
		layout : &#39;fit&#39;,
		items: [{
			bodyStyle:&#39;border:0px&#39;,
			layout:&#39;column&#39;,
			height:30,
			border:false,
			items:[
			{
				bodyStyle:&#39;border:1px&#39;,
				layout:&#39;form&#39;,
				labelWidth:80,     
				width:&#39;220&#39;,
				border:false,
				allowBlank:false,
				items:[endMonth]
			},
			checkBoxGroupTypes,
			{ 
            		width:60,
           			bodyStyle:&#39;border:0px&#39;,
           			layout: &#39;form&#39;,
            		border:false,
            		defaultType: &#39;textfield&#39;,
            		items: [{
    					xtype: &#39;button&#39;,
    					text: &#39;查询&#39;,
        			    handler:function(){
        			    	if(checkSelectCondition()){
        			    		//在点击查询后过段时间再让其再点击查询
              			    	 this.disable();
              			    	 var thisObject = this;
              			    	 setTimeout(function(){thisObject.enable();}, 5000);
              			    	 search();
        			    	}
        			    }
            		}]
        			},{ 
            		width:70,
           			bodyStyle:&#39;border:0px&#39;,
           			layout: &#39;form&#39;,
            		border:false,
            		defaultType: &#39;textfield&#39;,
            		items: [{
    					xtype: &#39;button&#39;,
    					text: &#39;重置&#39;,
        			    handler:function(){
         					searchForm.getForm().reset();
        				}
            		}]
        		}
			]
		}]
	
	
	});

登录后复制

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

登录后复制

Ext.Ajax.request({
                 url: &#39;jsp/insurance/ins_liquidation/data/getPersonInsType.jsp&#39;,
                 params : {&#39;employeeId&#39;: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中文网其他相关文章！