extjs 5 combogrid控件

自已要用到这个控件，找了半天没有5.10现成的，网上只有以前版本的代码，所以参考他们的自已弄了一个。

写的不是很好，请多包含，但还可以使用，目前还没有出现BUG，如果出现了，请留言或自已修改一下。

/**
 * extjs form combogrid.
 *
 *
 * @author <a href='mailto:[email protected]'>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'
                            }]
                        }
                    }