How to shrink form components to fit in the browser window

Question

I have a Tab Panel and in that i have added a grid Panel. Now when i re-size my browser window (as in make it small), i want the grid columns and all other components to be shrinked and adjust the sizes so it would show the view in any window size. how can i do this ?

I am using sencha-architect2

Ext.define('App.view.ExView', {
    extend: 'Ext.tab.Panel',

    autoRender: true,
    autoShow: true,
    frame: true,
    height: 600,
    id: 'mainpanel',
    width: 1360,
    maintainFlex: false,
    suspendLayout: false,
    hideCollapseTool: false,
    title: 'Example Project',
    titleCollapse: false,
    activeTab: 0,
    plain: true,
    fullscreen: 'true',

GRID

items: [
                        {
                            xtype: 'gridpanel',
                            autoShow: true,
                            height: 100,
                            minHeight: 40,
                            minWidth: 50,
                            autoScroll: true,
                            title: 'Grid',
                            store: 'storegrid',
                            layout: {
                                type: 'fit'
                            },
                            viewConfig: {

                            },
                            columns: [
                                {
                                    xtype: 'gridcolumn',
                                    maintainFlex: false,
                                    dataIndex: 'name',
                                    flex: 1,
                                    text: 'name'
                                },
                                {
                                    xtype: 'gridcolumn',
                                    maintainFlex: false,
                                    dataIndex: 'age',
                                    flex: 1,
                                    text: 'age'
                                }
                            ]
                        }
                    ]
                }
            ]
        });

Answer 1

use anchor layout to your container

This is a layout that enables anchoring of contained elements relative to the container's dimensions. If the container is resized, all anchored items are automatically rerendered according to their anchor rules.

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.layout.container.Anchor