Wrong ExtJS5 Grid render

Question

Learning ExtJS5 I have a problem with grid. I have such panel description:

{
                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'
                    }
                ]
            }

But it's rendered wrong. I don't see a checkbox and area for text column is too small. There're no any errors in firebug console.

Grid

What's wrong with code?

Thanks.

Doesn't seem to be anything wrong with your code, it works as it is when copied into a Sencha fiddle. Apparently you're missing some CSS for the grid though. — rixo

Kana Kana · Accepted Answer · 2014-07-23T14:14:03

I had this problem too and it looks like this sometimes happens when there are requires missing in your classes.

Look into the console for warnings like these:

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

And add the missing classes to the requires array of the class that uses them like this:

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

Wrong ExtJS5 Grid render

2 Answers