关于asp.net mvc：ExtJS TreeGrid MVC-未加载


ExtJS TreeGrid + MVC - not loading

我已经阅读了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)的帮助下建立一个treegrid。

我不知道为什么，但是似乎根本没有加载。它永远不会达到Ext.application中的启动功能，我假设它与控制器配置不正确有关，但是Firebug在控制台上没有显示任何错误，因此我有点迷失了。

对于它的价值，我自己复制并加载了TreeGrid示例，它可以正常工作，因此它不是ExtJS错误/服务器配置问题，就像我认为的那样，是从该线程进行的：获取Sencha ExtJS TreeGrid所需的配置示例工作

我的代码：
main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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

1
2
3
4
5
6
7
8
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

1
2
3
4
5
6
7
8
9
10
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{"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
            }]
    }
]}

与我的同事一起运行后，事实证明我不是在命名我的班级名称来匹配我的文件名，例如pr.model.Product应该是pr.model.Model-Product。修复了该问题，现在一切正常。

相关讨论