错误的ExtJS5网格渲染

Question

学习ExtJS5我有一个关于网格的问题。我有这样的面板描述：

{
                xtype: 'tabpanel',
                items: [
                    {
                        title: 'Texts',
                        xtype: 'gridpanel',
                        reference: 'textGrid',
                        store: Ext.create('Ext.data.Store', {
                            fields: ['active', 'textValue'],
                            data: {
                                items: [
                                    {active: true, textValue: 'test'},
                                    {active: false, textValue: 'no test'}
                                ]
                            },
                            proxy: {
                                type: 'memory',
                                reader: {
                                    type: 'json',
                                    rootProperty: 'items'
                                }
                            }
                        }),
                        columns: [
                            { xtype: 'checkcolumn',
                                text: 'Enable', dataIndex: 'active', width: 100,
                                editor: {
                                    xtype: 'checkbox',
                                    cls: 'x-grid-checkheader-editor'
                                }
                            },
                            { text: 'Value', dataIndex: 'textValue', flex: 1,
                                editor: {
                                    xtype: 'textfield',
                                    allowBlank: false
                                }
                            }

                        ],
                        plugins: {
                            ptype: 'rowediting',
                            clicksToEdit: 1
                        }
                    },
                    {
                        title: 'Images',
                        xtype: 'gridpanel'
                    }
                ]
            }

但它呈现了错误。我没有看到复选框，文本列的区域太小。firebug控制台中没有任何错误。

​

​

代码有什么问题？

谢谢。

Answer 1

我也遇到过这个问题，看起来有时候在你的类中缺少需求的时候就会发生这种情况。

查看控制台中是否有类似以下的警告：

[Ext.Loader] Synchronously loading 'Ext.layout.container.Border'; consider adding  Ext.require('Ext.layout.container.Border') above Ext.onReady

并将缺少的类添加到使用它们的类的requires数组中，如下所示：

Ext.define('Test.view.main.Main', {
    extend: 'Ext.container.Container',
    requires: [
        'Ext.layout.container.Border',
        'Ext.tab.Panel'
    ],
    ...

Answer 2

缺少样式。

如果您使用Sencha命令创建了proyect (您正在使用microloader bootstrap加载proyect，请参阅您的index.html)，那么您必须确保您已经定义了您在应用程序上使用的所有组件要求，并从根目录启动此命令：

sencha app build

此命令编译将在您的应用程序上使用的css (以及其他内容)。你也可以试试：

sencha app refresh

如果最新的两个命令不起作用，则使用最新的两个命令(两者都使用)：

sencha app clean
sencha app build

希望它能起作用