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控制台中没有任何错误。

Grid

代码有什么问题？

感谢。

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 Command创建了proyect（您正在使用microloader bootstrap加载proyect，请参阅index.html），那么您必须确定已经定义了在应用程序中使用的组件的所有要求并启动了此命令从根目录：

sencha app build

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

sencha app refresh

最新的两个命令，如果最新的不起作用（使用两者）：

sencha app clean
sencha app build

希望它有用

错误的ExtJS5网格渲染

2 个答案: