À propos de la création dynamique d'une instance de CheckBoxGroup

Il y a en fait beaucoup d'informations en ligne sur la création dynamique d'un CheckBoxGroup. La raison pour laquelle j'écris cet article est qu'il y a encore un piège dans ext3. J'espère pouvoir apporter de l'aide à ceux qui voient cela.

CheckboxGroup dans Extjs3.0 ne peut pas ajouter d'éléments dynamiquement par défaut. Bien qu'il hérite de Ext.form.Field, il est similaire à un conteneur.
Le traitement des éléments dans la configuration CheckboxGroup génère un panneau correspondant. Ce processus de traitement n'est effectué qu'une seule fois, il est donc difficile d'ajouter dynamiquement un 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添加到容器中*/

En fait, la principale chose à regarder ici est ce commentaire. Bien que ce soit simple, ce problème m'a donné mal à la tête la nuit dernière, alors je n'y ai tout simplement pas pensé, je me suis réveillé avec l'inspiration.

Ce qui suit ajoute le CheckBoxGroup créé au panneau, ce qui est différent de la méthode en ligne.

　

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!