extjs/build/examples/classic/tree/filtered-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: false
  69     });
  70
  71     var tree = 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             flex: 2.5,
  87             sortable: true,
  88             dataIndex: 'forumtitle'
  89         },{
  90             text: 'User',
  91             flex: 1,
  92             dataIndex: 'username',
  93             sortable: true
  94         }, {
  95             text: 'Title',
  96             flex: 2,
  97             dataIndex: 'title',
  98             renderer: renderTitle
  99         }],
 100         tbar: [{
 101             labelWidth: 130,
 102             xtype: 'triggerfield',
 103             fieldLabel: 'Filter on thread title',
 104             triggerCls: 'x-form-clear-trigger',
 105             onTriggerClick: function() {
 106                 this.reset();
 107                 store.clearFilter();
 108                 this.focus();
 109             },
 110             enableKeyEvents: true,
 111             listeners: {
 112                 keyup: function() {
 113                     var field = tree.down('textfield'),
 114                         v;
 115
 116                     try {
 117                         v = new RegExp(field.getValue(), 'i');
 118                         store.filter({
 119                             filterFn: function(node) {
 120                                 var children = node.childNodes,
 121                                     len = children && children.length,
 122
 123                                     // Visibility of leaf nodes is whether they pass the test.
 124                                     // Visibility of branch nodes depends on them having visible children.
 125                                     visible = node.isLeaf() ? v.test(node.get('title')) : false,
 126                                     i;
 127
 128                                 // We're visible if one of our child nodes is visible.
 129                                 // No loop body here. We are looping only while the visible flag remains false.
 130                                 // Child nodes are filtered before parents, so we can check them here.
 131                                 // As soon as we find a visible child, this branch node must be visible.
 132                                 for (i = 0; i < len && !(visible = children[i].get('visible')); i++);
 133
 134                                 return visible;
 135                             },
 136                             id: 'titleFilter'
 137                         });
 138                     } catch (e) {
 139                         field.markInvalid('Invalid regular expression');
 140                     }
 141                 },
 142                 buffer: 250
 143             }
 144         }]
 145     });
 146 });