Informationen zum dynamischen Erstellen einer Instanz von CheckBoxGroup

Es gibt tatsächlich viele Informationen zum dynamischen Erstellen einer CheckBoxGroup. Der Grund, warum ich diesen Artikel schreibe, ist, dass es in ext3 immer noch eine Falle gibt. Ich hoffe, ich kann denjenigen helfen, die dies sehen.

CheckboxGroup in Extjs3.0 kann standardmäßig keine Elemente dynamisch hinzufügen. Obwohl es Ext.form.Field erbt, ähnelt es einem Container.
Die Artikelverarbeitung in der CheckboxGroup-Konfiguration generiert ein entsprechendes Panel. Dieser Verarbeitungsprozess erfolgt nur einmal, daher ist es schwierig, eine CheckboxGroup dynamisch hinzuzufügen.

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

Tatsächlich ist hier vor allem dieser Kommentar zu sehen. Obwohl es einfach ist, ist es so. Dieses Problem hat mir letzte Nacht Kopfschmerzen bereitet, also habe ich einfach nicht darüber nachgedacht und bin voller Inspiration aufgewacht.

Im Folgenden wird die erstellte CheckBoxGroup zum Panel hinzugefügt, was sich von der Online-Methode unterscheidet.

　

	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) {
         
                 }
 });

Das obige ist der detaillierte Inhalt vonInformationen zum dynamischen Erstellen einer Instanz von CheckBoxGroup. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!