extjs学习资料40-ext.paginggrid分页数据表格实例.docVIP

ExtJs学习资料—Ext.PagingGrid分页数据表格实例[ TIME \@ yyyy年M月d日星期W 2010年1月20日星期三] 第 PAGE 2 页 / 共 NUMPAGES 3 页 1、引入ExtJs框架文件（存入Global.js文件中） document.write(link rel=\stylesheet\ type=\text/css\ href=\../extjs/resources/css/ext-all.css\/ ); document.write(script type=\text/javascript\ src=\../extjs/adapter/ext/ext-base.js\/script); document.write(script type=\text/javascript\ src=\../extjs/ext-all.js\/script); document.write(script type=\text/javascript\ src=\../extjs/ext-lang-zh_CN.js\/script); 2、引入Global.js文件 script type=text/javascript src=Global.js/script script type=text/javascript src=../js/PagingGridPanel.js/script style type=text/css .icon {background:url(../images/1.gif) 0 5px no-repeat !important }/style 3、效果图 ===================================================================================================================== 4、JS源代码[PagingGridPanel.js] PagingGridPanel=Ext.extend(Ext.grid.GridPanel,{//0 _store:null, _pageSize:5, constructor:function(){//1 this._store=new Ext.data.Store({ url:http://localhost/StudyExtJs/ServerFile/ListPageMoney.asp, reader:new Ext.data.JsonReader({ root:record, totalProperty:total, id:id }, Ext.data.Record.create([ {name:id,type:int}, type, {name:money,type:int} ]) ) }); PagingGridPanel.superclass.constructor.call(this,{//2 title:分页数据表格实例, width:350, height:200, viewConfig:{ forceFit:true, //autoFill:true, enableRowBody:true }, sm:new Ext.grid.RowSelectionModel({singleSelect:true}), store:this._store, columns:[ {header:类型,dataIndex:type}, {header:金额,dataIndex:money} ], bbar:new Ext.PagingToolbar({ xtype:paging, store:this._store, pageSize:this._pageSize, autoWidth:true, displayInfo:true, emptyMsg:数据库中暂无信息记录 }), loadMask:{msg:正在载入数据...}, renderTo:Ext.getBody() });//2 this.getStore().load({params:{start:0,limit:this._pageSize}}); }//1 });//0