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     var store;
  52
  53     Ext.tip.QuickTipManager.init();
  54
  55     function renderTitle(value, p, record) {
  56         return value
  57             ? Ext.String.format(
  58                 '<a href="http://sencha.com/forum/showthread.php?t={1}" target="_blank">{0}</a>',
  59                 value,
  60                 record.data.threadid
  61             )
  62             : '';
  63     }
  64
  65     store = Ext.create('Ext.data.TreeStore', {
  66         model: 'Post',
  67         proxy: {
  68             type: 'ajax',
  69             reader: 'json',
  70             url: 'forum-data.json'
  71         },
  72         lazyFill: true
  73     });
  74
  75     Ext.create('Ext.tree.Panel', {
  76         title: 'Forum Folder Summary',
  77         width: 600,
  78         height: 400,
  79         renderTo: Ext.getBody(),
  80         reserveScrollbar: true,
  81         collapsible: true,
  82         loadMask: true,
  83         useArrows: true,
  84         rootVisible: false,
  85         store: store,
  86         animate: false,
  87         columns: [{
  88             xtype: 'treecolumn', // this is so we know which column will show the tree
  89             text: 'Forum',
  90             width: 275,
  91             sortable: true,
  92             locked: true,
  93             dataIndex: 'forumtitle'
  94         }, {
  95             text: 'User',
  96             width: 120,
  97             dataIndex: 'username',
  98             sortable: true
  99         }, {
 100             text: 'Title',
 101             width: 300,
 102             dataIndex: 'title',
 103             renderer: renderTitle
 104         }]
 105     });
 106 });