ExtJS TreeGrid + MVC -未加载

Question

在这里的例子(http://dev.sencha.com/deploy/ext-4.0.0/examples/tree/treegrid.html)的帮助下，我采用了MVC介绍(http://dev.sencha.com/deploy/ext-4.0.7-gpl/docs/index.html#!/guide/application_architecture)并尝试修改它，以加载一个树网格。

我不知道为什么，但它似乎一点也不能加载。它永远不会到达Ext.application中的启动功能，我认为这与控制器没有正确配置有关，但Firebug在控制台上没有显示任何错误，所以我有点迷路。

无论如何，我自己复制并加载了TreeGrid示例，并且它可以正常工作，所以它不是ExtJS错误/服务器配置问题，正如我认为的那样，它来自这个线程：Configuration required to get Sencha ExtJS TreeGrid example working

我的代码: 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

在和我的同事一起运行之后，我发现我没有命名我的类名来匹配我的文件名，例如pr.model.Product应该是pr.model.Model-Product。修复了这个问题，现在一切都正常了。