extjs/build/examples/classic/tree/locking-buffer-rendered-treegrid.js

   1 Ext.require([
   2     'Ext.data.*',
   3     'Ext.grid.*',
   4     'Ext.tip.*',
   5     'Ext.tree.*'
   6 ]);
   7
   8 Ext.define('Post', {
   9     extend: 'Ext.data.TreeModel',
  10     idProperty: 'postid',
  11     fields: [{
  12         name: "title",
  13         convert: undefined
  14     }, {
  15         name: "threadid",
  16         convert: undefined
  17     }, {
  18         name: "username",
  19         convert: undefined
  20     }, {
  21         name: "userid",
  22         convert: undefined
  23     },  {
  24         name: "dateline",
  25         type: 'date',
  26         dateFormat: 'timestamp'
  27     }, {
  28         name: "postid",
  29         convert: undefined
  30     }, {
  31         name: "forumtitle",
  32         convert: undefined
  33     }, {
  34         name: "forumid",
  35         convert: undefined
  36     }, {
  37         name: "replycount",
  38         type: 'int',
  39         convert: undefined
  40     }, {
  41         name: "lastpost",
  42         dateFormat: 'timestamp',
  43         convert: undefined
  44     }, {
  45         name: "excerpt",
  46         convert: undefined
  47     }]
  48 });
  49
  50 Ext.onReady(function() {
  51     Ext.tip.QuickTipManager.init();
  52
  53     function renderTitle(value, p, record) {
  54         return value ? Ext.String.format(
  55             '<a href="http://sencha.com/forum/showthread.php?t={1}" target="_blank">{0}</a>',
  56             value,
  57             record.data.threadid
  58         ) : '';
  59     }
  60
  61     var store = Ext.create('Ext.data.TreeStore', {
  62         model: 'Post',
  63         proxy: {
  64             type: 'ajax',
  65             reader: 'json',
  66             url: 'forum-data.json'
  67         },
  68         lazyFill: true
  69     });
  70
  71     Ext.create('Ext.tree.Panel', {
  72         title: 'Forum Folder Summary',
  73         width: 600,
  74         height: 400,
  75         renderTo: Ext.getBody(),
  76         reserveScrollbar: true,
  77         collapsible: true,
  78         loadMask: true,
  79         useArrows: true,
  80         rootVisible: false,
  81         store: store,
  82         animate: false,
  83         columns: [{
  84             xtype: 'treecolumn', //this is so we know which column will show the tree
  85             text: 'Forum',
  86             width: 275,
  87             sortable: true,
  88             locked: true,
  89             dataIndex: 'forumtitle'
  90         },{
  91             text: 'User',
  92             width: 120,
  93             dataIndex: 'username',
  94             sortable: true
  95         }, {
  96             text: 'Title',
  97             width: 300,
  98             dataIndex: 'title',
  99             renderer: renderTitle
 100         }]
 101     });
 102 });