Grid Panel doesn't show

[landyman]

Hello -
I'm using the Ext Designer and following the tutorial, while adding some things to play around. I have a Tab Panel with a Grid Panel inside the first tab. The Grid Panel is hooked up to a JsonStore.

In the designer, when I click on the Store and load the data, the data comes up fine, and everything is shown nicely. When I export the project, and load it in the browser; the entire Grid Panel doesn't show up at all. There are no errors in Firebug or anything, and the JSON is loading fine for the Store.

Anybody have any ideas of why I can't see the Grid Panel?

Thanks.

[mitchellsimoens]

Not without code.

[landyman]

Sorry, here's the code. It's basically the export from the designer; I haven't modified it.

designer.js

/*
 * File: designer.js
 * Date: Thu Dec 01 2011 15:43:12 GMT-0800 (Pacific Standard Time)
 *
 * This file was generated by Ext Designer version 1.2.2.
 * http://www.sencha.com/products/designer/
 *
 * This file will be auto-generated each and everytime you export.
 *
 * Do NOT hand edit this file.
 */

Ext.Loader.setConfig({
    enabled: true
});

Ext.application({
    name: 'MyApp',

    stores: [
        'ExampleStore'
    ],

    launch: function() {
        Ext.QuickTips.init();

        var cmp1 = Ext.create('MyApp.view.MyTabPanel', {
            renderTo: Ext.getBody()
        });
        cmp1.show();
    }
});

app/view/MyTabPanel.js

/*
 * File: app/view/MyTabPanel.js
 * Date: Thu Dec 01 2011 11:35:54 GMT-0800 (Pacific Standard Time)
 *
 * This file was generated by Ext Designer version 1.2.2.
 * http://www.sencha.com/products/designer/
 *
 * This file will be generated the first time you export.
 *
 * You should implement event handling and custom methods in this
 * class.
 */

Ext.define('MyApp.view.MyTabPanel', {
    extend: 'MyApp.view.ui.MyTabPanel',


    initComponent: function() {
        var me = this;
        me.callParent(arguments);
    }
});

app/view/ui/MyTabPanel.js

/*
 * File: app/view/ui/MyTabPanel.js
 * Date: Thu Dec 01 2011 15:43:12 GMT-0800 (Pacific Standard Time)
 *
 * This file was generated by Ext Designer version 1.2.2.
 * http://www.sencha.com/products/designer/
 *
 * This file will be auto-generated each and everytime you export.
 *
 * Do NOT hand edit this file.
 */

Ext.define('MyApp.view.ui.MyTabPanel', {
    extend: 'Ext.tab.Panel',

    width: 800,
    activeTab: 0,

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'panel',
                    width: 800,
                    layout: {
                        align: 'stretch',
                        type: 'vbox'
                    },
                    title: 'Example Data',
                    items: [
                        {
                            xtype: 'gridpanel',
                            title: 'Example Data',
                            store: 'ExampleStore',
                            flex: 1,
                            columns: [
                                {
                                    xtype: 'datecolumn',
                                    dataIndex: 'Date',
                                    text: 'Date',
                                    format: 'Y-m-d H:i:s'
                                },
                                {
                                    xtype: 'numbercolumn',
                                    dataIndex: 'ExampleMetric',
                                    text: 'Example Metric'
                                },
                                {
                                    xtype: 'numbercolumn',
                                    dataIndex: 'ExampleMetric2',
                                    text: 'Example Metric 2'
                                }
                            ],
                            viewConfig: {

                            }
                        }
                    ]
                },
                {
                    xtype: 'panel',
                    title: 'Signups By Code'
                },
                {
                    xtype: 'panel',
                    title: 'Tab 3'
                }
            ]
        });

        me.callParent(arguments);
    }
});

app/store/ExampleStore.js

/*
 * File: app/store/ExampleStore.js
 * Date: Thu Dec 01 2011 15:43:12 GMT-0800 (Pacific Standard Time)
 *
 * This file was generated by Ext Designer version 1.2.2.
 * http://www.sencha.com/products/designer/
 *
 * This file will be auto-generated each and everytime you export.
 *
 * Do NOT hand edit this file.
 */

Ext.define('MyApp.store.ExampleStore', {
    extend: 'Ext.data.Store',

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            autoLoad: true,
            storeId: 'ExampleStore',
            proxy: {
                type: 'ajax',
                url: 'example.json',
                reader: {
                    type: 'json',
                    root: 'data'
                }
            },
            fields: [
                {
                    dateFormat: 'Y-m-d H:i:s',
                    name: 'Date',
                    type: 'date'
                },
                {
                    name: 'ExampleMetric',
                    type: 'float'
                },
                {
                    name: 'ExampleMetric2',
                    type: 'int'
                }
            ]
        }, cfg)]);
    }
});

[mitchellsimoens]

MyApp.view.ui.MyTabPanel class is actually overnesting the gridpanel. The MyApp.view.ui.MyTabPanel has 3 items, each are a Panel. The grid is the only child of the first Panel except the grid doesn't need to be nested within the Panel.

That being said, the grid should be sized as the full height and width of the panel that wraps it. I wouldn't use vbox layout and set flex to one on the grid... I would remove the flex from the grid and use layout : 'fit' on the panel if the grid is going to be the only item of that panel.

Are you sure the Store has data in it?

[landyman]

Thanks for your quick response.
Setting the height on the Grid Panel worked. I thought if I left it blank that it would just inherit the property from the parent. But, everything works as expected now.
Thanks!!