Extjs Grid 的詳細用法，分頁

[康少_小贱]

請問大嬸們，有用過ExtjS Grid的嗎。在Asp.net 中

[licai1210]

ext grid不是自带了一个好多例子的文件夹吗？然后你把AJAX的路径修改为ASP.NET中的ASHX页面路径就可以了，

[wuyq11]

到cnblogs。com里看看

[干巴猴儿]

我们项目里面，一个最简单的表格的源代码，仅供参考研究。
以下代码不是我写的，只是帮你搬砖过来的。
(会搬砖的程序猿也是程序猿！)

url：指向一个aspx或者ashx文件，里面输出json格式
{totalCount:300,data:[{userID:99,userName:"s096",trueName:"s096"},{userID:100,userName:"s097",trueName:"s097"}]}

GroupUserListGrid = Ext.extend(Ext.grid.GridPanel,{
	pageSize:100,
	constructor:function(config){
		Ext.apply(this,config);//groupID
		this.store = new Ext.data.Store({
			autoLoad:true,
			url:"CommonCmp/Data/_User.aspx",
			baseParams:{action:"getUserListByGroupID",groupID:this.groupID},
			reader:new Ext.data.JsonReader({
				root:"data",
				totalProperty:"totalCount"
			},[
				{name:"userID",type:"int"},
				{name:"userName"},
				{name:"trueName"}
			])
		});
		this.columns = [
			new Ext.grid.RowNumberer(),
			{header:"登录名",dataIndex:"userName",width:70,align:"center"},
			{header:"真实姓名",dataIndex:"trueName",width:80,align:"center"}
		];
		this.bbar = new Ext.PagingToolbar({
			store:this.store,
			pageSize:this.pageSize,
			//显示右下角信息

			displayInfo:false,
			displayMsg:'当前 {0} -- {1} 条 共 {2} 条',
		    emptyMsg:"No results to display",
		    prevText:"上一页",
			nextText:"下一页",
			refreshText:"刷新",
			lastText:"最后页",
			firstText:"第一页",
			beforePageText:"当前页",
			afterPageText:"共{0}页"
		});
		GroupUserListGrid.superclass.constructor.call(this,{
			//title:"查看用户组成员",
			stripeRows:true,
			autoScroll:true,
			enableColumnResize:false,
			enableColumnMove:false,
			enableHdMenu:false,
			viewConfig:{forceFit:true,emptyText:"暂无信息"},
			//frame:true,
			plugins:new Ext.ux.grid.CheckColumn(),
			loadMask:{msg:"加载中，请稍等..."},
			/*
			bbar:new Ext.PagingToolbar({
				store:this.store,
				pageSize: this._pageSize
				//displayInfo:true
			}),
			*/
			tbar:[new Ext.ux.form.TriggerSearchFiled({
                width:262,
				store: this.store,
				emptyText:"按登录名或真实姓名搜索",
				storeParams:{action:"getUserListByGroupID",groupID:this.groupID}
				//storeParams:{start: 0,limit:this._pageSize}
            })]
		});
		//this.store.load({params:{start:0,limit:this._pageSize}});
	}
});