git.roojs.org Git - roojs1/blob - examples/grid/paging.js

   1 /*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * <script type="text/javascript">
  10  */
  11
  12 Roo.BLANK_IMAGE_URL  = "../../images/default/s.gif";
  13
  14
  15 Roo.onReady(function(){
  16
  17     // create the Data Store
  18     var ds = new Roo.data.Store({
  19         // load using script tags for cross domain, if the data in on the same domain as
  20         // this page, an HttpProxy would be better
  21         proxy: new Roo.data.ScriptTagProxy({
  22             url: 'http://extjs.com/forum/topics-remote.php'
  23         }),
  24
  25         // create reader that reads the Topic records
  26         reader: new Roo.data.JsonReader({
  27             root: 'topics',
  28             totalProperty: 'totalCount',
  29             id: 'post_id'
  30         }, [
  31             {name: 'title', mapping: 'topic_title'},
  32             {name: 'author', mapping: 'author'},
  33             {name: 'totalPosts', mapping: 'topic_replies', type: 'int'},
  34             {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
  35             {name: 'excerpt', mapping: 'post_text'}
  36         ]),
  37
  38         // turn on remote sorting
  39         remoteSort: true
  40     });
  41
  42
  43     // pluggable renders
  44     function renderTopic(value, p, record){
  45         return String.format('<b>{0}</b>{1}', value, record.data['excerpt']);
  46     }
  47     function renderTopicPlain(value){
  48         return String.format('<b><i>{0}</i></b>', value);
  49     }
  50     function renderLast(value, p, r){
  51         return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['author']);
  52     }
  53     function renderLastPlain(value){
  54         return value.dateFormat('M j, Y, g:i a');
  55     }
  56
  57     // the column model has information about grid columns
  58     // dataIndex maps the column to the specific data field in
  59     // the data store
  60     var cm = new Roo.grid.ColumnModel([{
  61            id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
  62            header: "Topic",
  63            dataIndex: 'title',
  64            width: 490,
  65            renderer: renderTopic,
  66            css: 'white-space:normal;'
  67         },{
  68            header: "Author",
  69            dataIndex: 'author',
  70            width: 100,
  71            hidden: true
  72         },{
  73            id: 'last',
  74            header: "Last Post",
  75            dataIndex: 'lastPost',
  76            width: 150,
  77            renderer: renderLast
  78         }]);
  79
  80
  81
  82     // create the editor grid
  83     var grid = new Roo.grid.Grid('topic-grid', {
  84         ds: ds,
  85         cm: cm,
  86         selModel: new Roo.grid.RowSelectionModel({singleSelect:true}),
  87         enableColLock:false,
  88         loadMask: true
  89     });
  90
  91     // make the grid resizable, do before render for better performance
  92     var rz = new Roo.Resizable('topic-grid', {
  93         wrap:true,
  94         minHeight:100,
  95         pinned:true,
  96         handles: 's'
  97     });
  98     rz.on('resize', grid.autoSize, grid);
  99
 100     // render it
 101     grid.render();
 102
 103     var gridFoot = grid.getView().getFooterPanel(true);
 104
 105     // add a paging toolbar to the grid's footer
 106     var paging = new Roo.PagingToolbar(gridFoot, ds, {
 107         pageSize: 25,
 108         displayInfo: true,
 109         displayMsg: 'Displaying topics {0} - {1} of {2}',
 110         emptyMsg: "No topics to display"
 111     });
 112     // add the detailed view button
 113     paging.add('-', {
 114         pressed: true,
 115         enableToggle:true,
 116         text: 'Detailed View',
 117         cls: 'x-btn-text-icon details',
 118         toggleHandler: toggleDetails
 119     });
 120
 121     // trigger the data store load
 122     ds.load({params:{start:0, limit:25}});
 123
 124     function toggleDetails(btn, pressed){
 125         cm.getColumnById('topic').renderer = pressed ? renderTopic : renderTopicPlain;
 126         cm.getColumnById('last').renderer = pressed ? renderLast : renderLastPlain;
 127         grid.getView().refresh();
 128     }
 129 });