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 });