详解Ext分页Grid

摘要: 这个例子是我改编官方example，目的是砍去了一些不需要的东西，留下我们需要的东西

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

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)，而这里应该是系统帮你转换了，如果以后有这里时间转换报错可以来看此博客。