examples/grid/paging.js

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