随笔 - 17  文章 - 84  trackbacks - 0
<2009年10月>
27282930123
45678910
11121314151617
18192021222324
25262728293031
1234567

如非特别说明,所有文章均为原创。如需引用,请注明出处
Email:liangtianyu@gmail.com
MSN:terry.liangtianyu@hotmail.com

常用链接

留言簿(4)

随笔分类(12)

随笔档案(17)

最新随笔

搜索

  •  

积分与排名

  • 积分 - 51494
  • 排名 - 960

最新评论

阅读排行榜

评论排行榜

在Ext的原有分页控件中,服务器端方法是根据传入的起始数据记录号(start),和显示多少条记录(limit)来返回当前页记录的。有时候我们经常是根据当前页码(pageIndex),和每页显示记录数(pageSize)来获取当前页数据,下面就是我根据需要自己写的一个对Ext.PagingToolbar的扩展:Ext.PagingToolbarExt。

  1/**
  2 * @author Terry
  3 */

  4
  5Ext.PagingToolbarEx = Ext.extend(Ext.PagingToolbar, {
  6    afterPageText: '/ {0}',
  7    beforePageText: '页',
  8    displayInfo: true,
  9    displayMsg: '显示 {0} - {1} / {2}',
 10    emptyMsg: '没有数据',
 11    firstText: '第一页',
 12    prevText: '前一页',
 13    nextText: '后一页',
 14    lastText: '最后一页',
 15    refreshText: '刷新',
 16    
 17    updateInfo: function(){
 18        if(this.displayEl){
 19            var count = this.store.getCount();
 20            
 21            var msg = count == 0 ? this.emptyMsg : String.format(this.displayMsg, this.cursor, this.cursor + count - 1this.store.getTotalCount());
 22            
 23            this.displayEl.update(msg);
 24        }

 25    }
,
 26    
 27    onLoad: function(store, r, o){
 28        if(!this.rendered){
 29            this.dsLoaded = [store, r, o];
 30            
 31            return;
 32        }

 33        
 34        if(!o.params || this.store.getTotalCount() == 0){
 35            this.cursor = 0;
 36        }

 37        else{
 38            this.cursor = (o.params[this.paramNames.start] - 1* this.pageSize + 1;
 39        }

 40        
 41        var d =this.getPageData(), ap = d.activePage, ps = d.pages;
 42        
 43        this.afterTextEl.el.innerHTML = String.format(this.afterPageText, d.pages);
 44        this.field.dom.value = ap;
 45        
 46        this.first.setDisabled(ap == 1 || ps == 0);
 47        this.prev.setDisabled( ap == 1 || ps == 0);
 48        this.next.setDisabled(ap == ps || ps == 0);
 49        this.last.setDisabled(ap == ps || ps == 0);
 50        this.loading.enable();
 51        this.loading.setDisabled(ps == 0);
 52        this.updateInfo();    
 53    }
,
 54    
 55    getPageData: function(){
 56        var total = this.store.getTotalCount();
 57        
 58        return {
 59            total: total,
 60            activePage: total != 0 && this.cursor == 0 ? 1 : Math.ceil(this.cursor / this.pageSize),
 61            pages: total !=0 && total < this.pageSize ? 1 : Math.ceil(total / this.pageSize)
 62        }

 63    }
,
 64    
 65    onClick: function(which){
 66        var store = this.store;
 67        var d = this.getPageData();
 68        
 69        switch(which){
 70            case 'first':
 71                this.doLoad(1);
 72                break;
 73            case 'prev':
 74                this.doLoad(Math.max(1, d.activePage - 1));
 75                break;
 76            case 'next':
 77                this.doLoad(Math.min(d.pages, d.activePage + 1));
 78                break;
 79            case 'last':
 80                this.doLoad(d.pages);
 81                break;
 82            case 'refresh':
 83                this.doLoad(d.activePage);
 84                break;
 85        }

 86    }
,
 87    
 88    onPagingKeydown: function(e){
 89        var k = e.getKey(), d = this.getPageData(), pageNum;
 90        
 91        if(k == e.RETURN){
 92            e.stopEvent();
 93            
 94            pageNum = this.readPage(d)
 95            
 96            if(pageNum >= d.pages){
 97                pageNum = d.pages;
 98            }

 99            else if(pageNum <= 1){
100                pageNum = 1;
101            }

102            
103            this.doLoad(pageNum);
104    
105        }

106        else if(k == e.HOME || k == e.END){
107            e.stopEvent();
108            pageNum = k == e.HOME ? 1 : d.pages;
109            this.field.dom.value = pageNum;
110        }

111        else if(k == e.UP || k == e.PAGEUP || k == e.DOWN || k == e.PAGEDOWN){
112            e.stopEvent();
113            
114            if(pageNum = this.readPage(d)){
115                var increment = e.shiftKey ? 10 : 1;
116                
117                if(k == e.DOWN || k == e.PAGEDOWN){
118                    increment *= -1;
119                }

120                
121                pageNum += increment;
122                
123                if(pageNum >= 1 & pageNum <= d.pages){
124                    this.field.dom.value = pageNum;
125                }

126            }

127        }

128    }

129}
);
130
131Ext.reg('pagingtoolbarex', Ext.PagingToolbarEx);
posted on 2007-11-05 08:33 Terry Liang 阅读(16693) 评论(22)  编辑  收藏 所属分类: Ext

FeedBack:
# re: Ext 2.0使用:对分页Ext.PagingToolbar的扩展[未登录] 2007-11-05 09:27 冻僵的鱼
不错哦,那么快就用上Ext2了,正为Ex2的布局头痛~~跟1.1.1的区别太大了~~  回复  更多评论
  
# re: Ext 2.0使用:对分页Ext.PagingToolbar的扩展 2007-11-05 14:27 Edward's
请教个问题,我有个TabPanel可以通过add方法来添加panel

现在要在panel中添加gird,怎么实现  回复  更多评论
  
# re: Ext 2.0使用:对分页Ext.PagingToolbar的扩展 2007-11-05 14:35 Terry Liang
@Edward's
所有继承与Ext.Container的Component都可以添加其他Componet。
Panel中添加其他Component,最简单的方法是在items中直接定义。  回复  更多评论
  
# re: Ext 2.0使用:对分页Ext.PagingToolbar的扩展 2007-11-05 17:03 Edward's
@Terry Liang
tabsouth.add({
title:"abc",
items:new SampleGrid();
}]
}).show();
其中tabsouth是一个tabpanel
SampleGrid继承Ext.grid.GridPanel
执行add方法的时候,不能直接显示gird出来,需要点击窗口最大化  回复  更多评论
  
