examples/grid/buffer.js

   1 /*!
   2  * Ext JS Library 3.0.0
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Ext.onReady(function(){\r
   8 \r
   9     var store = new Ext.data.Store({\r
  10         remoteSort: true,\r
  11         baseParams: {lightWeight:true,ext: 'js'},\r
  12         sortInfo: {field:'lastpost', direction:'DESC'},\r
  13         autoLoad: {params:{start:0, limit:500}},\r
  14 \r
  15         proxy: new Ext.data.ScriptTagProxy({\r
  16             url: 'http://extjs.com/forum/topics-browse-remote.php'\r
  17         }),\r
  18 \r
  19         reader: new Ext.data.JsonReader({\r
  20             root: 'topics',\r
  21             totalProperty: 'totalCount',\r
  22             idProperty: 'threadid',\r
  23             fields: [\r
  24                 'title', 'forumtitle', 'forumid', 'author',\r
  25                 {name: 'replycount', type: 'int'},\r
  26                 {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},\r
  27                 'lastposter', 'excerpt'\r
  28             ]\r
  29         })\r
  30     });\r
  31 \r
  32     var grid = new Ext.grid.GridPanel({\r
  33         renderTo: 'topic-grid',\r
  34         width:700,\r
  35         height:500,\r
  36         frame:true,\r
  37         title:'ExtJS.com - Browse Forums',\r
  38         trackMouseOver:false,\r
  39                 autoExpandColumn: 'topic',\r
  40         store: store,\r
  41 \r
  42         columns: [new Ext.grid.RowNumberer({width: 30}),{\r
  43             id: 'topic',\r
  44             header: "Topic",\r
  45             dataIndex: 'title',\r
  46             width: 420,\r
  47             renderer: renderTopic,\r
  48             sortable:true\r
  49         },{\r
  50             header: "Replies",\r
  51             dataIndex: 'replycount',\r
  52             width: 70,\r
  53             align: 'right',\r
  54             sortable:true\r
  55         },{\r
  56             id: 'last',\r
  57             header: "Last Post",\r
  58             dataIndex: 'lastpost',\r
  59             width: 150,\r
  60             renderer: renderLast,\r
  61             sortable:true\r
  62         }],\r
  63 \r
  64             bbar: new Ext.PagingToolbar({\r
  65                     store: store,\r
  66                     pageSize:500,\r
  67                     displayInfo:true\r
  68             }),\r
  69 \r
  70             view: new Ext.ux.grid.BufferView({\r
  71                     // custom row height\r
  72                     rowHeight: 34,\r
  73                     // render rows as they come into viewable area.\r
  74                     scrollDelay: false\r
  75             })\r
  76     });\r
  77 \r
  78 \r
  79     // render functions\r
  80     function renderTopic(value, p, record){\r
  81         return String.format(\r
  82                 '<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
  83                 value, record.data.forumtitle, record.id, record.data.forumid);\r
  84     }\r
  85     function renderLast(value, p, r){\r
  86         return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);\r
  87     }\r
  88 \r
  89 });\r