如何縮小窗體組件以適應瀏覽器窗口

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