# re: Ext 2.0使用:对分页Ext.PagingToolbar的扩展 2007-11-05 18:02 Terry Liang
@Edward's
我觉得是你的GridPanel没有设置layout的原因  回复  更多评论
  
# re: Ext 2.0使用:对分页Ext.PagingToolbar的扩展 2007-11-05 20:13 Edward's
@Terry Liang
恩,的确是layout没设置。谢谢!  回复  更多评论
  
# re: Ext 2.0使用:对分页Ext.PagingToolbar的扩展 2007-11-05 21:55 Terry Liang
@Edward's
不用客气,有问题多交流!  回复  更多评论
  
# re: Ext 2.0使用:对分页Ext.PagingToolbar的扩展 2007-11-05 22:03 Edward's
恩,又有问题了
在一个区域中加载页面,其中的脚本不会执行  回复  更多评论
  
# re: Ext 2.0使用:对分页Ext.PagingToolbar的扩展 2007-11-09 15:06 Terry Liang
@Edward's
这个问题我真没特别注意过,我觉得应该和Ext的事件模式有关系吧  回复  更多评论
  
# re: Ext 2.0使用:对分页Ext.PagingToolbar的扩展 2007-11-27 10:37 杨雪松
你好,我想问下:
如果我想在onClick中,获得start要怎么操作呢?应该有特定的函数吧!
谢谢……  回复  更多评论
  
