1. #1
    Sencha User
    Join Date
    May 2011
    Posts
    19
    Answers
    1
    Vote Rating
    0
    seam_cw is on a distinguished road

      0  

    Default Answered: Ext.tab.Panel.removeAll(): me.store is null

    Answered: Ext.tab.Panel.removeAll(): me.store is null


    Simply explained: If calling removeAll() on a Ext.tab.Panel instance, this error occours:

    "me.store is null"

    It's from this line, in the refresh method of Ext.view.AbstractView:
    records = me.store.getRange();

    I tried to debug it a whole day long could not find a solution.

  2. First up, an explanation of the error. When you call removeAll() it will destroy all of the child components. You cannot then interact with one of those components, they must be discarded. In this case it appears that something is trying to interact with a destroyed view component which, by virtue of being destroyed, no longer has a store.

    Do you have any listeners in your code that might be trying to interact with the destroyed components? Perhaps a listener for tab change events?

    What sort of components do you have inside your tabs? I realize you might have lots, just give us a general overview. Which of them have stores? A grid perhaps?

    For diagnostic purposes, try replacing your call to tab.removeAll() with:

    Code:
    tab.remove(0);
    then try:

    Code:
    tab.remove(1);
    and so on for each of your tabs. See which ones cause the error and which don't. Does it matter which tab is currently active?

    Next thing to try. Turn on 'Break On Errors' and inspect the variable me at the time of the error. Can you work out which component it corresponds to?

    Next, work your way up the stacktrace. Make sure you're using a debug version of ExtJS for this (i.e. any of the versions which have the ExtJS code human readable). Somewhere in that stacktrace you'll find what is trying to interact with the destroyed component.

    I would recommend trying different debuggers. Firebug, the Chrome Developer Tools and the IE debugger are all slightly different and you may have more luck with one than the others.

    As well as the information I've requested above it may also help to provide the following.
    • Exact ExtJS version.
    • The stacktrace.
    • A simple reproducible test case or, failing that, some snippets from your code that might help point us in the right direction.
    • Whether or not this happens in different browsers or only in one browser.

  3. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,592
    Answers
    541
    Vote Rating
    323
    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


    First up, an explanation of the error. When you call removeAll() it will destroy all of the child components. You cannot then interact with one of those components, they must be discarded. In this case it appears that something is trying to interact with a destroyed view component which, by virtue of being destroyed, no longer has a store.

    Do you have any listeners in your code that might be trying to interact with the destroyed components? Perhaps a listener for tab change events?

    What sort of components do you have inside your tabs? I realize you might have lots, just give us a general overview. Which of them have stores? A grid perhaps?

    For diagnostic purposes, try replacing your call to tab.removeAll() with:

    Code:
    tab.remove(0);
    then try:

    Code:
    tab.remove(1);
    and so on for each of your tabs. See which ones cause the error and which don't. Does it matter which tab is currently active?

    Next thing to try. Turn on 'Break On Errors' and inspect the variable me at the time of the error. Can you work out which component it corresponds to?

    Next, work your way up the stacktrace. Make sure you're using a debug version of ExtJS for this (i.e. any of the versions which have the ExtJS code human readable). Somewhere in that stacktrace you'll find what is trying to interact with the destroyed component.

    I would recommend trying different debuggers. Firebug, the Chrome Developer Tools and the IE debugger are all slightly different and you may have more luck with one than the others.

    As well as the information I've requested above it may also help to provide the following.
    • Exact ExtJS version.
    • The stacktrace.
    • A simple reproducible test case or, failing that, some snippets from your code that might help point us in the right direction.
    • Whether or not this happens in different browsers or only in one browser.

  4. #3
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,747
    Answers
    33
    Vote Rating
    106
    mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all

      0  

    Default


    Just tried this in the Ext 4.0.5 tabs example.

    Just calling

    Code:
    tabs.removeAll();
    breaks it (though different error). Not sure what the expected result would be, tab panel with no tabs seems .... not so useful

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

      0  

    Default


    While debugging I found out, what skirtle already mentioned: the removeAll() doesn't trigger the error directly. If I print some messages using console.log() after the removeAll(), they appear before the "me.store is null" error.

    The error only occours if a grid is displayed inside the tab. I couldn't find out yet, which listener or component tries to interact with the tabs contents, but it's at least a hint.

  6. #5
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,592
    Answers
    541
    Vote Rating
    323
    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


    The stacktrace should reveal all. Could you post it?

  7. #6
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,747
    Answers
    33
    Vote Rating
    106
    mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all

      0  

    Default


    Actually, in 4.0.5 tabs sample this works ok. The error I saw was caused by another small bug.

    1. Create tab with autoLoad : true,
    2. Render it and instantly call removeAll on the tab panel - i.e. destroy it while it's loading.
    3. The ajax request completes and tries to update the dom, *crash*

  8. #7
    Sencha User
    Join Date
    May 2011
    Posts
    19
    Answers
    1
    Vote Rating
    0
    seam_cw is on a distinguished road

      0  

    Default


    Quote Originally Posted by skirtle View Post
    The stacktrace should reveal all. Could you post it?
    It's from a german version of Firebug, but the essentials should be clear ("Zeile" means "line"):
    Code:
    me.store is null
    refresh()ext-all-debug.js (Zeile 58564)
    callParent(args=[])ext-all-debug.js (Zeile 2833)
    refresh()ext-all-debug.js (Zeile 67526)
    callParent(args=[])ext-all-debug.js (Zeile 2833)
    refresh()ext-all-debug.js (Zeile 76013)
    callParent(args=[])ext-all-debug.js (Zeile 2833)
    refresh(firstPass=undefined)ext-all-debug.js (Zeile 76396)
    refresh()ext-all-debug.js (Zeile 75572)
    [Bei diesem Fehler anhalten] record
    The Ext version is 4.0.2.

  9. #8
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,592
    Answers
    541
    Vote Rating
    323
    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


    For some reason not all of my line numbers tie up with yours. What's on line 75572 for you?

    Is there any chance you could post the Chrome stacktrace too? They're generally a little easier to follow in my experience.

  10. #9
    Sencha User
    Join Date
    May 2011
    Posts
    19
    Answers
    1
    Vote Rating
    0
    seam_cw is on a distinguished road

      0  

    Default


    The one of Chrome isn't much better:
    Code:
    Uncaught TypeError: Cannot call method 'getRange' of null
    Ext.define.refresh   ext-all-debug.js:58564
    Base.callParent   ext-all-debug.js:2833
    Ext.define.refresh   ext-all-debug.js:67526
    Base.callParent   ext-all-debug.js:2833
    Ext.define.refresh   ext-all-debug.js:76013
    Base.callParent   ext-all-debug.js:2833
    Ext.define.refresh   ext-all-debug.js:76396
    me.refresh   ext-all-debug.js:75572
    Line 75572 is the me.refresh(); call in initComponent of Ext.view.Table:

    Code:
    Ext.define('Ext.view.Table', {
        extend: 'Ext.view.View',
    
    [...]
    
        initComponent: function() {
            var me = this;
    
            if (me.deferRowRender !== false) {
                me.refresh = function() {
                    delete me.refresh;
                    setTimeout(function() {
                         me.refresh();
                    }, 0);
                };
            }

  11. #10
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,592
    Answers
    541
    Vote Rating
    323
    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 can reproduce it now.

    Seems to be a bug in 4.0.2. Works fine in 4.0.5 (you'll need a support contract to get 4.0.5).

    What happens is that removeAll() removes the tabs in order. As each one is removed, the next tab becomes the active tab. When the grid becomes the active tab it initiates a deferred refresh. By the time the refresh actually happens the grid has been destroyed.

    There are a number of ways you could work around it. If you can cope with the performance hit then the easiest way is to set deferRowRender: false on your grid. One alternative is to remove the grid's tab first, then call removeAll(). If you have multiple grid tabs then you'll want to remove all of them up front before you remove the active tab.