[4.0.0] MVC data.TreeStore and controller: this.store is undefined

[medusadelft]

Hi,

Despite the efforts of unit testing, it seems like MVC is not completely finished/tested yet in the final 4.0 code.
I run into several problems (groupField on grid, see help-forum, searchfield store problem, root-property needs to be defined in the controller instead of store for a TreePanel (see help-forum), referencing to a component from a controller needs the use of prototype eg: Ex.view.tree.Tree.prototype.expandAll) and now again I get this message (again, store related):


this.store is undefined
http://localhost/ext-4.0.0/ext-all-debug.js
Line 87251

return this.store.getRootNode()


I just have a toolbar in a TreePanel with a button. From the controller I want to call the expandAll function...


If someone of the Dev-team needs an example, I'm happy give my code.


I'm really excited about the new stuff and developing apps using MVC seems easier (my first attempt to MVC, when it is working), but I agree with some people that this version (4.0.0) should be a Beta4. It is just not stable enough and lacks good documentation (I might have overlooked it, but I can't find the properties for trees like 'leaf', 'iconCls' etc, the search bar on top is not clickable. Slow loading, host not reachable sometimes).
At least I'm glad I haven't bought a license yet and that I have not committed myself for any clients to use ExtJs-4.
The framework is very promissing, but a lot of bugs should be fixed really quick before people running away and use something else less buggy. I also bought ExtDesigner some time ago, but no support for 4.0 when ExtJS 4 is released also makes me sad (I know it's coming, but when? and probably with a lot of errors again and likely no MVC structure possibility)

I still like the effort the Dev team puts in and ExtJs in general. It's visually the best javascript framework and I am a fan from the beginning. So keep up the good work and I'm sure a lot of bugs will be fixed in the forthcoming 4.0.1. I just can't wait till it's released!

Maurice.

[Nickname]

Had the same problem with releases before beta3. At this time regStore was not deprecated, but the problem is the same.
No one from Sencha gave a hint or marked this as a bug and I'm tired to push the thread.
Perhaps you have more luck than I have

[wcravens]

The following demonstrates the getRootNode failure using the examples/app/simple application:

diff --git a/app/store/Users.js b/app/store/Users.js
index fbf8f55..c4de03d 100644
--- a/app/store/Users.js
+++ b/app/store/Users.js
@@ -1,5 +1,5 @@
 Ext.define('AM.store.Users', {
-    extend: 'Ext.data.Store',
+    extend: 'Ext.data.TreeStore',
     model: 'AM.model.User',
     autoLoad: true,
     
@@ -15,4 +15,4 @@ Ext.define('AM.store.Users', {
             successProperty: 'success'
         }
     }
-});
\ No newline at end of file
+});
diff --git a/app/view/user/List.js b/app/view/user/List.js
index 731a1d9..7c684fc 100644
--- a/app/view/user/List.js
+++ b/app/view/user/List.js
@@ -1,5 +1,5 @@
 Ext.define('AM.view.user.List' ,{
-    extend: 'Ext.grid.Panel',
+    extend: 'Ext.tree.Panel',
     alias : 'widget.userlist',
 
     title : 'All Users',

The workaround for this (for me) was to create the TreeStore inline with the TreePanel. However even then it doesn't seem to firing loads for 'ajax'/'rest' proxies.

[mxracer]

I have been creating an app while looking to the MVC guide for instruction and I ran into this issue as well. My solution for now (not sure if its correct for long term) is in code below.

Define my store in app/store/Folders.js

Ext.define('MY.store.Folders', {
    extend: 'Ext.data.TreeStore',
    folderSort: true,
    proxy: {
        extraParams: {
            c: 'folders_controller',
            m: 'get'
        },
        type: 'ajax',
        url: 'server/index.php'
    },
    sorters: [
        {
            property: 'sort_order',
            direction: 'ASC'
        }
    ]
});

Now define my tree in app/view/folder/Tree.js

Ext.define('MY.view.folder.Tree', {
    extend: 'Ext.tree.Panel',
    ...
    initComponent: function () {
        this.store = Ext.create('MY.store.Folders', {
            listeners: {
                load: {
                    fn: this.onFoldersLoad,
                    scope: this
                }
            },
            root: {
                text: 'My Root',
                expanded: true
            }
        });

        this.callParent(arguments);
    },
    ...
});

[wcravens]

The trick is to have some root configuration in the TreePanel (even if blank).

See: http://www.sencha.com/forum/showthre...pported-in-MVC

Ext.define('MyTree', {
    extend:  'Ext.tree.Panel',
    store:    'MyTreeStore'
    ...
    //KLUDGE : Workaround for this thread
    root: { }
});

[mohanimus]

From the API Docs:

 
root : Boolean
 
Allows you to not specify a store on this TreePanel. This is useful for creating a simple tree with preloaded data without having to specify a TreeStore and Model. A store and model will be created and root will be passed to that store.

The above approaches (specifying a root config or instantiating the store in the view) seem to violate the intent of the MVC approach where stores are created in the controller.

It makes sense to me to have some partial definition of the root node that is used for the initial request from the store. However when I try this approach (letting the controller instantiate the store) it appears to be creating a store without a getRootNode method.

[mohanimus]

For even more giggles...

I have defined a store that extends TreeStore, a panel that extends TreePanel and have wired it all up according to the MVC intro docs. This produces the error "me.store.getRootNode is not a function" as described above.

However, in the firebug console "Ext.StoreManager.lookup('MyStore').getRootNode()" returns a well formatted node object.

[mohanimus]

Finally got it working almost to my satisfaction.

Note for reference I am working with an inline store (specifying it's data with a root config) as opposed to a remoting store for which the empty root in the panel config may be more elegant.

My fix is a simple modification of the initComponent creation version above.

 
Ext.define('MY.view.MyTree', {
    extend: 'Ext.tree.Panel',
    store: 'MyStore',
    initComponent: function () {
        this.store = Ext.StoreManager.lookup(this.store);
        this.callParent(arguments);
    }
});

This does however allow you to use the store created in the controller

Now on to working out how to fix the width of this panel when you put it in an Accordion >.<

[bas_tzx]

I also struggled with the TreePanel, MVC and Stores in the beginning. The solution is to include a reference to your store in the Controller and have a rootNode defined in the View (treePanel). Just follow the latest MVC guide which you can find in the API docs.

// Define the Store
Ext.define('My.store.Folders', {
    extend: 'Ext.data.TreeStore',
        
    proxy: {
        type: 'ajax',
        url: 'folders/tree.php'
    }
});

// Define the View
Ext.define('My.view.folders.Tree', {
    extend: 'Ext.tree.Panel',
    alias: 'widget.foldertree',
    
    // Define root here as a workaround
    root: {
        text: 'root node'
    },
    rootVisible: false,

    store: 'Folders', // The store loaded by the Controller
 
    initComponent: function () {
        // Do something here

        this.callParent(arguments);    
    }
});

// Define the controller
Ext.define('My.controller.Folders', {
    extend: 'Ext.app.Controller',
    
    // Stores to load
    stores: ['Folders'], 

    // Views to load
    views: [
        'folders.Tree'
    ],

    init: function () {
       // Control
        this.control({
            'foldertree': {
                'itemclick': this.openItem
            }
        });
    },
    
    openItem: function() {}
}); 

[wcravens]

bas_tzx: Would you mind referencing the 'MVC Guide' more specifically? I couldn't/can't find a MVC TreePanel/TreeStore example in the guide/s anywhere.

Typically I reference local documentation and expect the online docs to also remain in static until a new release is available for download (but I can understand why this may not be the Sencha strategy). So I double checked the current online docs and I still can't seem to find a MVC example of a TreePanel/TreeStore.

Thanks.