# re: Ext 2.0使用:对分页Ext.PagingToolbar的扩展 2007-11-27 11:19 Terry Liang
@杨雪松
假如你的start指的是当前页:
var d = this.getPageData();
start = d.activePage;
指的是起始记录:
start = this.cursor;
  回复  更多评论
  
# re: Ext 2.0使用:对分页Ext.PagingToolbar的扩展 2007-12-27 22:37 EXT使用者
你好,我们公司正要使用EXT作一次开发,语言为(.net)
由于项目比较急,需要有要带头来做这个,当然,是有报酬的,东西不复杂,但是需要对EXT比较熟悉,如果有意,请跟我们联系,报酬面议
QQ:347106
  回复  更多评论
  
# re: Ext 2.0使用:对分页Ext.PagingToolbar的扩展 2008-01-04 11:17 domino初级开发者
在下刚接触ext2.0,请教一个关于分页的问题:
ext的分页起始是从0开始计算,domino服务器的起始是从1开始,服务端又不能修改,请问该怎么解决,需要修改ext的什么地方?在下初次接触ext,望不吝指教  回复  更多评论
  
# re: Ext 2.0使用:对分页Ext.PagingToolbar的扩展 2008-01-04 11:53 Terry Liang
@domino初级开发者
0页还是第0条记录?  回复  更多评论
  
# re: Ext 2.0使用:对分页Ext.PagingToolbar的扩展 2008-01-07 18:13 domino初级开发者
谢谢Terry Liang,我说详细些,domino服务器的url数据请求是从1开始,就是说参数start=1是第一条记录,start=0取不到数据,而ext分页栏的那些按钮的计算和请求是从零开始计算的
我的数据加载代码是:
var store = new Ext.data.Store({ //建立数据源
proxy: new Ext.data.HttpProxy({ //请求地址
url: viewname + '?ReadViewEntries',
method: "GET"
}),
baseParams:{ //设置初始请求参数
outputformat: 'JSON',
count: parseInt(rowsnum)
},
reader: new Ext.data.JsonReader({ //Json解析器
totalProperty: '@toplevelentries', //数据行数
root: 'viewentry' //数据行标志
}, [
{name: 't1', mapping: 'entrydata[0]["text"]["0"]'},
{name: 't2', mapping: 'entrydata[1]["text"]["0"]'}
])
});

store.load({params:{start:1 }});
结果数据就从第二页开始显示,而且取不到第一页的数据

var bbar = new Ext.PagingToolbar({ //分页工具条
pageSize: parseInt(rowsnum),
store: store,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
emptyMsg: "没有记录"
});

因为store.load({params:{start:0}}); 得不到数据,服务端也不能修改,我想修改ext关于分页请求的代码,把从0开始计数修改成从1开始计数,但不知该怎么样改,不知我说明白没有~~请不吝赐教啊,呵呵  回复  更多评论
  
# re: Ext 2.0使用:对分页Ext.PagingToolbar的扩展 2008-01-08 08:31 Terry Liang
@domino初级开发者
就分页来说,其实我觉得最重要的是搞清start,limit,cursor,pageSize之间的关系。
个人建议,你可以参照我的分页代码,修改onClick,onPagingKeydown,然后调整其它方法就可以了。
我有些不明白的地方:store.load({params:{start:1 }}),假如按你所说,服务器端的方法没错的话,肯定返回的是第一页数据,怎么可能显示第二页的数据呢?
如还有问题,可以把可以测试的相关代码发给我,我可以看一下。  回复  更多评论
  
# re: Ext 2.0使用:对分页Ext.PagingToolbar的扩展 2008-01-08 09:38 domino初级开发者
呵呵,谢谢Terry Liang~
服务器返回的数据没错,但是在ext的分页工具栏上的显示是错误的,比如有四页数据,页面加载后ext的分页工具栏显示的是“第二页”,但是上面显示的其实是是第一页的数据,因此点分页工具栏上的下一页能取到第二页的数据,但是工具栏显示的却是“第三页”~~点击工具栏上的“最后一页”就只能取到倒数第二页的数据,最后一页的数据怎么都取不到~~

