Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-5235 in 4.2.1.883.
  1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    18
    Vote Rating
    1
    sraghura201 is on a distinguished road

      1  

    Default Calling reconfigure() on Ext.tree.Panel throws error

    Calling reconfigure() on Ext.tree.Panel throws error


    REQUIRED INFORMATION
    Ext version tested:
    • Ext 4.0.0
    Browser versions tested against:
    • Chrome 13.0.782.112
    • FF 5.0 (firebug 1.7.3 installed)
    Description:
    • Describe the problem in greater detail here, summarizing the behavior.The tree panel is supposed to allow for adding columns dynamically using reconfigure(). Attempting to do this throws an error
    Steps to reproduce the problem:
    • Create a Ext.tree.panel with Ext.data.TreeStore Ensure that in the column config, the first column has a xtype of 'treecolumn'
    • Attempt to reconfigure the tree.Panel with a new store and a new column config.A TypeError stating that an object has no method indexOf should be thrown
    The result that was expected:
    • See tree.panel reconfigured with the new store and set of columns
    The result that occurs instead:
    • In Chrome error thrown: Uncaught TypeError: Object [object Object] has no method 'indexOf' ext-all-debug.js (line 56961)
    • In Firebug error thrown:me.store.indexOf is not a functionhttp://10.15.5.109/javaScripts/ext-4.0.0/ext-all-debug.js
      Line 56961
    Test Case:
    Code:
    cols = [{
                xtype: 'treecolumn', //this is so we know which column will show the tree
                text: 'col1',
                width:300,
                sortable: true,
                dataIndex: 'task'
    
    
            },{
                text:'col2',
                width:30,
                sortable: false,
            }
            ];
    cols2 = [{
                xtype: 'treecolumn',
                text: 'col1',
                width:300,
                sortable: true,
                dataIndex: 'task'
            },{
                text:'col2',
                width:30,
                sortable: false,
                //renderer:imageRenderer
                dataIndex:'url'
            }
            ];
    
    
    Ext.define('Task', {
            extend: 'Ext.data.Model',
            fields: [
                {name: 'task',     type: 'string'},
                {name: 'url',     type: 'string'}
                ]
        });
    
    
    
    
      store = Ext.create('Ext.data.TreeStore', {
         model:'Task',
              root: {
                  expanded: true
                  ,children:[{task:'a',url:'c',expanded: true,
                             children:[{ task:'b',url:'c',leaf: true}]},{task:'a',url:'c',expanded: true,
                             children:[{ task:'b',url:'c',leaf: true}]}]
                  }
    
    
    
    
    
    
    
    
     });
    
    
    
    
    
    
      store2 = Ext.create('Ext.data.TreeStore', {
         model:'Task',
              root: {
                  expanded: true
                  ,children:[{task:'a',url:'c',expanded: true,
                             children:[{ task:'b',url:'c',leaf: true}]},{task:'a',url:'c',expanded: true,
                             children:[{ task:'b',url:'c',leaf: true}]}]
                  }
    
    
    
    
    
    
    
    
     });
    
    
    
    
      myTree = Ext.create('Ext.tree.Panel', {
            title: 'treegrid',
            width: 600,
            height: 300,
            renderTo: Ext.getBody(),
            collapsible: true,
            rootVisible:false,
            useArrows: true,
            store: store,
            multiSelect: true,
            columns:cols
        });
      myTree.reconfigure(store2,cols2);
      });
    HELPFUL INFORMATIONI usually run the last line ( myTree.reconfigure(store2,cols2) from firebug rather than put it in the .jsScreenshot or Video:
    • none
    See this URL for live test case: http://noneDebugging already done:
    • none
    Possible fix:
    • not provided
    Additional CSS used:
    • only default ext-all.css
    Operating System:
    • Ubuntu 11.04

  2. #2
    Ext JS Premium Member
    Join Date
    Mar 2009
    Posts
    198
    Vote Rating
    2
    rspaeth is on a distinguished road

      0  

    Default


    I have run into this error as well with ext 4.0.2a

  3. #3
    Sencha User
    Join Date
    May 2011
    Location
    Jakarta, Indonesia
    Posts
    6
    Vote Rating
    0
    ridzeal is on a distinguished road

      0  

    Default


    Few critical feature like editing treegrid also affected by this cause

  4. #4
    Ext JS Premium Member
    Join Date
    Sep 2011
    Posts
    5
    Vote Rating
    2
    poweradvocate is on a distinguished road

      1  

    Default


    Still an issue in 4.0.7. Please fix this bug.

  5. #5
    Sencha User ykey's Avatar
    Join Date
    Mar 2010
    Location
    USA
    Posts
    245
    Vote Rating
    27
    ykey has a spectacular aura about ykey has a spectacular aura about

      0  

    Default


    Quote Originally Posted by poweradvocate View Post
    Still an issue in 4.0.7. Please fix this bug.
    It appears that reconfigure will just be completely removed from Trees in 4.1

  6. #6
    Ext JS Premium Member
    Join Date
    May 2012
    Posts
    4
    Vote Rating
    0
    rlovelett is on a distinguished road

      0  

    Default




    Please bring back and fix reconfigure.

  7. #7
    Sencha User Izhaki's Avatar
    Join Date
    Apr 2009
    Location
    London
    Posts
    118
    Vote Rating
    13
    Izhaki will become famous soon enough

      0  

    Default


    With 4.1.1, the columns part of reconfigure seems to work fine, albeit after you call reconfigure you need to call tree.getView().refresh() yourself.

    I've checked the original posted code with 4.1.1 and it still throws an error (it won't if the store parameter is set to undefined).

  8. #8
    Sencha User
    Join Date
    Mar 2012
    Posts
    1
    Vote Rating
    0
    cmurphy54 is on a distinguished road

      0  

    Default Workaround

    Workaround


    A workaround for this is to set the store in an event early in the panel's lifecycle.

    For example, if you execute this code within beforerender

    Code:
    onPanelBeforeRender: function(abstractcomponent, options) {
        var newStore = Ext.create('YourApp.store.YourStore');
        abstractcomponent.store = newStore;
    }
    Your view will have a new instance of the store not shared by any other instances of your treepanel (which is the main reason I am ever trying to reconfigure a store).

    I've seen some other workarounds suggested using initComponent, but that isn't as easy to implement within Sencha Architect, so I prefer this method.

  9. #9
    Sencha User
    Join Date
    May 2013
    Posts
    7
    Vote Rating
    1
    bocong is on a distinguished road

      0  

    Default


    the workaround that directly assign a new store to the store field doesn't work for me.

    I tried setRootNode, it did display a new tree for each grid, but when collapsing/expanding the root node, it throws error
    Uncaught TypeError: Cannot read property 'internalId' of undefined
    It seems the beforeexpand is fired twice, I guess the setRootNode is still modifing the original store, so the old listener is not removed.
    Code:
    onPanelBeforeRender: function(abstractcomponent, options) {
    var newStore = Ext.create('YourApp.store.YourStore'); abstractcomponent.setRootNode(newStore.getRootNode());
    }
    Finally I have to extend the tree panel, and in the initComponent method to create a new store, this works as expected.

    Code:
    initComponent: function () {
            this.store = Ext.create('YourApp.store.YourStore');
            this.callParent(arguments);
    }

  10. #10
    Sencha User
    Join Date
    Jul 2012
    Posts
    5
    Vote Rating
    -1
    delegans is an unknown quantity at this point

      0  

    Default


    http://stackoverflow.com/a/21704290/1496088
    I extended the default treestore and wrote setStore() method like below. Do not pretend that this is the best solution, but it works for ExtJS 4.1.1 correctly. I believe do not requires a lot of changes to support other versions.

    Code:
        setStore: function(store) {
            var me=this,
                view;
    
            view = me.getView();
            
            me.removeManagedListener('beforeload');    
            me.removeManagedListener('load');    
            
            me.store.clearListeners();
            me.store.clearManagedListeners();
           
            me.store = store;
            
            if (Ext.isString(me.store)) {
                me.store = Ext.StoreMgr.lookup(me.store);
            } else if (!me.store || Ext.isObject(me.store) && !me.store.isStore) {
                me.store = new Ext.data.TreeStore(Ext.apply({}, me.store || {}, {
                    root: me.root,
                    fields: me.fields,
                    model: me.model,
                    folderSort: me.folderSort
                }));
            } else if (me.root) {
                me.store = Ext.data.StoreManager.lookup(me.store);
                me.store.setRootNode(me.root);
                if (me.folderSort !== undefined) {
                    me.store.folderSort = me.folderSort;
                    me.store.sort();
                }
            }
            
            view.store.treeStore = me.store;
            
            view.setRootNode(me.store.getRootNode());
            
            me.mon(me.store, {
                scope: me,
                rootchange: me.onRootChange,
                clear: me.onClear
            });
    
            me.relayEvents(me.store, [
                /**
                 * @event beforeload
                 * @inheritdoc Ext.data.TreeStore#beforeload
                 */
                'beforeload',
    
                /**
                 * @event load
                 * @inheritdoc Ext.data.TreeStore#load
                 */
                'load'
            ]);
    
            me.mon(me.store, {
                /**
                 * @event itemappend
                 * @inheritdoc Ext.data.TreeStore#append
                 */
                append: me.createRelayer('itemappend'),
    
                /**
                 * @event itemremove
                 * @inheritdoc Ext.data.TreeStore#remove
                 */
                remove: me.createRelayer('itemremove'),
    
                /**
                 * @event itemmove
                 * @inheritdoc Ext.data.TreeStore#move
                 */
                move: me.createRelayer('itemmove', [0, 4]),
    
                /**
                 * @event iteminsert
                 * @inheritdoc Ext.data.TreeStore#insert
                 */
                insert: me.createRelayer('iteminsert'),
    
                /**
                 * @event beforeitemappend
                 * @inheritdoc Ext.data.TreeStore#beforeappend
                 */
                beforeappend: me.createRelayer('beforeitemappend'),
    
                /**
                 * @event beforeitemremove
                 * @inheritdoc Ext.data.TreeStore#beforeremove
                 */
                beforeremove: me.createRelayer('beforeitemremove'),
    
                /**
                 * @event beforeitemmove
                 * @inheritdoc Ext.data.TreeStore#beforemove
                 */
                beforemove: me.createRelayer('beforeitemmove'),
    
                /**
                 * @event beforeiteminsert
                 * @inheritdoc Ext.data.TreeStore#beforeinsert
                 */
                beforeinsert: me.createRelayer('beforeiteminsert'),
    
                /**
                 * @event itemexpand
                 * @inheritdoc Ext.data.TreeStore#expand
                 */
                expand: me.createRelayer('itemexpand', [0, 1]),
    
                /**
                 * @event itemcollapse
                 * @inheritdoc Ext.data.TreeStore#collapse
                 */
                collapse: me.createRelayer('itemcollapse', [0, 1]),
    
                /**
                 * @event beforeitemexpand
                 * @inheritdoc Ext.data.TreeStore#beforeexpand
                 */
                beforeexpand: me.createRelayer('beforeitemexpand', [0, 1]),
    
                /**
                 * @event beforeitemcollapse
                 * @inheritdoc Ext.data.TreeStore#beforecollapse
                 */
                beforecollapse: me.createRelayer('beforeitemcollapse', [0, 1])
            });    
            
            // If the root is not visible and there is no rootnode defined, then just lets load the store
            if (!view.rootVisible && !me.getRootNode()) {
                me.setRootNode({
                    expanded: true
                });
            }
        }
    Last edited by delegans; 11 Feb 2014 at 12:20 PM. Reason: some bugs fixed