Rumah >hujung hadapan web >tutorial js >关于动态创建CheckBoxGroup中的一个实例

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

零下一度
零下一度asal
2017-07-18 15:55:472987semak imbas

关于动态创建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:&#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) {
         
                 }
 });

 

Atas ialah kandungan terperinci 关于动态创建CheckBoxGroup中的一个实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn