ExtJS TreeGrid + MVC - 로딩되지 않습니다.

Question

MVC 소개 (http://dev.sencha.com/deploy/ext-4.0.7-gpl/docs/index.html#!/guide/application_architecture)를 가져 와서 여기에서 예제 (http://dev.sencha.com/deploy/ext-4.0.0/examples/tree/treegrid.html)의 도움으로 트리 그리드를로드하려고 수정했습니다.

왜 그런지 모르지만 전혀로드되지 않는 것 같습니다. 그것은 Ext.application의 launch 함수에 도달하지 못합니다. 컨트롤러에 제대로 설정되지 않았다고 가정하고 있지만 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

012 3,516,

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 여야합니다. 이 문제가 해결되어 이제는 모두 작동합니다.