Trouble with TreeStore in ExtJS 4.0 MVC applicatio

Question

The new release of ExtJS can make your chrome unstable (Or is it my code?)! Let me explain my situation.

I am working on the new MVC architecture of ExtJS 4.0. I have a tree panel displaying my applications menu or navigation. As per the architecture, I tried to split my tree panel into controller, view and a separate store.

Here is my view:

 Ext.define('CRM.view.menu.View', {
    alias: 'widget.menutree',
    extend: 'Ext.tree.Panel',

    initComponent: function() {

        console.log('initComponent of View...');

        Ext.apply(this, {
            title: 'Simple Tree',                       
            width: 200,             
            store: 'MainMenu',
            rootVisible: false
        });

        this.callParent(arguments);
    }
});

My tree's store:

 Ext.define('CRM.store.MainMenu', {
    extend: 'Ext.data.TreeStore', 

    constructor: function() {

        console.log('Constructor of MainMenu TreeStore');

        config = Ext.apply(this,{
            proxy: {
                type: 'ajax',
                url: 'data/menu.json'
            },root: {
                text: 'Menu',
                id: 'src',
                expanded: true
            }
        });

        this.callParent(arguments);

    }
}); 

And in my controller I have provided my store info as well. Here is part of my controller config:

Ext.define('CRM.controller.MainMenu',{
    extend: 'Ext.app.Controller',
    stores: ['MainMenu'],   
    refs: [
        {ref:'menu',selector: 'menutree'},
        {ref:'cp',selector: 'centerpane'}
    ],
        .
        .
        .

On initial execution, I get the following error:

Object MainMenu has no method 'getRootNode'

But now, I get more weird error: Notice that chrome stops execution in the constructor of the tree store.

At the same time, in firefox: Firefox executes better, but there is no application rendered!

After some trail and error.. I did find a way to get my application running.. and that is to avoid using my store and directly provide the store information as shown below:

 Ext.define('CRM.view.menu.View', {
    alias: 'widget.menutree',
    extend: 'Ext.tree.Panel',

    initComponent: function() {

        console.log('initComponent of View...');

        Ext.apply(this, {
            title: 'Simple Tree',                       
            width: 200,             
            store: {
                proxy: {
                    type: 'ajax',
                    url: 'data/menu.json'
                },root: {
                    text: 'Menu',
                    id: 'src',
                    expanded: true
                }
            },
            rootVisible: false
        });

        this.callParent(arguments);
    }
});

Now the application executes with no issues at all!

Did anybody try creating tree panel using MVC architecture? I have no clue into how to fix this!

Answer 1

Looks like this is a known problem!!! Quoting from the ExtJS forums:

The parent class of "Ext.tree.Panel" looks for the store in the store manager in the "initComponent" method, but "Ext.tree.Panel" tries to use it before.

So, One way would be to code your store into your tree another way is to reassign the store in initComponent method. Here is the code:

initComponent: function(){
  this.store = Ext.data.StoreManager.lookup(this.store);
  this.callParent(arguments);
}