如何收缩表单组件以适应浏览器窗口

Question

我有一个选项卡面板，在其中我添加了一个网格面板。现在，当我重新调整浏览器窗口的大小时（如使其变小），我希望轴网柱和所有其他构件收缩并调整大小，使其以任何窗口大小显示视图。我该怎么做？

我正在使用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',

栅格

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

使用容器的锚点布局

这是一种布局，可以相对于容器的尺寸锚定包含的元素。如果调整容器的大小，则所有锚定的项目都会根据其锚定规则自动重新绘制。

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