Ext 带复选框的多选下拉框 MultiSelectComboBox

由于环境问题，以上代码为手敲，未经测试如果笔误请谅解

转载请注明出处：http://blog.csdn.net/zidasine/article/details/7007407

Ext.namespace("Ext.ux");
Ext.ux.CheckBoxDataView = Ext.extend(Ext.DataView, {

	// 是否点击行 选中 默认点击check'框 选中
	rowSelect : false,
	checkedCls : "x-form-check-checked",
	initComponet : function() {
		Ext.ux.CheckBoxDataView.superclass.initComponet.call(this);
	},
	check : function(e) {
		var item = e.getTarget(this.itemSelector, this.el);
		if (item) {
			var index = this.indexOf(item);
			if (this.onItemClick(item, index, e, true) !== false) {
				this.fireEvent('click', this, index, item, e);
			}
		}
	},
	doSingleSelection : function(item, index, e, isClick) {
		if (this.isSelected(index)) {
			this.deselect(index);
		} else {
			this.select(index, false, false, isClick);
		}
	},
	// private
	onItemClick : function(item, index, e, isClick) {
		if (this.fireEvent("beforeclick", this, index, item, e) === false) {
			return false;
		}
		if (this.multiSelect) {
			this.doMultiSelection(item, index, e, isClick);
			e.preventDefault();
		} else if (this.singleSelect) {
			this.doSingleSelection(item, index, e, isClick);
			e.preventDefault();
		}
		return true;
	},
	doMultiSelection : function(item, index, e, isClick) {
		if (this.isSelected(index)) {
			this.deselect(index);
		} else {
			this.select(index, true, false, isClick);
		}
	},
	select : function(nodeInfo, keepExisting, suppressEvent, isClick) {
		// 如果不是通过视图点击事件 返回 去掉打开下拉列表默认选中第一项
		if (!isClick) {
			return;
		}
		if (Ext.isArray(nodeInfo)) {
			if (!keepExisting) {
				this.clearSelections(true);
			}
			for (var i = 0, len = nodeInfo.length; i < len; i++) {
				this.select(nodeInfo[i], true, true);
			}
			if (!suppressEvent) {
				this.fireEvent("selectionchange", this, this.selected.elements);
			}
		} else {
			var node = this.getNode(nodeInfo);
			if (!keepExisting) {
				this.clearSelections(true);
			}
			if (node && !this.isSelected(node)) {
				if (this.fireEvent("beforeselect", this, node,
						this.selected.elements) !== false) {
					// 添加选中样式
					Ext.fly(node)
							.addClass([this.selectedClass, this.checkedCls]);
					this.selected.add(node);
					this.last = node.viewIndex;
					if (!suppressEvent) {
						this.fireEvent("selectionchange", this,
								this.selected.elements);
					}
				}
			}
		}
	},
	deselect : function(node) {
		if (this.isSelected(node)) {
			node = this.getNode(node);
			this.selected.removeElement(node);
			if (this.last == node.viewIndex) {
				this.last = false;
			}
			// 却掉选中样式
			Ext.fly(node).removeClass([this.selectedClass, this.checkedCls]);
			this.fireEvent("selectionchange", this, this.selected.elements);
		}
	},
	clearSelections : function(suppressEvent, skipUpdate) {
		if ((this.multiSelect || this.singleSelect)
				&& this.selected.getCount() > 0) {
			if (!skipUpdate) {
				// 去掉样式
				this.selected
						.removeClass([this.selectedClass, this.checkedCls]);
			}
			this.selected.clear();
			this.last = false;
			if (!suppressEvent) {
				this.fireEvent("selectionchange", this, this.selected.elements);
			}
		}
	},
	addSelectedClass : function(records) {
		this.clearSelections(false, false);
		for (var i = 0; i < records.length; i++) {
			var index = this.store.indexOf(records[i]);
			var node = this.getNode(index);
			this.selected.add(node);
		}
		this.selected.addClass([this.selectedClass, this.checkedCls]);
	}
});
Ext.ux.MultiSelectComboBox = Ext.extend(Ext.form.ComboBox, {
	initComponet : function() {
		Ext.ux.MultiSelectComboBox.superclass.initComponet.call(this);
	},
	// private
	initList : function() {
		if (!this.list) {
			var cls = 'x-combo-list';
			var chekcedCls = '';
			var uncheckedCls = '';
			this.list = new Ext.Layer({
						shadow : this.shadow,
						cls : [cls, this.listClass].join(' '),
						constrain : false
					});

			var lw = this.listWidth
					|| Math.max(this.wrap.getWidth(), this.minListWidth);
			this.list.setWidth(lw);
			this.list.swallowEvent('mousewheel');
			this.assetHeight = 0;

			if (this.title) {
				this.header = this.list.createChild({
							cls : cls + '-hd',
							html : this.title
						});
				this.assetHeight += this.header.getHeight();
			}

			this.innerList = this.list.createChild({
						cls : cls + '-inner'
					});
			// this.innerList.on('mouseover', this.onViewOver, this);
			// this.innerList.on('mousemove', this.onViewMove, this);
			this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));

			if (this.pageSize) {
				this.footer = this.list.createChild({
							cls : cls + '-ft'
						});
				this.pageTb = new Ext.PagingToolbar({
							store : this.store,
							pageSize : this.pageSize,
							renderTo : this.footer
						});
				this.assetHeight += this.footer.getHeight();
			}

			this.tpl = '
  {'
					+ this.displayField + '}';

			this.view = new Ext.ux.CheckBoxDataView({
						applyTo : this.innerList,
						tpl : this.tpl,
						multiSelect : true,
						rowSelect : this.rowSelect,
						selectedClass : this.selectedClass,
						itemSelector : this.itemSelector || '.' + cls + '-item',
						itemCheckor : '.x-form-check'
					});
                      this.view.on('click',this.onViewClick,this);
                       if (this.store) {
				this.view.setStore(this.store);
			}

			if (this.resizable) {
				this.resizer = new Ext.Resizable(this.list, {
							pinned : true,
							handles : 'se'
						});
				this.resizer.on('resize', function(r, w, h) {
							this.maxHeight = h - this.handleHeight
									- this.list.getFrameWidth('tb')
									- this.assetHeight;
							this.listWidth = w;
							this.innerList.setWidth(w
									- this.list.getFrameWidth('lr'));
							this.restrictHeight();
						}, this);
				this[this.pageSize ? 'footer' : 'innerList'].setStyle(
						'margin-bottom', this.handleHeight + 'px');
			}
			//this.on('collapse', this.onCollapse, this)
			this.on('expand', this.onExpand, this);
		}
	},
	onExpand : function() {
		var rs = this.getSelectRecords();
		this.view.addSelectedClass(rs);
	},
	doSelectRecords : function(rs){
                 this.view.addSelectedClass(rs);
                this.setValues(rs);
        },
       setValues : function(records){
              if(!records){
                  records = this.view.getSelectedRecords();
                }
              var value =[];
              var text = [];
             for(var i=0;i 0 ? t : v;
	}
});

Ext.reg('multiselect', Ext.ux.MultiSelectComboBox);

代码示例

var mscombobox = new Ext.ux.MultiSelectComboBox({
       id:'xxx',
      displayField:'name',
      valueField:'id',
     ... 与comboBox一直
    //特殊  可设可不设 默认 false
     rowSelect : false

});