Extjs 2.0 如何动态的添加checkBox

发布网友 发布时间：2022-04-28 15:23

我来回答

共2个回答

懂视网 时间：2022-04-24 01:29

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:'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: 'checkboxgroup', 
  fieldLabel: '申请清算险种', 
  id:'insTypeCb',
  name :'insTypeCb', 
  columns: resLen,
  anchor:"95%",
  msgTarget:"side",
  width:400
  });
  CheckBoxGroupTypes.items = items;
   var cbp = Ext.getCmp('checkBoxPanel');
   cbp.add(CheckBoxGroupTypes);
   cbp.doLayout();
   },
   failure: function(response, opts) {
  
   }
 });

热心网友 时间：2022-04-23 22:37