Extjs 弹出下拉Grid

/**
 * 系统通用下拉选择Gird
 */
Ext.define("Common.picker.GridPicker", {
    extend: "Ext.form.field.Picker",
    alias: 'widget.gridPicker',

    displayField: null,

    valueField: null,

    matchFieldWidth: false,

    store: null,

    columns: null,

    pickerWidth: 400,

    pickerHeight: 300,

    editable: false,

    /**
     * 创建Picker
     * @return {Ext.grid.Panel}
     */
    createPicker: function() {
        var me = this,
            picker = me.createComponent();

        picker.on("itemclick", me.onItemClick, me);

        me.on("focus", me.onFocusHandler, me);
        return picker;
    },

    /**
     * 创建gridPanel,子类可以扩展返回个性化grid(比如条件查询等)
     * @return {Ext.grid.Panel}
     */
    createComponent: function() {
        var me = this,
            picker = Ext.create("Ext.grid.Panel", {
            floating: true,
            store: me.store,
            columns: me.columns,
            width: me.pickerWidth,
            heigkt: me.pickerHeight,
            dockedItems: [{
                xtype: 'pagingtoolbar',
                store: me.store,
                dock: 'bottom',
                displayInfo: true
            }]
        });
        return picker;
    },

    /**
     * 处理grid行单击事件
     */
    onItemClick: function(view, record, item, index, e, eOpts ) {
        var me = this;
        me.setValue(record.get(me.valueField));
        me.getPicker().hide();
        me.inputEl.focus();
    },

    /**
     * 获得焦点弹出
     */
    onFocusHandler: function() {
        var me = this;
        if(!me.isExpanded) {
            this.expand();
            this.focus();
        }
    },

    /**
     * 设置值
     * @param {Mixed} value
     * @return {Common.picker.GridPicker} this
     */
    setValue: function(value) {
         var me = this,
              record;

         me.value = value;

         if (me.store.isLoading()) {
             //当store加载暂时不做处理
             return me;
         }

         if(value === undefined) {
             return me;
         } else {
             record = me.getPicker().getSelectionModel().getSelection()[0];
         }

         me.setRawValue(record ? record.get(me.displayField) : '');

         return me;
    },

    /**
     * 返回field的值
     * @return {String}
     */
    getValue: function() {
        return this.value;
    },

    /**
     * 返回提交到服务器端的值
     * @return {String}
     */
    getSubmitValue: function(){
        return this.value;
    }

});