ExtJS 分页扩展

javaOpen

浏览: 118347 次
性别:
来自: 北京

最近访客更多访客>>

ps122

7522453

zhaohaifan

jimly8828

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ExtJS

EXT JavaScript

最近工作项目需要，我也来扩展一下 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()

})];

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);