CheckBoxGroup의 인스턴스를 동적으로 생성하는 방법 정보

실제로 CheckBoxGroup을 동적으로 생성하는 방법에 대한 정보가 인터넷에 많이 있습니다. 제가 이 글을 쓰는 이유는 ext3에 여전히 함정이 있기 때문입니다. 이 내용을 보시는 분들께 도움이 되었으면 좋겠습니다.

Extjs3.0의 CheckboxGroup은 기본적으로 항목을 동적으로 추가할 수 없습니다. Ext.form.Field를 상속받기는 하지만 컨테이너와 유사합니다.
CheckboxGroup 구성에서 항목 처리는 해당 패널을 생성합니다. 이 처리 프로세스는 한 번만 수행되므로 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을 패널에 추가하는 방법으로 온라인 방식과 다릅니다.

　

	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 중국어 웹사이트의 기타 관련 기사를 참조하세요!