ext paging.js 分页时的调用的写法。

paging.js，分页时的调用的写法。

js 代码

 

1. Ext.onReady(function(){  
2.   
3.     // create the Data Store  
4.     var ds = new Ext.data.Store({  
5.         // load using script tags for cross domain, if the data in on the same domain as  
6.         // this page, an HttpProxy would be better  
7.         proxy: new Ext.data.ScriptTagProxy({  
8.             url: 'http://extjs.com/forum/topics-remote.php'  
9.         }),  
10.   
11.         // create reader that reads the Topic records  
12.         reader: new Ext.data.JsonReader({  
13.             root: 'topics',  
14.             totalProperty: 'totalCount',  
15.             id: 'post_id'  
16.         }, [  
17.             {name: 'title', mapping: 'topic_title'},  
18.             {name: 'author', mapping: 'author'},  
19.             {name: 'totalPosts', mapping: 'topic_replies', type: 'int'},  
20.             {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},  
21.             {name: 'excerpt', mapping: 'post_text'}  
22.         ]),  
23.   
24.         // turn on remote sorting  
25.         remoteSort: true  
26.     });  
27.   
28.   
29.     // pluggable renders  
30.     function renderTopic(value, p, record){  
31.         return String.format('<b>{0}</b>{1}', value, record.data['excerpt']);  
32.     }  
33.     function renderTopicPlain(value){  
34.         return String.format('<b><i>{0}</i></b>', value);  
35.     }  
36.     function renderLast(value, p, r){  
37.         return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['author']);  
38.     }  
39.     function renderLastPlain(value){  
40.         return value.dateFormat('M j, Y, g:i a');  
41.     }  
42.   
43.     // the column model has information about grid columns  
44.     // dataIndex maps the column to the specific data field in  
45.     // the data store  
46.     var cm = new Ext.grid.ColumnModel([{  
47.            id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })  
48.            header: "Topic",  
49.            dataIndex: 'title',  
50.            width: 490,  
51.            renderer: renderTopic,  
52.            css: 'white-space:normal;'  
53.         },{  
54.            header: "Author",  
55.            dataIndex: 'author',  
56.            width: 100,  
57.            hidden: true //    隐藏列    
58.         },{  
59.            id: 'last',  
60.            header: "Last Post",  
61.            dataIndex: 'lastPost',  
62.            width: 150,  
63.            renderer: renderLast  
64.         }]);  
65.   
66.       
67.   
68.     // create the editor grid  
69.     var grid = new Ext.grid.Grid('topic-grid', {  
70.         ds: ds,  
71.         cm: cm,  
72.         selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),  
73.         enableColLock:false,  
74.         loadMask: true //是否显示正在加载    
75.     });  
76.   
77.     // make the grid resizable, do before render for better performance  
78.     var rz = new Ext.Resizable('topic-grid', {  
79.         wrap:true,  
80.         minHeight:100,  
81.         pinned:true,  
82.         handles: 's'  
83.     });  
84.     rz.on('resize', grid.autoSize, grid);  
85.   
86.     // render it  
87.     grid.render();  
88.   
89.     var gridFoot = grid.getView().getFooterPanel(true);  
90.   
91.     // 在grid底部增加分页按钮  
92.     var paging = new Ext.PagingToolbar(gridFoot, ds, {  
93.         pageSize: 25,  
94.         displayInfo: true,  
95.         displayMsg: 'Displaying topics {0} - {1} of {2}',  
96.         emptyMsg: "No topics to display"  
97.     });  
98.     // 增加可以查看详细信息的按钮   
99.     paging.add('-', {  
100.         pressed: true,  
101.         enableToggle:true,  
102.         text: 'Detailed View',  
103.         cls: 'x-btn-text-icon details',  
104.         toggleHandler: toggleDetails  
105.     });  
106.   
107.   // trigger the data store load    
108.     // ds.load({params:{start:0, limit:5}, extraParams:{dept:'test', viaParam:true}});            
109.      
110.      //ds.load({params:{start:0, limit:5, department:'test', viaPara:true}});        
111.      
112.      //ds.load({params:{start:0, limit:5}});        
113.      
114.          
115.      
116.      //查询时需要用到的参数    
117.      
118.     // ds.on('beforeload', function() {    
119.      
120.     //       ds.baseParams = {    
121.      
122.     //         dept: 'test111',    
123.      
124.      //        viaParam: true    
125.      
126.      //      };    
127.      
128.      //    });        
129.   
130.     // 传入start和limit参数以初始化数据  
131.     ds.load({params:{start:0, limit:25}});  
132.   
133.     function toggleDetails(btn, pressed){  
134.         cm.getColumnById('topic').renderer = pressed ? renderTopic : renderTopicPlain;  
135.         cm.getColumnById('last').renderer = pressed ? renderLast : renderLastPlain;  
136.         grid.getView().refresh();  
137.     }  
138. });  

Grid的分页必须依靠服务端（Server Side）来划分好每一页的数据才可以完成。

本例中的服务端语言是PHP,数据库是MySQL，用来导出一些随机的数据。下列脚本的作用是，获取我们想要的数据，同时这些数据是已分好页的数据。分页的参数是由Page Toolbar传入的变量limit和start所决定的。
例如： http://extjs.com/forum/topics-remote.php?start=0&limit=1 

php 代码

 

1. $link = mysql_pconnect("test-db.vinylfox.com", "test", "testuser")   
2.     or die("Could not connect");  
3. mysql_select_db("test") or die("Could not select database");  
4.   
5. $sql_count = "SELECT id, name, title, hire_date, active FROM random_employee_data";  
6. $sql = $sql_count . " LIMIT ".$_GET['start'].", ".$_GET['limit'];  
7.   
8. $rs_count = mysql_query($sql_count);  
9.   
10. $rows = mysql_num_rows($rs_count);  
11.   
12. $rs = mysql_query($sql);  
13.   
14. while($obj = mysql_fetch_object($rs))  
15. {  
16.     $arr[] = $obj;  
17. }  
18.   
19. Echo $_GET['callback'].'({"total":"'.$rows.'","results":'.json_encode($arr).'})';   

<script src="ext-base.js" type="text/javascript"></script> <script src="lib.js" type="text/javascript"></script> <noscript>
</noscript> <script src="ext-base.js" type="text/javascript"></script> <script src="lib.js" type="text/javascript"></script> <noscript></noscript> <link rel="stylesheet" type="text/css" href="/deepcms/resources/css/base.css"> <link rel="stylesheet" type="text/css" href="css.css"> <link rel="shortcut icon" href="http://www.ajaxjs.com/images/ext.ico"> <link rel="icon" href="http://www.ajaxjs.com/images/ext.ico"> <script type="text/javascript" src="http://www.google-analytics.com/urchin.js"></script> <script type="text/javascript"> _uacct = "UA-118165-1"; urchinTracker(); </script>