ExtJS 5 第一步，看不到一个商店的简单网格答案

【问题标题】：ExtJS 5 first steps, cannot see a simple grid with one storeExtJS 5 第一步，看不到一个商店的简单网格
【发布时间】：2015-06-06 07:46:42
【问题描述】：

我正在尝试熟悉 Ext JS 5。我将 sencha 生成的应用程序作为起点并对其进行修改以查看一条线的网格。但是页面只是空白。谁能告诉我我做错了什么？我不熟悉 MVVM 模式，但我想学习它。

这是我的文件集：

这里是 JS 源代码。

Applications.js

Ext.define('Admin.Application', {
    extend: 'Ext.app.Application',
    name: 'Admin'
});

Base.js（模型的基类）

Ext.define('Admin.model.Base', {
    extend: 'Ext.data.Model',
    schema: {
        namespace: 'Admin.model'
    }
});

Item.js（一个简单的模型）

Ext.define('Admin.model.Item', {
    extend: 'Admin.model.Base',

    fields: [
        { name: 'id', type: 'int' },
        { name: 'title', type: 'string' }
    ]
});

ItemList.js（我想在网格中显示的项目存储）

Ext.define('Admin.store.ItemList', {
    extend: 'Ext.data.Store',

    alias: 'store.itemlist',
    model: 'Admin.model.Item',
    data: [{id: 1, title: 'title1'}]
});

ItemListGrid.js（带有网格的面板）

Ext.define('Admin.view.main.ItemListGrid', {
    extend: 'Ext.grid.Panel',

    requires: [
        'Admin.store.ItemList'
    ],

    alias: 'widget.itemlistgrid',

    bind: {
        store: '{itemlist}',

        title: '<b>Some title</b>',

        columns: [{
            text: 'id',
            dataIndex: 'id'
        },{
            text: 'title',
            dataIndex: 'title'
        }]
    }
});

Main.js

Ext.define('Admin.view.main.Main', {
    extend: 'Ext.container.Container',
    requires: [
        'Admin.view.main.MainController',
        'Admin.view.main.MainModel',
        'Admin.view.main.ItemListGrid'
    ],

    xtype: 'app-main',

    controller: 'main',
    viewModel: {
        type: 'main'
    },

    layout: {
        type: 'border'
    },

    items: [{
        xtype: 'panel',
        //region: 'west',
        width: '100%',
        items: [{
            xtype: 'itemlistgrid'
        }]
    }]
});

MainController.js

Ext.define('Admin.view.main.MainController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.main'
});

MainModel.js

Ext.define('Admin.view.main.MainModel', {
    extend: 'Ext.app.ViewModel',

    alias: 'viewmodel.main',

    data: {
        name: 'Admin'
    },

    bind: {
        store: '{itemlist}'
    }
});

sencha app build 构建应用程序时不会出错。但我没有看到网格。在此之前，我尝试了默认生成的应用程序，它在我的浏览器中显示正常。

谢谢。

【问题讨论】：

标签： javascript extjs mvvm