examples/grid/buffer.js

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