Question

I’ve taken the MVC introduction (http://dev.sencha.com/deploy/ext-4.0.7-gpl/docs/index.html#!/guide/application_architecture) and tried to modify it to load up a treegrid instead, with help from the example here (http://dev.sencha.com/deploy/ext-4.0.0/examples/tree/treegrid.html).

I don’t know why, but it doesn’t seem to load at all. It never reaches the launch function in Ext.application, I’m assuming it has something to do with the controller not being configured properly, but Firebug isn’t showing any errors on the console, so I’m a bit lost.

For what it’s worth, I’ve copied and loaded the TreeGrid example myself and it works, so it’s not a ExtJS bug/server config problem, like I thought it would be from this thread: Configuration required to get Sencha ExtJS TreeGrid example working

My code:
main.js

Ext.Loader.setConfig({ enabled: true });

Ext.require([
    'Ext.data.*',
    'Ext.grid.*',
    'Ext.tree.*'
]);

Ext.application({
    name: 'pr',

    appFolder: '', //This is considered root so no name needs to be supplied.

    controllers: [
        'Control-Product' //filename
    ],

    launch: function () {
        console.log('The app was launched');
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [{
                xtype: 'treegrid'
            }]
        });
    }
});

Control-Product.js

Ext.define('pr.controller.Product', {
    extend: 'Ext.app.Controller',
    views: ['user.TreeGrid'],
    stores: ['Store-Products'],
    models: ['Model-Product'],

    init: function () {
        console.log('The controller was instantiated');
        this.control({
            'viewport > panel': {
                render: this.onPanelRendered
            }
        });
    },
    onPanelRendered: function () {
        console.log('The panel was rendered');
    }    
});

TreeGrid.js

Ext.define('pr.view.user.TreeGrid', {
    extend: 'Ext.tree.Panel',
    alias: 'widget.treegrid',

    initComponent: function () {
        this.title = 'Products',
        this.store = 'pr.store.Products',
        this.collapsible = true,
        this.useArrows = true,
        this.rootVisible = false,
        this.multiSelect = true,
        this.singleExpand = false,
        //this.renderTo = Ext.getBody(),
        this.columns = [{
            xtype: 'treecolumn', 
            text: 'ID',
            flex: 1,
            dataIndex: 'ID',
            sortable: true
        },
        {
            text: 'Price',
            flex: 1,
            dataIndex: 'Price',
            sortable: true
        },
        {
            text: 'Company',
            flex: 1,
            dataIndex: 'Company',
            sortable: true
        }];

        this.callParent(arguments);
    }
});

Model-Product.js

Ext.define('pr.model.Product', {
    extend: 'Ext.data.Model',
    fields: [
            { name: 'ID', type: 'string' },
            { name: 'Price', type: 'string' },
            { name: 'Company', type: 'string' }
        ]
});

Store-Products.js

Ext.define('pr.store.Products', { 
    extend: 'Ext.data.TreeStore',
    model: 'pr.model.Product',
    proxy: {
        type: 'ajax',
        //get data from json file for now
        url: '/data/products.json'
    },
    folderSort: true
});

products.json

{"text":".","children": [
    {
        ID:'1111',
        Price:'11.11',
        Company:'Company1',        
        expanded: true,
        children:[{
            ID:'',
            Price:'44.44',
            Company:'Company2', 
            leaf:true
            }]        
    },{
        ID:'2222',
        Price:'22.22',
        Company:'Company1',        
        expanded: true,
        children:[{
            ID:'',
            Price:'33.33',
            Company:'Company3', 
            leaf:true
            }] 
    }
]}

Answer 1

After running it through with my colleague it turns out I was not naming my classnames to match my filenames e.g. pr.model.Product should be pr.model.Model-Product. Fixed that and it’s all working now.