詳解Ext分頁Grid

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)，而這裏應該是系統幫你轉換了，若是之後有這裏時間轉換報錯能夠來看此博客。