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。修复了这一切，现在一切正常。

ExtJS TreeGrid + MVC - 没有加载

1 个答案: