Synchronously loading 'MyApp.store.TreeStructures'; consider adding Ext.require('MyApp.store.TreeStructures') above Ext.onReady

Question

Below, you will see that I'm getting a JavaScript exception with an MVC view I created in an Sencha ExtJS MVC application. I have another MVC view that extends 'Ext.tree.Panel' that reads a simple JSON object instead of pulling the data via an Ext.Direct proxy and .NET server-side stack, but the only thing that's different is the proxy implementation and of course our MVC controller logic. In the static (JSON) implementation, our proxy is defined in the model. In the dynamic (Ext.Direct) implementation, our proxy is defined in the store. The TreeStructures.js (store) JavaScript file keeps being requested an infinite amount of times until the browser crashes. See below for that exception.

I highly doubt this is an Ext.Direct issue because I have other stores working great with this architecture. I see the [Ext.Loader] exception, but I'm not sure why that one keeps repeating with every new TreeStructures.js request. Or where to implement that requires. My understanding is that the app.js defines the controllers. The controller then defines the models an stores. And the Viewport defines and instantiates other MVC views. My "other views" being the tree views. And the view implements the store.

Also, the Sencha Cmd "sencha app build" command is not working. Normally my application compiles without any issues, so something is definitely missing in the store or MVC configuration that's necessary for this dynamic tree.

Exception in JavaScript Console:

[Ext.Loader] Synchronously loading 'MyApp.store.TreeStructures'; consider adding Ext.require('MyApp.store.TreeStructures') above Ext.onReady

Browser crashes with this JavaScript Exception:

Note: The TreeStructures.js (store) JavaScript file keeps being requested an infinite amount of times until the browser crashes with this:

Uncaught RangeError: Maximum call stack size exceeded

Sencha Cmd errors (after calling the "sencha app build" command):

[ERR] failed to find meta class definition for name MyApp.store.TreeStructures
[ERR] def was null
[ERR] C2008: Requirement had no matching files <MyApp.store.TreeStructures> -- unknown-file:-1

Static tree implementation (reads JSON object to get data):

Ext.define('MyApp.store.Categories', {
    extend : 'Ext.data.TreeStore',
    model : 'MyApp.model.Category',
    autoLoad : true,
    root : {
        text : 'All',
        alias : '',
        expanded : true
    }
});

Ext.define('MyApp.model.Category', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'alias', type: 'auto' },
        { name: 'text', type: 'auto' }
    ],

    proxy: {
        type: 'ajax',
        url: 'data/categories.json'
    }
});

Ext.define('MyApp.controller.ConceptTreeReadonly', {
    extend : 'Ext.app.Controller',
    stores: ['Categories'],
    models: ['Category'],
    refs : [{
        ref: 'categories',
        selector: 'view-west'
    }],
});

Dynamic tree implementation (uses server-side stack to get data):

Ext.create('MyApp.store.TreeStructures', {
    extend: 'Ext.data.TreeStore',
    model : 'MyApp.model.TreeStructure',
    proxy: {
        type: 'direct',
        directFn: Concept_Tree_Structure.read,
        reader: {
            root: 'data'
        }
    },
    root: {
        text: 'Concept Tree',
        id: 'root',
        expanded: false
        //children: []
    },
    autoLoad: false
});

Ext.define('MyApp.model.TreeStructure', {
    extend: 'Ext.data.Model',
    xtype: 'model-tree-structure',

    fields: [
        { name: 'text' }, //  string                    
        { name: 'id' }, // Int32    type: 'int'
        { name: 'expanded' }, // boolean                   
        { name: 'leaf' }, // boolean       
        { name: 'children' } // List<TreeStructure>            
    ]
});

Ext.define('MyApp.controller.ConceptTreeController', {
    extend : 'Ext.app.Controller',

    stores: ['TreeStructures', 'Concepts'],
    models: ['TreeStructure', 'Concept'],

    refs : [{
        ref: 'concept-tree',
        selector: 'view-concept-tree'
    }],
    init : function() {

        this.getConceptsStore().load({
            params: {
                start: 0, 
                limit: 10,
                foo: 'bar'
            }
        });

        this.getTreeStructuresStore().load({
            params: {
                start: 0,
                limit: 10,
                foo: 'bar'
            }
        });
    }
});

Looks like its because you are doing an Ext.create instead of Ext.define on your TreeStructures store. — bakamike
Feel free to make this the answer. You're a life saver. I think I just need some sleep! — MacGyver
Just for the record, requirejs is another lib that specifically handles dynamic file inclusion. It has nothing to do with ExtJS except for the underlying concepts. — rixo

bakamike bakamike · Accepted Answer · 2013-08-05T22:09:40

Change Ext.create('MyApp.store.TreeStructures'...

To Ext.define('MyApp.store.TreeStructures'...