当前位置: 代码迷 >> JavaScript >> ExtJS 分页扩充
  详细解决方案

ExtJS 分页扩充

热度:71   发布时间:2012-11-22 00:16:41.0
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);

1 楼 taoge2121 2011-07-18  
怎么使用啊?
2 楼 javaOpen 2011-07-18  

taoge2121 写道
怎么使用啊?

跟使用 ExtJS 分页组件 PagingToolbar 一样
new PagingToolbarExp ({
everyPageCount : 5
})
  相关解决方案