ExtJs 扩展分页栏 和 基础表格grid组件扩展

自定义分页栏

Ext.define("tp.base.PagingToolbar", {
    extend: 'Ext.toolbar.Paging',
    xtype: 'ex-pagingtoolbar',
    beforePageText: '第',
    afterPageText: '页, 共{0}页',
    displayMsg: '显示{0} - {1}条, 共{2}条',
    emptyMsg: '没有可显示的数据',
    defaultPageSize: 100,

    /**
     * 扩展父控件 增加设置每页显示多少行的功能
     * @Overrides {Ext.toolbar.Paging.getPagingItems}
     */
    getPagingItems: function () {
        var me = this;

        return [{
            itemId: 'first',
            tooltip: me.firstText,
            overflowText: me.firstText,
            iconCls: Ext.baseCSSPrefix + 'tbar-page-first',
            disabled: true,
            handler: me.moveFirst,
            scope: me
        }, {
            itemId: 'prev',
            tooltip: me.prevText,
            overflowText: me.prevText,
            iconCls: Ext.baseCSSPrefix + 'tbar-page-prev',
            disabled: true,
            handler: me.movePrevious,
            scope: me
        },
            '-',
            me.beforePageText,
            {
                xtype: 'numberfield',
                itemId: 'inputItem',
                name: 'inputItem',
                cls: Ext.baseCSSPrefix + 'tbar-page-number',
                allowDecimals: false,
                minValue: 1,
                hideTrigger: true,
                enableKeyEvents: true,
                keyNavEnabled: false,
                selectOnFocus: true,
                submitValue: false,
                // mark it as not a field so the form will not catch it when getting fields
                isFormField: false,
                width: me.inputItemWidth,
                margins: '-1 2 3 2',
                listeners: {
                    scope: me,
                    keydown: me.onPagingKeyDown,
                    blur: me.onPagingBlur
                }
            }, {
                xtype: 'tbtext',
                itemId: 'afterTextItem',
                text: Ext.String.format(me.afterPageText, 1)
            },
            '-',
            {
                itemId: 'next',
                tooltip: me.nextText,
                overflowText: me.nextText,
                iconCls: Ext.baseCSSPrefix + 'tbar-page-next',
                disabled: true,
                handler: me.moveNext,
                scope: me
            }, {
                itemId: 'last',
                tooltip: me.lastText,
                overflowText: me.lastText,
                iconCls: Ext.baseCSSPrefix + 'tbar-page-last',
                disabled: true,
                handler: me.moveLast,
                scope: me
            },
            '-',
            '每页显示',
            {
                xtype: 'numberfield',
                itemId: 'pageSize',
                name: 'pageSize',
                cls: Ext.baseCSSPrefix + 'tbar-page-number',
                allowDecimals: false,
                value: me.store.pageSize || me.defaultPageSize,
                minValue: 1,
                hideTrigger: true,
                enableKeyEvents: true,
                keyNavEnabled: false,
                selectOnFocus: true,
                submitValue: false,
                // mark it as not a field so the form will not catch it when getting fields
                isFormField: false,
                width: 80,
                margins: '-1 2 3 2',
                listeners: {
                    scope: me,
                    // keydown: me.onPagingKeyDown,
                    blur: me.doPageSizeChange
                }
            },
            '行',
            '-',
            {
                itemId: 'refresh',
                tooltip: me.refreshText,
                overflowText: me.refreshText,
                iconCls: Ext.baseCSSPrefix + 'tbar-loading',
                handler: me.doRefresh,
                scope: me
            }];
    },

    onLoad: function () {
        this.callParent(arguments);
        this.oldPageSize = this.store.pageSize;
    },

    /**
     * 设置表格显示的行数,并刷新
     */
    doPageSizeChange: function () {
        var me = this;
        var newValue = me.down('#pageSize').getValue() || me.defaultPageSize;
        if (newValue !== me.oldPageSize){
            me.store.pageSize = newValue;
            me.store.currentPage = 1;
            me.doRefresh();
        }
        me.down('#pageSize').setValue(me.store.pageSize);
    }
});

自定义基础GridPanel

