1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    3
    Vote Rating
    0
    landyman is on a distinguished road

      0  

    Default Answered: Grid Panel doesn't show

    Answered: Grid Panel doesn't show


    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.

  2. 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?

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Answers
    3447
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Not without code.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    3
    Vote Rating
    0
    landyman is on a distinguished road

      0  

    Default


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

    designer.js
    Code:
    /*
     * 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
    Code:
    /*
     * 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
    Code:
    /*
     * 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
    Code:
    /*
     * 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)]);
        }
    });

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Answers
    3447
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #5
    Sencha User
    Join Date
    Dec 2011
    Posts
    3
    Vote Rating
    0
    landyman is on a distinguished road

      0  

    Default


    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!!

Thread Participants: 1