單選多選都用一個組件ArrayCheckBox

Ext.define('tools.ArrayCheckBox', {
	extend : 'Ext.Container',
	xtype : 'arraycheckbox',
	alternateClassName : 'arraycheckbox',
	config : {
		store : null,//store的優先級比data的低，若是data沒有值才檢查store的值
		data : [],
		status : null,
		len : null,
		completeFn : null,
		isMultiple : true,//是否多選
		style : 'background-color:white;',
		fullscreen: true,
		layout : 'vbox',
		scrollable : true,
		items : [{
			xtype : 'toolbar',
			docked : 'top',
			style : 'border-radius:0;',
			items : [{
				xtype : 'button',
				iconCls : 'arrow_left',
				handler : function(button) {
					util.backView();
				}
			}, {
				xtype : 'button',
				text : '肯定',
				right : 0,
				top : 5,
				handler : function(button) {
					var me = this.getParent().getParent();
					var values = me.getValues();
					var labels = me.getLabels();
					var isMultiple = me.getIsMultiple();
					if(!isMultiple) {
						if(values.indexOf(',') != -1) {
							alert("暫不支持多選!");
							return;
						}
					}
					var completeFn = me.getCompleteFn();
					completeFn(values, labels);
					util.backView();
				}
			}]
		}, {
		    xtype : 'container',
		    itemId : 'myContainer',
		    layout : 'fit'
		}, {
			xtype : 'button',
			itemId : 'allOrNotBtn',
			hidden : true,
			text : '全選/反選',
			docked : 'bottom',
			handler : function(button) {
				var me = this.getParent();
				me.changeCheckBox();
			}
		}]
	},
	//初始化方法
	initialize : function() {
		var isMultiple = this.getIsMultiple();//設置是否都選
		if(isMultiple) {
			var allOrNotBtn = this.down("#allOrNotBtn");
			allOrNotBtn.setHidden(false);
		}
		//配置選項，有數組和store兩張形式
		var data = this.getData();
		var store = this.getStore();
		if(data.length > 0) {//數組的優先級要大於store
			var len = data.length;
			this.setLen(len);
			var myContainer = this.down("#myContainer");
			for(var i=0;i<len;i++) {
				var checkbox = {
		            xtype: 'checkboxfield',
		            label : data[i].text,
					value : data[i].value,
					itemId : 'arrayCheckBox'+i,
		            labelWidth : '50%'
		        }
				myContainer.add(checkbox);
			}
		} else if(store){
			var len = store.getCount();
			this.setLen(len);
			var myContainer = this.down("#myContainer");
			for(var i=0;i<len;i++) {
				var checkbox = {
		            xtype: 'checkboxfield',
		            label : store.getAt(i).get('text'),
					value : store.getAt(i).get('value'),
					itemId : 'arrayCheckBox'+i,
		            labelWidth : '50%'
		        }
				myContainer.add(checkbox);
			}
		}
		var status = this.getStatus();
		this.setStatusValue(status);
	},
	//得到選中的項的值數組
	getValues : function() {
		var len = this.getLen();
		var values = '';
		for(var i=0;i<len;i++) {
			var arrayCheckBox = this.down('#arrayCheckBox'+i);
			if(arrayCheckBox.getChecked()) {
				values += arrayCheckBox.getValue()+',';
			}
		}
		values = values.substring(0,values.length-1);
		return values;
	},
	//得到選中的項的標籤數組
	getLabels : function() {
		var len = this.getLen();
		var values = '';
		for(var i=0;i<len;i++) {
			var arrayCheckBox = this.down('#arrayCheckBox'+i);
			if(arrayCheckBox.getChecked()) {
				values += arrayCheckBox.getLabel( )+',';
			}
		}
		values = values.substring(0,values.length-1);
		return values;
	},
	//設置默認選中的選項
	setStatusValue : function(status) {
		if(!status) {
			return;
		}
		var len = this.getLen();
		var cmps = status.split(',');
		var cmpslen = cmps.length;
		for(var i=0;i<cmpslen;i++) {
			for(var j=0;j<len;j++) {
				var arrayCheckBox = this.down('#arrayCheckBox'+j);
				if(cmps[i] == arrayCheckBox.getValue()) {
					arrayCheckBox.setChecked(true);
				}
			}
		}
	},
	//全選反選
	changeCheckBox : function() {
		var len = this.getLen();
		var checkedNum = 0;
		for(var j=0;j<len;j++) {
			var arrayCheckBox = this.down('#arrayCheckBox'+j);
			if(arrayCheckBox.getChecked()) {
				checkedNum ++;
			} else {
				break;
			}
		}
		if(checkedNum == len) {
			for(var j=0;j<len;j++) {
				var arrayCheckBox = this.down('#arrayCheckBox'+j);
				arrayCheckBox.setChecked(false);
			}
		} else {
			for(var j=0;j<len;j++) {
				var arrayCheckBox = this.down('#arrayCheckBox'+j);
				arrayCheckBox.setChecked(true);
			}
		}
	}
});

使用方法：

{
				xtype : 'textfield',
				margin : '0 10 0 10',
				itemId : 'searchviewAlarmLevel',
				clearIcon : false,
				placeHolder : '請選擇級別',
				readOnly : true,
				listeners : {
					focus : function(textfield) {
						var me = this.getParent().getParent();
						util.param = {//自定義框架跳轉前頁面參數傳遞
							data : me.getLevelDataOptions(),//配置選項
							status : me.getAlarmLevelStatus(),//配置默認選中項
							completeFn : function(values, labels) {//選擇完成點擊確認按鈕式調用的回調方法，values：選中的值的數組，labels:選中的標籤的數組
							}
						};
						system.pushView('arraycheckbox');//自定義框架跳轉頁面的方法
					}
				}
			}

代碼狠簡單，效果以下：