ExtJS 分页扩展

最近工作项目需要，我也来扩展一下 ExtJs 分页.网上有很多..但没有找到项目要求的.

/**
 * @author LDJ
 * @date 2010-10-14 本分页组件提供 两个用户可以配置属性
 * @config everyPageCount 显示分页连接个数 默认为 11
 * @config everyPageSizeData 每页大小设置 为一个数组. 如 : [['5', 5], ['10', 10]]
 *
 * @type
 */
Ext.namespace('Ext.ux.grid')
Ext.ux.grid.PagingToolbarExp = function(config) {
 var config = config || {};
 this.everyPageCount = config.everyPageCount || 7;
 this.everyPageSizeData = [ ['5', 5], ['10', 10], ['20', 20],
   ['50', 50], ['100', 100]];
 if (config.everyPageSizeData) {
  Ext.apply(this.everyPageSizeData, config.everyPageSizeData);
 }
 Ext.ux.grid.PagingToolbarExp.superclass.constructor.call(this, config);
 this.initAction();
}

var T = Ext.Toolbar;
Ext.extend(Ext.ux.grid.PagingToolbarExp, Ext.PagingToolbar, {
 displayMsg : "显示 第 【{0}】 条到 【{1}】 条记录，一共 【{2}】 条",
 emptyMsg : "没有记录",
 beforePageText : '页码',
 afterPageText : '总页数【{0}】',
 firstText : '首页',
 prevText : '上一页',
 nextText : '下一页',
 lastText : '末页',
 refreshText : '刷新',
 initAction : function() {

 },
 initComponent : function() {
  var pagingItems = [this.first = new T.Button({
       tooltip : this.firstText,
       overflowText : this.firstText,
       iconCls : 'x-tbar-page-first',
       disabled : true,
       handler : this.moveFirst,
       scope : this
      }), this.prev = new T.Button({
       tooltip : this.prevText,
       overflowText : this.prevText,
       iconCls : 'x-tbar-page-prev',
       disabled : true,
       handler : this.movePrevious,
       scope : this
      }), '-', this.beforePageText,
    this.inputItem = new Ext.form.NumberField({
       cls : 'x-tbar-page-number',
       allowDecimals : false,
       allowNegative : false,
       enableKeyEvents : true,
       selectOnFocus : true,
       submitValue : false,
       listeners : {
        scope : this,
        keydown : this.onPagingKeyDown,
        blur : this.onPagingBlur
       }
      }), '-',
    '每页 ', this.pageSizeCombox = new Ext.form.ComboBox({
       store : new Ext.data.SimpleStore({
          fields : ['text', 'value'],
          data : this.everyPageSizeData
         }),
       mode : 'local',
       displayField : 'text',
       valueField : 'value',
       editable : false,
       scope : this,
       allowBlank : false,
       triggerAction : 'all',
       value : this.pageSize,
       listWidth : 45,
       width : 45,
       listeners : {
        scope : this,
        select : this.gotoSelectPage

       }
      }), ' 条', this.afterTextItem = new T.TextItem({
       text : String.format(this.afterPageText, 1)
      }), '-', this.next = new T.Button({
       tooltip : this.nextText,
       overflowText : this.nextText,
       iconCls : 'x-tbar-page-next',
       disabled : true,
       handler : this.moveNext,
       scope : this
      }), this.last = new T.Button({
       tooltip : this.lastText,
       overflowText : this.lastText,
       iconCls : 'x-tbar-page-last',
       disabled : true,
       handler : this.moveLast,
       scope : this
      }), '-', this.refresh = new T.Button({
       tooltip : this.refreshText,
       overflowText : this.refreshText,
       iconCls : 'x-tbar-loading',
       handler : this.doRefresh,
       scope : this
      }), '-', this.panelMe = new Ext.Panel({
       id : 'pageBarItems',
       html : this.pageSpliter()

      })];

  var userItems = this.items || this.buttons || [];
  if (this.prependButtons) {
   this.items = userItems.concat(pagingItems);
  } else {
   this.items = pagingItems.concat(userItems);
  }
  delete this.buttons;
  if (this.displayInfo) {
   this.items.push('->');
   this.items.push(this.displayItem = new T.TextItem({}));
  }
  Ext.PagingToolbar.superclass.initComponent.call(this);
  this.addEvents('change', 'beforechange');
  this.on('afterlayout', this.onFirstLayout, this, {
     single : true
    });
  this.cursor = 0;
  this.bindStore(this.store, true);
 },
 onLoad : function(store, r, o) {
  if (!this.rendered) {
   this.dsLoaded = [store, r, o];
   return;
  }
  var p = this.getParams();
  this.cursor = (o.params && o.params[p.start]) ? o.params[p.start] : 0;
  var d = this.getPageData(), ap = d.activePage, ps = d.pages;
  this.afterTextItem.setText(String.format(this.afterPageText, d.pages));

  Ext.getCmp('pageBarItems').getEl().dom.innerHTML = this.pageSpliter(
    d.activePage, d.pages);

  this.inputItem.setValue(ap);
  this.first.setDisabled(ap == 1);
  this.prev.setDisabled(ap == 1);
  this.next.setDisabled(ap == ps);
  this.last.setDisabled(ap == ps);
  this.refresh.enable();

  this.updateInfo();
  this.fireEvent('change', this, d);
 },
 /**
  *
  * @param {}
  *            activePage 当前去向多少页
  * @param {}
  *            totalPage 总页数
  * @return {}
  */
 pageSpliter : function(activePage, totalPage) {
  var p = [];
  var flag = false;
  var halfFlag = false;
  var mybarId = this.getId();
  var firstStart = 1;
  var lastEnd = this.everyPageCount;

  p.push('       第: 【');
  var start;
  var limit;

  if (this.everyPageCount % 2 == 0) {

   this.halfMidile = parseInt((this.everyPageCount) / 2); // 中间数的一半
   start = activePage - this.halfMidile;
   if (start <= 0) {
    start = 1;
   }
   limit = activePage + this.halfMidile;
   if (limit <= this.everyPageCount) {
    limit = this.everyPageCount + 1;
   }
   if (limit > totalPage) {
    limit = totalPage + 1;
   }

  } else {

   this.halfMidile = parseInt((this.everyPageCount + 1) / 2); // 中间数的一半
   // 3
   start = activePage - this.halfMidile + 1;
   if (start <= 0) {
    start = 1;
   }

   limit = activePage + this.halfMidile;
   if (limit <= this.everyPageCount) {
    limit = this.everyPageCount + 1;
   }

   if (limit > totalPage) {
    limit = totalPage + 1;
   }

  }
  for (var i = start; i < limit; i++) {
   flag = true;
   p.push("<a href='javascript:void(0)' class='x-btn-over' style='padding-top:1px;padding-left:2px;padding-bottom:10px;font-weight: bold;font-size : 12px;'  onclick=Ext.getCmp('"
       + mybarId
       + "').gotoPage(this.innerHTML) >  "
       + i
       + "  </a>");
  }

  p.push(' 】页');

  if (flag) {
   return p.join('');
  } else {
   return '';
  }

 },
 gotoSelectPage : function() {

  this.pageSize = this.pageSizeCombox.getValue();
  this.inputItem.setValue(1);// 重新设置页码
  var pageToNum = this.inputItem.getValue();
  this.doLoad((Ext.util.Format.trim(pageToNum) - 1) * this.pageSize);
  this.inputItem.setValue(Ext.util.Format.trim(pageToNum));
 },
 gotoPage : function(pageToNum) {
  this.doLoad((Ext.util.Format.trim(pageToNum) - 1) * this.pageSize);

  this.inputItem.setValue(Ext.util.Format.trim(pageToNum));
 }

});
Ext.reg('pagingtoolbarexp',Ext.ux.grid.PagingToolbarExp);

评论

2 楼 javaOpen 2011-07-18  

taoge2121 写道

怎么使用啊？

跟使用 ExtJS 分页组件 PagingToolbar 一样
new PagingToolbarExp ({
everyPageCount : 5
})

1 楼 taoge2121 2011-07-18  

怎么使用啊？