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;    

    }

    

});