码迷,mamicode.com
首页 > 其他好文 > 详细

详解Ext分页Grid

时间:2015-07-23 20:07:09      阅读:211      评论:0      收藏:0      [点我收藏+]

标签:

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

详解Ext分页Grid

标签:

原文地址:http://my.oschina.net/u/555061/blog/483069

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!