如何缩小窗体组件以适应浏览器窗口

Question

我有一个选项卡面板，并且我添加了一个网格面板。现在，当我重新调整浏览器窗口的大小（如缩小）时，我希望网格列和所有其他组件都缩小并调整大小，以便以任何窗口大小显示视图。我怎样才能做到这一点 ？

我使用煎茶，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

使用锚的布局，您的容器

这是一个布局，使相对于容器的尺寸所包含的元素锚固。如果容器被调整大小，所有锚定的项目将根据其锚定规则自动重新渲染。

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