Geek Answers Handbook

Problem with TreeStore in MVC ExtJS 4.0 Application

A new version of ExtJS can make your chrome unstable (or is this my code?)! Let me explain my situation.

I am working on the new MVC ExtJS 4.0 architecture. I have a tree panel that displays my application menu or navigation. In accordance with the architecture, I tried to divide the tree panel into a 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 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 also provided information about my store. Here is part of my controller configuration:

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

On first run, I get the following error:

MainMenu object does not have 'GetRootNode' method

But now I get a weirder error: chrome just fails to display the app Note that chrome stops execution in the tree store constructor.

At the same time in firefox: firefox executes better Firefox works better, but no application!

After some trace and errors .. I found a way to launch my application .. and this should be done in order not to use my store and directly provide information about the store, 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 runs without any problems!

Has anyone tried to create a tree panel using the MVC architecture? I do not know how to fix it!

+4
source share
1 answer

This seems to be a known issue !!! Quoting from ExtJS forums :

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

So, one way would be to make the code of your store in your tree a different way - to reassign the store in the initComponent method. Here is the code:

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

More articles:


All Articles