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