ExtJS TreeGrid + MVC - 不加载

Question

我已经采取了MVC的介绍（http://dev.sencha.com/deploy/ext-4.0.7-gpl/docs/index.html#!/guide/application_architecture），并试图修改它来加载一个treegrid，而在这里的例子（http://dev.sencha.com/deploy/ext-4.0.0/examples/tree/treegrid.html）的帮助下。

我不知道为什么，但它似乎并没有加载。它从来没有达到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' 
      }] 
     }); 
    } 
}); 

控制-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); 
    } 
}); 

模型Product.js

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

商店，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。修正了这一切，现在都在工作。