1. #1
    Sencha User
    Join Date
    May 2011
    Posts
    70
    Vote Rating
    0
    Answers
    4
    gnube is on a distinguished road

      0  

    Default Answered: Ext.tree.Panel connundrum

    Answered: Ext.tree.Panel connundrum


    I don't really know where to go next with debugging the following problem.

    I have built a view which extends treePanel. The view creates a treeStore inside initComponent, loads from json reader in a proxy with type: 'rest'. The store is given an

    I can create a tab panel, the treePanel loads up my root node, I can open/close nodes and view/edit my data - all good.

    The problem arises when I create another tab panel from my class. I end up with the new panel rendering immediately - containing ALL of the tree which was in the closed panel.

    I have debugged the destruction of the treePanel and watched the first store being destroyed from the treePanel and also from the storeManager. This happens before the panel is removed from the tab.

    The store is being given a unique id based on the system generated component id; so I see that the store is not the same as the one which was deleted. So how could the panel draw up with the 'old' records? I have setup a debug on my server so I can see that there is no call made by the proxy to the backend. As far as I know (so far) the treePanel should only use the store to obtain its display information - but why would that have access to nodes from the previous stores proxy requests?

    I have used my technique for store creation on gridPanels using stores (not treeStores) and they don't draw 'old' rows - they just request it all again like I would expect via their proxy.

    Maybe I have to work out a way to pull this out of my project into an example script; being MVC I am not sure it would help straight off - hopefully if you kept reading this far you might have suggestions...
    Thx

  2. I may have a solution - its nearly time for me to get up so that would be about right.

    I found another set of nodes related to the 'view' in the treePanel. These were persisting from the viewConfig I had defined in my extension class - I have moved my declaration for the viewConfig down into my initComponent - this kind of thing...

    PHP Code:
    Ext.define('MyApp.view.TreeGridEditor.AppPanelTreeGrid', {
        
    extend'Ext.tree.Panel',

    //del        viewConfig =   {
    //del            forceFit: true,
    //del            emptyText: "  No records found.",                    
    //del            deferEmptyText: false,
    //del            toggleOnDblClick: false,
    //del           loadMask: false // http://www.sencha.com/forum/showthread.php?136528
    //del       }, 

        
    initComponent: function(){
            var 
    storeID = ..your id generation here...
            
    this.store Ext.create('MyApp.store.TreeGridEditor',{
                
    idstoreID,
                
    sorters: [{
                    
    property'ordinal'
                
    }]
            }); 
            
    this.viewConfig =   {
                
    forceFittrue,
                 
    emptyText"  No records found.",
                                    
    deferEmptyTextfalse,
                
    toggleOnDblClickfalse,
                
    loadMaskfalse // http://www.sencha.com/forum/showthread.php?136528
            
    }, 
            
    this.callParent(arguments); 
    Trap for new players I guess - I am happy to be the first to put my hand up to say I don't understand how these definitions are stored and updated yet - I don't really know what to search on to find stuff to read on it...

  3. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,625
    Vote Rating
    331
    Answers
    550
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Two suggestions.

    Firstly, if they really are separate stores then obviously the data must be transferred somewhere. The most likely candidate is on one of the class definitions. Inspect your store and treepanel classes in Firebug and make sure the data isn't be inadvertently stored on the class itself, probably on the prototype.

    Something else you could try is to insert some breakpoints just before you create the second tab. It may take a while to step through but all the answers are there somewhere.

  4. #3
    Sencha User
    Join Date
    May 2011
    Posts
    70
    Vote Rating
    0
    Answers
    4
    gnube is on a distinguished road

      0  

    Default


    hey skirtle, I am wading through line by line lol. inspector shows me that the class definition has an undefined .store node always - so I think my instantiation is ok. I have paused the backend so ajax requests time out. So far I can see that the tree inside the treeStore is being set a root node from the model, an ajax request is fired off. the treePanel DOM still contains all of the table elements from the first load - which makes me wonder if there is a problem way inside the Ext.tree.Panel create/destroy - anyways - thanks for your input, I will keep plodding away.

  5. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,625
    Vote Rating
    331
    Answers
    550
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Does the second store actually contain the tree records? It would be interesting to confirm whether the problem is data leaking between stores or just UI components sharing old bits of DOM.

  6. #5
    Sencha User
    Join Date
    May 2011
    Posts
    70
    Vote Rating
    0
    Answers
    4
    gnube is on a distinguished road

      0  

    Default


    OK - this is where I am at at the moment - I need a coffee break.

    I setup breakpoints in TreeStore.js on a bunch of load functions.

    It seems to me that the treePanel display elements are being created based on the previous stores content.

    The breakpoints prevent an ajax call to the back end - but the old 'tree' is shown in the browser - the id on the table in the DOM matches the new id given the new treePanel (I log this to console in my initComponent so can match it up).

    The store on my new object contains ONLY the root node, which is a phantom model record. The childNodes hanging from the root is Array[0] - so there is no good reason I can see for any table elements.

    I guess I need to find where those table elements are being created so I can work out why they are being created - and on what they are being based.

    just to repeat - the id on the table matches that on the storeId. The table contains rows where as the store contains only a root. I am not displaying a root in my treePanel - maybe i will change that setting next to see if causes a change in rendering.

  7. #6
    Sencha User
    Join Date
    May 2011
    Posts
    70
    Vote Rating
    0
    Answers
    4
    gnube is on a distinguished road

      0  

    Default


    I spoke too soon when I said that the store was empty on the view - it depends on the timing of the breakpoints.

    I found a timing where I can see that something has put data into the store other that the ajax response handler. This looks to be happening during the rendering of the treePanel when it is added to the tabPanel. Its not part of the call to the store.load() found in that phase of the component creation because I can interrupt that and still the data is there. Not sure how to find out what that something is at the moment. I will have to find some more places to interrupt the population of the store I guess.

    So far everything I have traced looks to be doing the right thing; which is good in a way....what would hold onto the old store data anyway I wonder. Only things I can think of would be some internal cache or lingering test code; I did step through some code which built the DOM treePanel elements based on the 'mystery data' which had made its way into the store - so that's probably a good thing too. Just need to identify the mystery supplier.

  8. #7
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,625
    Vote Rating
    331
    Answers
    550
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    If you're able to extract a standalone test case I'd be happy to help dig in. Extracting a test case might help you to figure out what the problem is too.

  9. #8
    Sencha User
    Join Date
    May 2011
    Posts
    70
    Vote Rating
    0
    Answers
    4
    gnube is on a distinguished road

      0  

    Default my hair is thining and greying

    my hair is thining and greying


    after pulling out the MVC into a more simplified project and diving down through layers of ExtJs code I found that a Ext.Tree.View uses its initComponent function to create a store

    PHP Code:
    initComponent: function() {
            var 
    me this;
            
            if (
    me.initialConfig.animate === undefined) {
                
    me.animate Ext.enableFx;
            }
            
            
    me.store Ext.create('Ext.data.NodeStore', {
                
    recursivetrue,
                
    rootVisibleme.rootVisible,
                
    listeners: {
                    
    beforeexpandme.onBeforeExpand,
                    
    expandme.onExpand,
                    
    beforecollapseme.onBeforeCollapse,
                    
    collapseme.onCollapse,
                    
    scopeme
                
    }
            });
            
            if (
    me.node) {
                
    me.setRootNode(me.node);
            }
            
    me.animQueue = {};
            
    me.callParent(arguments);
        }, 
    This is a problem for me because my initComponent does some guff including create a dynamic store then calls parent...which promptly replaces its .store with a NodeStore.

    I tried moving my newStore creation after the this.callParent(arguments) - and using this.reconfigure(newStore); but I ran into the bug with reconfigure.

    I used set loadMask: false in my viewConfig to get around the bug - but now I just have an empty tree panel. I see a bunch of events on the store, read/load/beforeappend/append etc but the panel stays empty.

    Listeners are supposed to be setup in reconfigure() to reach to store events but seemingly I am not doing it right.

    maybe there is an example of how to use a TreePanel dynamically using dynamically created stores on MVC? The trivial example in ext-4.0.2/examples/tree/treegrid.html isnt very helpful I don't think

    I am actually wondering if there is a design flaw in Ext.Tree.View; it seems a bit dodgy to overwrite the store like that. Working from this side of the puzzle without any idea of how the thing was designed makes it damn hard to tell whats what though.

  10. #9
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,625
    Vote Rating
    331
    Answers
    550
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    I believe a tree has 2 stores. One is a tree store and is a referenced by the store property of the panel. The other is the node store that you've found. You'll notice that a tree view has 2 method, getStore() and getTreeStore(), for accessing the 2 stores.

    If you're doing customization of the store in the way you've described then you might want to consider exactly which store it is that you want to change. I would suggest that it probably isn't the node store.

  11. #10
    Sencha User
    Join Date
    May 2011
    Posts
    70
    Vote Rating
    0
    Answers
    4
    gnube is on a distinguished road

      0  

    Default


    No doubt you are correct skirtle. It seems ok first time I create the store, and that the 'treeNodes' are being reused when I just set my store as per the example i mentioned.

    I will give it another try tomorrow before I pack it all in. I am pretty sure this.store was being used for the treeStore, which is what was in the same as "me.store = Ext.create('Ext.data.NodeStore', {"

Thread Participants: 1