自已要用到这个控件,找了半天没有5.10现成的,网上只有以前版本的代码,所以参考他们的自已弄了一个。
写的不是很好,请多包含,但还可以使用,目前还没有出现BUG,如果出现了,请留言或自已修改一下。
/** * extjs form combogrid. * * * @author <a href='mailto:xiaomingyang@aksl.com.cn'>xiaomingyang</a> 2016-01-22,11:27 * @version v0.1 * @since 5.0 */ Ext.define('Ext.form.field.ComboGrid', { xtype : 'combogrid', requires: [ ], alias : 'widget.combogrid', extend : 'Ext.form.field.ComboBox', alternateClassName: 'Ext.form.field.ComboGrid', /** * editable false */ editable : false, /** * min chars */ minChars : Infinity, /** * grid selection items */ _selections : [], /** * 设置为false */ matchFieldWidth : false, /** * display value */ displayValue : '', /** * grid配置 */ gridCfg : { store : this.store }, initComponent: function() { var _this = this; this.on('expand', function() { _this._syncSelection(); }); this.callParent(arguments); }, /** * 创建grid * * @returns {Ext.grid.Panel} */ createPicker : function() { var _this = this; if (this.store) { Ext.apply(this.gridCfg, { store : _this.store }); } _this.store.on('load', function() { _this._syncSelection(); }); var picker = Ext.create('Ext.grid.Panel', this.gridCfg); picker.on('select', this._onGridItemSelect, this); picker.on('deselect', this._onGridItemDeselect, this); var pageToolBar = picker.getDockedItems('toolbar[dock="bottom"]'); if (pageToolBar.length != 0 && pageToolBar.length == 1) { pageToolBar[0].setStore(this.store); } else if (pageToolBar.length > 1) { Ext.Error.raise('TOO MANY PAGING GOT!'); } this.picker = picker; return picker; }, /** * grid选择响应 * * @param _this * @param record * @param index * @param eOpts * @private */ _onGridItemSelect : function(_this, record, index, eOpts) { var _this_ = this, dv = [], vv = []; if (_this_.picker.getSelectionModel().getSelectionMode() == 'SINGLE') { _this_._selections = []; } _this_._selections.push(record); _this_._selections = _this_._uniqueArr(_this_._selections); Ext.each(_this_._selections, function(item, index) { if (item != null) { var val = item.get(_this_.valueField); if (val) { vv.push(val); } var display = item.get(_this_.displayField); if (display) { dv.push(display); } } }); _this_.value = vv.join(',') || ''; _this_.displayValue = dv.join(',') || ''; _this_.setRawValue(_this_.getDisplayValue()); }, /** * grid反选响应 * * @param _this * @param record * @param index * @param eOpts * @private */ _onGridItemDeselect : function(_this, record, index, eOpts) { var _this_ = this; Ext.each(_this_._selections, function(item, index, allItems) { if (item != null) { if (item.get(_this_.valueField) == record.get(_this_.valueField)) { _this_._selections[index] = null; } } }); _this_._selections = _this_._clearNullArr(_this_._selections); var dv = [], vv = []; Ext.each(_this_._selections, function(item, index) { if (item != null) { var val = item.get(_this_.valueField); if (val) { vv.push(val); } var display = item.get(_this_.displayField); if (display) { dv.push(display); } } }); _this_.value = vv.join(',') || ''; _this_.displayValue = dv.join(',') || ''; _this_.setRawValue(_this_.getDisplayValue()); }, /** * set value * * @param val value to be set, array */ setValue : function(val) { var valType = this._getParamType(val); this._selections = this._selections.concat([]); var _this_ = this, dv = [], vv = [], displayField = _this_.displayField, valueField =_this_.valueField ; if (valType == 'array') { this._selections = []; Ext.define('rightsGridModel', { extend: 'Ext.data.Model', fields: [_this_.valueField, _this_.displayField] }); Ext.each(val, function(item, index) { if (item != null) { var gridStoreModel = Ext.create('rightsGridModel'); gridStoreModel.set(_this_.valueField, item[_this_.valueField]); gridStoreModel.set(_this_.displayField, item[_this_.displayField]); _this_._selections.push(gridStoreModel); var val = item[_this_.valueField]; if (val) { vv.push(val); } var display = item[_this_.displayField]; if (display) { dv.push(display); } } }); _this_.value = vv.join(',') || ''; _this_.displayValue = dv.join(',') || ''; _this_.setRawValue(_this_.getDisplayValue()); _this_._syncSelection(); } }, /** * get value */ getValue : function() { return this.value || ''; }, /** * get display value * * @returns {string} */ getDisplayValue : function() { return this.displayValue || ''; }, /** * clear all null or undefined elements in array * @param arr * @returns {*} * @constructor */ _clearNullArr : function(arr) { for (var i = 0; i < arr.length; i++) { if (!arr[i] || arr[i] == '' || arr[i] == undefined) { arr.splice(i, 1); } } return arr; }, /** * 使数组元素单一 * * @param arr 数组 * @returns {Array} 只含有单一元素的数组 * @private */ _uniqueArr : function(arr) { var hashMap = {}, tmp = [], _this = this; if (arr) { Ext.each(arr, function(item, index) { if (!hashMap[item.get(_this.valueField)]) { hashMap[item.get(_this.valueField)] = true; tmp.push(item); } }); } return tmp; }, /** * 选择同步 * * @private */ _syncSelection : function() { var me = this, pk = me.picker; if (pk) { var EA = Ext.Array, gd = pk, st = gd.store; var cs = []; var sv = me.getValue() || ''; EA.each(st.data.items, function(r) { if (EA.contains(sv.split(','), r.data[me.valueField].toString())) { cs.push(r); } }); if (cs.length == 0) { gd.getSelectionModel().deselectAll(); } else { gd.getSelectionModel().select(cs, false, true); } } }, /** * 取数据类型(在setvalue的时候,传入的[]数组在 instanceof Array时为false) * * @param param * @returns {string} * @private */ _getParamType : function(param) { return ((_t = typeof (param)) == "object" ? Object.prototype.toString.call(param).slice(8, -1) : _t).toLowerCase(); } });
用例代码:
{ xtype: 'combogrid', name :'rightsId', allowBlank : true, fieldLabel: '角色权限', displayField : 'name', valueField : 'id', anchor: '99%', gridCfg : { frame : false, resizable : true, forceFit : true, columnLines : false, selModel: { selType: 'checkboxmodel', mode : 'SIMPLE' }, columns: [{ xtype: 'rownumberer' }, { text : '权限名称', dataIndex : 'name', sortable : true, flex : 2 }, { text : '权限描述', dataIndex : 'description', sortable : true, flex : 6 }], dockedItems: [{ xtype: 'pagingtoolbar', dock: 'bottom', displayInfo: true }], floating: true, hidden: true, width : 540, height : 270, focusOnToFront: true }, store : { proxy: { type: 'ajax', url: $GLOBAL.CONTEXT_PATH + "/security/authority/getAllRightsListByPage", reader: { type: 'json', rootProperty: 'list', totalProperty: 'totalRow' } }, autoLoad: true, pageSize : $GLOBAL.PAGE_LIMIT, fields : [{ name : 'id', type : 'number', mapping : 'ID' }, { name : 'name', type : 'string', mapping : 'NAME' }, { name : 'description', type : 'string', mapping : 'DESCRIPTION' }] } }