Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / docs / source / paging.html
1 <html>\r
2 <head>\r
3   <title>The source code</title>\r
4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
6 </head>\r
7 <body  onload="prettyPrint();">\r
8     <pre class="prettyprint lang-js">Ext.onReady(function(){
9
10     // create the Data Store
11     var store = new Ext.data.JsonStore({
12         root: 'topics',
13         totalProperty: 'totalCount',
14         idProperty: 'threadid',
15         remoteSort: true,
16
17         fields: [
18             'title', 'forumtitle', 'forumid', 'author',
19             {name: 'replycount', type: 'int'},
20             {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
21             'lastposter', 'excerpt'
22         ],
23
24         // load using script tags for cross domain, if the data in on the same domain as
25         // this page, an HttpProxy would be better
26         proxy: new Ext.data.ScriptTagProxy({
27             url: 'http://extjs.com/forum/topics-browse-remote.php'
28         })
29     });
30     store.setDefaultSort('lastpost', 'desc');
31
32
33     // pluggable renders
34     function renderTopic(value, p, record){
35         return String.format(
36                 '<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
37                 value, record.data.forumtitle, record.id, record.data.forumid);
38     }
39     function renderLast(value, p, r){
40         return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
41     }
42
43     var grid = new Ext.grid.GridPanel({
44         width:700,
45         height:500,
46         title:'ExtJS.com - Browse Forums',
47         store: store,
48         trackMouseOver:false,
49         disableSelection:true,
50         loadMask: true,
51
52         // grid columns
53         columns:[{
54             id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
55             header: "Topic",
56             dataIndex: 'title',
57             width: 420,
58             renderer: renderTopic,
59             sortable: true
60         },{
61             header: "Author",
62             dataIndex: 'author',
63             width: 100,
64             hidden: true,
65             sortable: true
66         },{
67             header: "Replies",
68             dataIndex: 'replycount',
69             width: 70,
70             align: 'right',
71             sortable: true
72         },{
73             id: 'last',
74             header: "Last Post",
75             dataIndex: 'lastpost',
76             width: 150,
77             renderer: renderLast,
78             sortable: true
79         }],
80
81         // customize view config
82         viewConfig: {
83             forceFit:true,
84             enableRowBody:true,
85             showPreview:true,
86             getRowClass : function(record, rowIndex, p, store){
87                 if(this.showPreview){
88                     p.body = '<p>'+record.data.excerpt+'</p>';
89                     return 'x-grid3-row-expanded';
90                 }
91                 return 'x-grid3-row-collapsed';
92             }
93         },
94
95         // paging bar on the bottom
96         bbar: new Ext.PagingToolbar({
97             pageSize: 25,
98             store: store,
99             displayInfo: true,
100             displayMsg: 'Displaying topics {0} - {1} of {2}',
101             emptyMsg: "No topics to display",
102             items:[
103                 '-', {
104                 pressed: true,
105                 enableToggle:true,
106                 text: 'Show Preview',
107                 cls: 'x-btn-text-icon details',
108                 toggleHandler: function(btn, pressed){
109                     var view = grid.getView();
110                     view.showPreview = pressed;
111                     view.refresh();
112                 }
113             }]
114         })
115     });
116
117     // render it
118     grid.render('topic-grid');
119
120     // trigger the data store load
121     store.load({params:{start:0, limit:25}});
122 });
123 </pre>    \r
124 </body>\r
125 </html>