Re-size panel component to fit screen size

Question

I have added a Panel (i call it My Panel 1), and another panel within this panel (I call it My Panel 2), and then added a grid into the 2nd panel (to My Panel 2). When i click on the Restore Down or the re-sizing button of the browser, it doesn't shrink the components to fit the screen size. How can i solve this ?

Ext.define('MyApp.view.MyPanel', {
    extend: 'Ext.panel.Panel',

    height: 469,
    width: 729,
    title: 'My Panel 1',

    initComponent: function () {
        var me = this;

        Ext.applyIf(me, {
            items: [{
                xtype: 'panel',
                height: 238,
                title: 'My Panel 2',
                items: [{
                    xtype: 'gridpanel',
                    height: 179,
                    title: 'My Grid Panel 1',
                    columns: [{
                        xtype: 'gridcolumn',
                        dataIndex: 'string',
                        text: 'String'
                    }, {
                        xtype: 'numbercolumn',
                        dataIndex: 'number',
                        text: 'Number'
                    }, {
                        xtype: 'datecolumn',
                        dataIndex: 'date',
                        text: 'Date'
                    }, {
                        xtype: 'booleancolumn',
                        dataIndex: 'bool',
                        text: 'Boolean'
                    }],
                    viewConfig: {

                    }
                }]
            }]
        });

        me.callParent(arguments);
    }

});

dbrin dbrin · Accepted Answer · 2012-07-20T17:40:19

I would suggest using a viewport - it automatically adjusts to the "view port" of your browser :) Also do not set fixed width and height if you want them to be managed automatically. Here is a sample: http://jsfiddle.net/dbrin/gWaCv/embedded/result/

Re-size panel component to fit screen size

1 Answers