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