详解Ext分页Grid
2015-07-23 00:00
218 查看
摘要: 这个例子是我改编官方example,目的是砍去了一些不需要的东西,留下我们需要的东西
![](http://static.oschina.net/uploads/space/2015/0723/153949_O1lY_555061.gif)
1.创建grid
设置下宽高,然后设置下title,store和columns都是比较常规的。
2.store的问题,这个是核心
拿到的数据是这样的
3.分页条pagingbar,这个也是关键点
注意,的{2}体现了JsonStore的totalProperty : 'totalCount',的意义所在,发出去的最终请求例如,https://www.sencha.com/forum/topics-browse-remote.php?start=0&limit=25&sort=lastpost&dir=DESC&_dc=1437646466940&callback=stcCallback1001
4.column列模型
第一个关键点是dataIndex和store的字段对应,第二个关键点是renderer,
这里的r指的是一条记录,例如
所以r.data['lastposter']就是1305857807,这里的value就是调用renderLast的那个dataIndex->lastposter,注意这里的1305857807需要乘以1000才是秒,就是new Date(1305857807000),而这里应该是系统帮你转换了,如果以后有这里时间转换报错可以来看此博客。
Ext.onReady(function() { var store = getJsonStore(); var cols = getCols(); var pagingbar = getPagingBar(store); var grid = new Ext.grid.GridPanel({ width : 700, height : 500, title : 'ExtJS.com - Browse Forums', store : store, trackMouseOver : true, disableSelection : false, loadMask : true, columns : cols, viewConfig : { forceFit : true }, bbar : pagingbar }); window.data = {}; window.data['grid'] = grid; grid.render(Ext.getBody()); store.load({ params : { start : 0, limit : 25 } }); }); function renderTopic(value, p, record) { return String.format('<b><a href="http://extjs.com/forum/showthread.php?t={1}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>', value, record.data.forumtitle, record.id, record.data.forumid); } function renderLast(value, p, r) { return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']); } function getJsonStore() { var store = new Ext.data.JsonStore({ root : 'topics', totalProperty : 'totalCount', idProperty : 'threadid', remoteSort : true, fields : [ 'title', 'forumtitle', 'forumid', 'author', { name : 'replycount', type : 'int' }, { name : 'lastpost', mapping : 'lastpost', type : 'date', dateFormat : 'timestamp' }, 'lastposter', 'excerpt' ], proxy : new Ext.data.ScriptTagProxy({ url : 'http://extjs.com/forum/topics-browse-remote.php', nocache : true }), sortInfo : { field : 'lastpost', direction : 'desc' } }); return store; } function getCols() { var cols = [ { id : 'topic', header : "Topic", dataIndex : 'title', width : 420, renderer : renderTopic, sortable : true }, { header : "Author", dataIndex : 'author', width : 100, hidden : true, sortable : true }, { header : "Replies", dataIndex : 'replycount', width : 70, align : 'right', sortable : true }, { id : 'last', header : "Last Post", dataIndex : 'lastpost', width : 150, renderer : renderLast, sortable : true } ]; return cols; } function getPagingBar(store) { return new Ext.PagingToolbar({ pageSize : 25, store : store, displayInfo : true, displayMsg : 'Displaying topics {0} - {1} of {2}', emptyMsg : "No topics to display" }); }
![](http://static.oschina.net/uploads/space/2015/0723/153949_O1lY_555061.gif)
1.创建grid
var grid = new Ext.grid.GridPanel({ width : 700, height : 500, title : 'ExtJS.com - Browse Forums', store : store, trackMouseOver : true,//这个属性设置是会有mouseover改变底色背景的效果 disableSelection : false,//是否可以进行行选择,设为true,行选后会改变底色背景 loadMask : true,//加载的时候有转圈的那个等待图片 columns : cols, viewConfig : { forceFit : true }, bbar : pagingbar//分页条 });
设置下宽高,然后设置下title,store和columns都是比较常规的。
2.store的问题,这个是核心
var store = new Ext.data.JsonStore({ root : 'topics', //看下面拿到的数据的"topics":[{"title":"XTemplate w... totalProperty : 'totalCount', //看下面拿到的数据的"totalCount":"6679" idProperty : 'threadid',//"threadid":"133690" remoteSort : true, fields : [ {name : 'title', type : 'string'}, //type为string字符串 'forumtitle', //string字符串简写形式 'forumid', 'author', {name : 'replycount', type : 'int'}, //type为整形int,还有float { name : 'lastpost', mapping : 'lastpost', type : 'date', dateFormat : 'timestamp' }, //type为日期date--注意这里接收的数据为System.currentTimeMillis()/1000 'lastposter', 'excerpt' ], proxy : new Ext.data.ScriptTagProxy({ url : 'http://extjs.com/forum/topics-browse-remote.php', nocache : true//加上这一句以后请求后面就不会有_dc=******** }), sortInfo : { field : 'lastpost', direction : 'desc' }//这样写以后就会在http请求后加上"?sort=lastpost&dir=DESC" });
拿到的数据是这样的
{"totalCount":"6679","topics":[{"title":"XTemplate with in EditorGridPanel","threadid":"133690","username":"kpr@emco","userid":"272497","dateline":"1305604761","postid":"602876","forumtitle":"Ext 3.x: Help","forumid":"40","replycount":"2","lastpost":"1305857807","lastposter":"kpr@emco","excerpt":"Hi , \n \nI have an EditiorGridPanel whose one column i am using XTemplate to render and another Column is Combo Box Field .\nWhen i render the EditorGri..."},{"title":"IFrame error "_flyweights is undefined"","threadid":"133571","username":"Daz","userid":"52119","dateline":"1305533577","postid":"602456","forumtitle":"Ext 3.x: Help","forumid":"40","replycount":"1","lastpost":"1305857313","lastposter":"Daz","excerpt":"For Ext 3.3.0 using Firefox 4 & Firebug, the following error is often happening when our app loads:\n \"e._flyweights is undefined\".\n \n Yet, this ..."}]}
3.分页条pagingbar,这个也是关键点
function getPagingBar(store) { return new Ext.PagingToolbar({ pageSize : 25,//每页25条 store : store, displayMsg : 'Displaying topics {0} - {1} of {2}',//{0}是start{1}是end{2}是total,信息是自动填充的 displayInfo : true,//是否展示displayMsg信息 emptyMsg : "No topics to display"//如果没有数据提示信息 }); }
注意,的{2}体现了JsonStore的totalProperty : 'totalCount',的意义所在,发出去的最终请求例如,https://www.sencha.com/forum/topics-browse-remote.php?start=0&limit=25&sort=lastpost&dir=DESC&_dc=1437646466940&callback=stcCallback1001
4.column列模型
function getCols() { var cols = [ { id : 'topic', header : "Topic", dataIndex : 'title', width : 420, renderer : renderTopic, sortable : true }, { header : "Author", dataIndex : 'author', width : 100, hidden : true, sortable : true }, { header : "Replies", dataIndex : 'replycount', width : 70, align : 'right', sortable : true }, { id : 'last', header : "Last Post", dataIndex : 'lastpost', width : 150, renderer : renderLast, sortable : true } ]; return cols; }
第一个关键点是dataIndex和store的字段对应,第二个关键点是renderer,
function renderLast(value, p, r) { return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);//格式还可以是Ext.util.Format.date(d, 'Y-m-d H:i:s'); }
这里的r指的是一条记录,例如
{"title":"XTemplate with in EditorGridPanel","threadid":"133690","username":"kpr@emco","userid":"272497","dateline":"1305604761","postid":"602876","forumtitle":"Ext 3.x: Help","forumid":"40","replycount":"2","lastpost":"1305857807","lastposter":"kpr@emco","excerpt":"Hi , \n \nI have an EditiorGridPanel whose one column i am using XTemplate to render and another Column is Combo Box Field .\nWhen i render the EditorGri..."}
所以r.data['lastposter']就是1305857807,这里的value就是调用renderLast的那个dataIndex->lastposter,注意这里的1305857807需要乘以1000才是秒,就是new Date(1305857807000),而这里应该是系统帮你转换了,如果以后有这里时间转换报错可以来看此博客。
相关文章推荐
- Qt学习之路(31): 一个简易画板的实现(QWidget)
- Qt学习之路(32): 一个简易画板的实现(Graphics View)
- Qt学习之路(33): 国际化(上)
- Qt学习之路(34): 国际化(下)
- Qt学习之路(35): Qt容器类之顺序存储容器
- Qt学习之路(36): Qt容器类之遍历器和隐式数据共享
- Qt学习之路(37): Qt容器类之关联存储容器
- Qt学习之路(38): model-view架构
- Qt学习之路(39): QListWidget
- Qt学习之路(40): QTreeWidget
- 关于Android Stuido 打jar, aar 和使用aar
- C++中调用dll的两种方式
- iOS Sprite Kit教程之xcode安装以及苹果帐号绑定
- iOS Sprite Kit教程之编写程序以及Xcode的介绍
- 虚拟机是怎么实现的?
- Linux的inode
- js取整数四舍五入
- 数字金额大写转换(可以处理整数,小数,负数)
- js填充固定位数
- GetMssage()和WSAAsyncSelect()捕获网络事件消息