comboBox动态加载数据并支持多选（checkbox）

最新推荐文章于 2022-07-01 22:14:30 发布

李四爷

最新推荐文章于 2022-07-01 22:14:30 发布

阅读量2.3k

点赞数 1

分类专栏： EXTJS 文章标签： combobox checkbox 动态加载多选

本文链接：https://blog.csdn.net/siyemuzi/article/details/22678519

版权

EXTJS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

function getTableName(){//获取后台数据，即要动态加载的数据
	tableExportAction.getTableName(function(data){
		   tableStore=data;  
//		   allcomb = [['全部','全部']];
//	       tableStore.unshift(allcomb[0]);
		   tstore= new Ext.data.SimpleStore({fields :['value','name'], data :tableStore });
	})
}

var CheckBoxGroupTypes;
function getColName(pid,name){//这个方法是在选择checkbox的时候要在panel2中显示的数据
	tableExportAction.getColName(pid,function(data){  
		
		var items=[];
		var chk;
		for(var i=0;i<data.length;i++){
			chk = {boxLabel: data[i][1], name: data[i][0]+ '#' + data[i][1]};
  			items.push(chk);
		}
		
		  var FieldSetTypes = new Ext.form.FieldSet(
			  {   
				  id:'fieldSet'+pid,
				  name:'fieldSet'+pid,
				  items:[
					 CheckBoxGroupTypes = new Ext.form.CheckboxGroup({ 
					   		fieldLabel: name, 
							id:'columnName'+pid, 
							name:'columnName'+pid,
					        columns: 5, 
					        anchor:"95%",
					        items: items
					})
				  ]
			  });
			  panel2.items.add(FieldSetTypes);
			  panel2.doLayout();  
					
    });
}

var indexValue;
var index;
var flag=1;
function getForm(){
	
	var tableComBo = getComBox('tableName','表名称',tstore,50,false,3)
//  tableComBo.on('select', selectAll, this);
    tableComBo.on('select',function(combo, record, idx){
    	var tmp = Ext.get('fieldSet'+record.data.value);
    	if(tmp!=null) {//判断此对象是否存在，为了保证只加载一次并且在去掉选择的时候移除之前的显示值
    		panel2.remove('fieldSet'+record.data.value);
    	} else {
    		getColName(record.data.value,record.data.name);
    	}
    });
    
    panel1 = new Ext.Panel({
		labelWidth :120,
		frame : true,
		id:'panel1',
		autoHeight : true,
		bodyStyle : 'padding:5px 5px 0',
		layout : 'column',
		defaults : {
			labelAlign : 'right'
		},
		items: [	       
		    	{
					columnWidth : .5,
					layout : 'form',
					border : false,
					items : [{
						fieldLabel : 'Excel名称',
						xtype:'textfield',
						name : 'excelName',
						id : 'excelName',
						allowBlank : false,
						maxLength : 15,
						style : "margin-top:1px"
					}]
				},
				{
		        columnWidth: .4,
		        layout: 'form',
		        border: false,
		        items: [
		     	  		tableComBo
			        ]
		    	}]
	});
   
	panel2 = new Ext.Panel({
		labelWidth :80,
		frame : true,
		id:'panel2',
		autoHeight : true,
		bodyStyle : 'padding:5px 5px 0',
		items: []
	});
	
	return new Ext.FormPanel({
		labelWidth :120,
		frame : true,
		id:'myForm',
		autoHeight : true,
		bodyStyle : 'padding:5px 5px 0',
		defaults : {
			labelAlign : 'right'
		},
		items: [ panel1,panel2 ]
	});
}