Ext.define("tp.base.BaseGridPanel", {
  extend: 'Ext.grid.Panel',
  xtype: 'basegridpanel',

  /*是否显示底部分页工具条*/
  pagination: true,

  /*多选*/
  multiSelect: true,

  /*表头居中*/
  titleAlign: 'center',

  /*单选*/
  // singleSelect: false,

  /*表头边框*/
  headerBorders: true,

  /*表格设置*/
  viewConfig: {
    //表格行 是否隔行变色
    stripeRows: false,
    //表格单元格是否可以选中
    enableTextSelection: true,
    //表格加载时显示文字
    loadingText: "数据读取中...",
    //是否显示表格分割行
    columnLines: false
  },

  /*记住表格状态*/
  stateful: false,

  initComponent: function () {
    var me = this;

    Ext.apply(me, {
      stateId: me.$className,
      sortableColumns: true
    });

    if (me.multiSelect) {
      Ext.apply(me, {
        selModel: {
          selType: 'checkboxmodel',
          mode: "MULTI"
        }
      });
    }

    if (!me.multiSelect) {
      Ext.apply(me, {
        selModel: {
          selType: 'checkboxmodel',
          //multi,simple,single；默认为多选multi
          mode: "single",
          //如果值为true，则只用点击checkbox列才能选中此条记录
          //checkOnly: true,
          //如果值true，并且mode值为单选（single）时，可以通过点击checkbox取消对其的选择
          allowDeselect: true
        }
      });
    }

    // finally call the superclasses implementation
    me.callParent(arguments);

    if (me.pagination) {
      me.addDocked(
        Ext.create("tp.base.PagingToolbar", {
          store: me.store,
          dock: 'bottom',
          displayInfo: true
        })
      );
    }
  },

  /**
     * 条件查询
     */
  search: function (params) {
    //this.getStore().proxy.extraParams = {params: Ext.JSON.encode(params)};
    this.getStore().proxy.extraParams = params;
    this.loadPage(1);
    this.getSelectionModel().deselectAll();
  },

  /**
     * 刷新当前页
     */
  refresh: function () {
    this.getStore().reload();
    this.getSelectionModel().deselectAll();
  },

  /**
     * 加载指定页
     * @param {int} pageNo
     */
  loadPage: function (pageNo) {
    this.getStore().loadPage(pageNo);
  },

  /**
     * 获得选中行的Records(多选)
     * @Return{Ext.data.Model[]}
     */
  getSelectedRecords: function () {
    return this.getSelectionModel().getSelection();
  },

  /**
     * 获得选中行的Record(单选)
     * 注意:如果多选则返回选中第一行
     * @Return{Ext.data.Model}
     */
  getSelectedRecord: function () {
    return this.getSelectionModel().getSelection()[0];
  },

  /**
     * 获得选中行Record(单选)的ID
     * 注意:如果多选则返回选中第一行
     * @Return{Number/String}
     */
  getSelectedRecordId: function () {
    var record = this.getSelectedRecord();
    return record ? record.getId() : "";
  },

  /**
     * 获得选中行Record(单选)单元格的值
     * 注意:如果多选则返回选中第一行
     * @param {string} dataIndex
     * @Return{Object}
     */
    getSelectedCellValue: function (dataIndex) {
        var record = this.getSelectedRecord();
        return record.get(dataIndex);
    },

    /**
     * 获得选中行Record(单选)单元格的值
     * 注意:如果多选则返回选中第一行
     * @param {string} dataIndex
     * @Return{Object}
     */
    getSelectedCellValues: function (dataIndex) {
        var records = this.getSelectedRecords(),
            values = [];
        Ext.each(records, function (item) {
            values.push(item.get(dataIndex));
        });
        return values.join(",");
    },

    /**
     * 获得选中行Record(多选)的ID集合
     * @param {Boolean} join 如果传入true 那么将返回以","(逗号)连接的字符串 例如:"1,2,3" 否则返回数组 例如:[1,2,3]
     * @Return{Array/String}
     */
    getSelectedRecordIds: function (join) {
        var records = this.getSelectedRecords(),
            ids = [];
        Ext.each(records, function (item) {
            ids.push(item.getId());
        });
        return join === true ? ids.join(",") : ids;
    },

    /**
     * 判断是否选中行
     * @Return{Boolean}
     */
    isSelected: function () {
        return this.getSelectionModel().getSelection().length !== 0;
    },

    /**
     * 判断是否选中多行
     * @Return{Boolean}
     */
    isMultiSelected: function () {
        return this.getSelectionModel().getSelection().length > 1;
    }

});