ExtJS 5 第一步，看不到只有一个存储的简单网格

Question

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

这是我的一组文件：

这里是 JS 资源。

Applications.js

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

Base.js（模型的基础 class）

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 构建应用程序没有错误。但是我没有看到网格。在此之前，我尝试了默认生成的应用程序，它在我的浏览器中显示正常。

谢谢。

Answer 1

这是我的问题的确切答案https://www.sencha.com/forum/showthread.php?299703-ExtJS-5-first-steps-cannot-see-a-simple-grid-with-one-store&p=1095022&viewfull=1#post1095022

ExtJS 5 第一步，看不到只有一个存储的简单网格

ExtJS 5 first steps, cannot see a simple grid with one store

javascript

extjs

mvvm