也就是说数据是没问题的,但是ext的分页栏上的显示和那些按钮都有问题。

这几天我也在尝试修改ext的分页工具栏的代码,不过由于我接触ext还不到一个星期,感觉力不从心。嘿嘿~~
我的MSN:combest-gg×hotmail.com,方便的话请帮忙看下代码,万分感谢  回复  更多评论
  
# re: Ext 2.0使用:对分页Ext.PagingToolbar的扩展 2008-05-16 10:32 孙子兵法
各位老大,我在做gridPanel分页时用到了PagingToolbar,但基本上所有的资料都只说了用 ds.load({params:{start:0,limit:10}}); 建立一个HTTP 参数到远程数据源. 感觉这样使用数据页面(页面提供数据)的方法很原始,我必须在store中 使用 Ext.data.HttpProxy({url:'datapage.aspx'}), 这种方式。
但我目前后台AJAX类全写好的,我用方法var data=getdata(20,25);就可得到服务器从第20条记录开始的25条数据。所以我把store使用内存模式Ext.data.MemoryProxy(data),就行了。所有测试都OK,但PagingToolbar似乎不支持事件和方法的邦定,帮忙看下面问题DEMO
=============================================================================================
Ext.onReady(function(){
//alert(TMKSOFT.getData(20,20).value); //成功调试Json数据源,服务器Ajax方法,从服务器获取JSON数据 数据源绝对没问题

function getdata(st,pg)
{
data=eval('('+TMKSOFT.getData(st,pg).value+')');
return data;
}

var data=getdata(20,20); //初始化调试了下,能成功显示数据

var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.JsonReader({
totalProperty: 'results',
root: 'rows'
}, [
{name: 'id', mapping: 'id'},
{name: 'name', mapping: 'name'},
{name: 'organization',mapping: 'organization'},
{name: 'homepage',mapping: 'homepage'},
])
});

//store.addListener('load',getdata); 想用Load侦听,但也失败

var colM=new Ext.grid.ColumnModel([{header:'项目编号',dataIndex:'id',sortable:true},
{header:'项目名称',dataIndex:'name',sortable:true},
{header:'开发团队',dataIndex:'organization',sortable:true},
{header:'网站地址',dataIndex:'homepage',renderer:showUrl}]);

var grid = new Ext.grid.GridPanel({
renderTo:'hello',
title:"中国Java开源产品及团队",
bodyStyle:'width:100%',
autoWidth:true,
height:500,
//width:'100%',
cm:colM,
store:store,
autoExpandColumn:2,
bbar: new Ext.PagingToolbar({
id:'pagingtoolbar',
pageSize: 20,
store: store,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
emptyMsg: "没有记录"
})
});

//var p1=document.getElementById("ext-gen30").value; //这样可得到需要从第几条记录开始
//var p2=Ext.getCmp('pagingtoolbar').pageSize; //这样可得到多少条纪录
alert(p1+" + "+p2)
store.load({callback:getdata}); //每点一下PagingToolbar触发什么事件,重调我getdata方法获取新数据,我该怎么写?
});  回复  更多评论
  
# re: Ext 2.0使用:对分页Ext.PagingToolbar的扩展 2008-09-24 15:32 aab
terry,怎么判断我点的是哪个翻页按钮,下一页或上一页呢?  回复  更多评论
  
# re: Ext 2.0使用:对分页Ext.PagingToolbar的扩展[未登录] 2009-05-21 10:14 conan
@孙子兵法
楼主不是给了个很好的方案吗?只要扩展pagingToolbar,然后覆盖需要覆盖的方法就可以了.例如你这里的话只要覆盖onclick方法就可以了.  回复  更多评论
  
# re: Ext 2.0使用:对分页Ext.PagingToolbar的扩展 2009-10-11 20:59 duansky
LZ能否好事做到底,干脆把EXT3.0的也扩展一下.我改了一天也没改成功! 郁闷~  回复  更多评论
  
# re: Ext 2.0使用:对分页Ext.PagingToolbar的扩展[未登录] 2012-03-10 21:16 小杰
为什么我扩展的不显示 displayMsg 信息。  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: