Ext grid 分页

今年的第一篇博文，写点关于ExtJs的东西。

 

Ext由于其界面的华丽、漂亮，在web开发中应用还是很广泛的。本人这两天吧年前的整过的那个Ext的Demo添加上了分页的功能，再就是排序改成中文显示了，老师还让加上锁列，但由于关于多表头锁列的资料在网上非常的少，暂时还没有做出来，所以就没做锁列的功能。

 

先看下js代码

 

/** * author : zengwei * date:2011-02-15 * */Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = '<%=path %>/js/ext/resources/images/default/s.gif'; Ext.QuickTips.init(); var xg = Ext.grid; var record_start = 0; //这里就是设置解析格式的地方，一定要和你的Model一样，要不然可是什么都得不到哦~~~~ var rd = new Ext.data.JsonReader({ //总记录数 totalProperty: 'totalCount', //哪儿是数据的头，可以看action里面是怎么定义数据格式的，这里就是如何解析的 root: 'results'}, //有那些字段呢？ [ {name:'name',type: 'string'}, {name:'sex',type: 'string'}, {name:'phone',type: 'string'}, {name:'email',type: 'string'}, {name:'department',type: 'string'} //这里就是对custom对象进行映射的地方 //{name:'customId' ,mapping:'custom.customId'}, //{name:'customName',mapping:'custom.customName'} ] ); var Store = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url: '../expert/extDemo.action',method:'POST'}),//Url很关键，我就是因为没配好这个，POST方法很重要，你可以省略，让你看下错误也行的！耽误了一大堆时间！ reader:rd }); var sm =new xg.CheckboxSelectionModel(); //CheckBox选择列 var cm =new xg.ColumnModel([ //new Ext.grid.RowNumberer(), //行号列 sm, {header: "姓名", dataIndex: 'name'}, {header:"性别",dataIndex:'sex'}, {header: "电话", dataIndex: 'phone'}, {header: "Email", dataIndex: 'email'}, {header: "部门", dataIndex: 'department'} ]); cm.defaultSortable = true; //////////////////////////////////////////////////////////////////////////////////////// // OrderGrid ////////////////////////////////////////////////////////////////////////////////////////if(Ext.grid.GridView){ Ext.apply(Ext.grid.GridView.prototype, { sortAscText : "升序", sortDescText : "降序", lockText : "锁列",//暂时加上 unlockText : "解锁列",//暂时加上 columnsText : "列" });} var ordergrid = new xg.GridPanel({ store: Store, sm: sm, cm: cm, //loadMask:true, loadMask: {msg:'正在加载数据，请稍侯……'}, width:800, height:400, //align:center, frame:true, title:'专家列表', iconCls:'icon-grid', renderTo: document.body, bbar:new Ext.PagingToolbar({ pageSize:4, store:Store, displayInfo:true, displayMsg:'显示第{0}数据到{1},一共有{2}条', emptyMsg:'没有记录' }) }); ordergrid.render();Store.load({params:{start:0,limit:4}});});

 

这里最重要的当然还是通过json从action中拿数据了，其实就通过一个proxy由给出的url拿到action查出的数据。其他的也就没什么了，当然必须要引入Ext所必需的js文件，不再赘述了。

 

看下效果^_^