Extjs 4.1 3個組件的可滾動佈局

Question

我在一個Panel（region : west）中有一個formPanel和兩個tabPanel。我的「TabPanel 1」具有動態高度（取決於選定的組合框），因此高度必須是自動的。 TabPanel 2不必。我試圖layout : anchor以及佈局：{ xtype : 'vbox', align : 'stretch', pack: 'start'}但它不工作，在一個tabpanel 1中的元件由一個tabpanel 2.

這裏隱藏是用於面板的代碼：

var West_panel = Ext.create('Ext.Panel', { 
      id : 'West_panel_id', 
      region : 'west', 
      header : false, 
      collapsible : true, 
      autoScroll : true, 
      // layout : 'fit', 
      layout:{ 
       type:"vbox", 
       pack:"start", 
       align:"stretch" 
      }, 
      // autoHeight: true, 
      // height : 400, 
      width : 270, 
      split: true, 
      defaults : { 
       autoScroll : true 
      }, 
      // items: [selectPanel,treeServices] 
      items: [selectPanel,tabs, tabsSouth],..... 

第一個和第二個tabpanel代碼：

var tabs = new Ext.create('Ext.tab.Panel',{ 
    activeTab: 0, 
    width : 270, 
    // anchor : '100%, 25%', 
    height : 400, 
    // autoHeight: true, 
    autoScroll : true, 
    scrollable : true, 
    flex : 1, 
    items:...... 

Answer 1

如果您使用西部地區vbox佈局，它應該按您的要求工作。

我嘗試建立這種佈局在此琴：https://fiddle.sencha.com/#fiddle/23c

 Ext.create('Ext.container.Viewport', { 
     layout: 'border', 
     items: [ 
      { 
       xtype: 'container', 
       region: 'west', 
       layout: { 
        type: 'vbox', 
        align: 'stretch' 
       }, 
       title: 'West', 
       width: 250, 
       items: [ 
        { 
         title: 'Form panel', 
         xtype: 'panel', 
         flex: 1 
        }, 
        { 
         title: 'Tab panel 1', 
         xtype: 'tabpanel', 
         flex: 1, 
         items: { 
          xtype: 'panel', 
          autoScroll: true, 
          title: 'First Tab', 
          html: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Praesent in mauris eu tortor porttitor accumsan. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Aliquam ornare wisi eu metus. Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. Pellentesque arcu. In convallis. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nulla pulvinar eleifend sem. Curabitur vitae diam non enim vestibulum interdum. Fusce suscipit libero eget elit. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Nunc tincidunt ante vitae massa. Fusce consectetuer risus a nunc. ' 
         } 
        }, 
        { 
         title: 'Tab panel 2', 
         xtype: 'tabpanel', 
         flex: 1 
        } 
       ]     
      }, 
      { 
       region: 'center', 
       xtype: 'panel', 
       title: 'Center', 
       html: 'Center content' 

      } 
     ] 
    });