Sencha：帶有內置tabpanel的可滾動vbox佈局

Question

我剛開始使用Sencha Touch 2.3。

我有一個NavigationView。 它裏面有一個由兩個面板（flex：0）和一個tabpanel（flex：1）組成的視圖（佈局：'vbox'）。該視圖應該是完全可滾動的。

問題是，tabpanel的內容不是完全可見的，也不能填充整個頁面。

如果tabpanel的佈局屬性設置爲'fit'，它的內容顯示正常，整個視圖按照預期滾動，但Tabpanel停止工作。如果我將tabpanel放在外部容器中並將其設置爲'layout：fit'，結果相同。

這是我的代碼的摘錄：

Ext.define('App.view.athletes.Detail', { 
extend: 'Ext.Panel', 
xtype: 'athleteDetail', 

config: { 
    itemId: 'view-athleteDetail', 
    title: '...', 
    layout: 'vbox', 

    items: [ 
     { 
      xtype: 'panel', 
      itemId: 'component-wrapper', 
      scrollable: true, 
      flex: 1 
     } 
    ] 
} 

「內組件的包裝」我動態創建和添加上述3個部分組成：

this.topComponent = Ext.create('Ext.Panel', { 
     flex: 0, 
     layout: 'hbox', 
     items: [ 
      { 
      xtype: 'panel', 
      .... 
      .... 
      }, 
      { 
      xtype: 'panel', 
      .... 
      .... 
      } 
     ] 
}); 

this.baseInfoComponent = Ext.create('Ext.Panel', { 
    flex: 0, 
    html: '...' 
}); 


this.bottomComponent = Ext.create('Ext.TabPanel', { 
     flex: 1, 
     tabBarPosition: 'top', 
     styleHtmlContent : true, 

     items: [ 
      { 
      ........ 
      }, 
      { 
      ........ 
      } 
     ] 
});    

Thanx提前。

乾杯

Answer 1

刪除「component-wrapper」面板。並在「view-athleteDetails」中添加這些動態面板。爲了理解，試試這個：

config: { 
     cls: 'main', 
     itemId: 'view-athleteDetail', 
     title: '...', 
     layout: 'vbox', 

     items: [{ 
      xtype: 'panel', 
      flex: 0, 
      layout: 'hbox', 
      items: [{ 
       xtype: 'panel' 
      }, { 
       xtype: 'panel' 
      }] 
     }, { 
      xtype: 'panel', 
      flex: 0, 
      html: 'O meri jaan' 
     }, { 
      xtype: 'tabpanel', 
      flex: 1, 
      tabBarPosition: 'bottom', 
      styleHtmlContent : true, 

      items: [{ 
       title: 'Home', 
       iconCls: 'home', 
       html: 'Home Screen' 
      }, { 
       title: 'Contact', 
       iconCls: 'user', 
       html: 'Contact Screen' 
      }] 
     }] 
    } 

這適合於整個頁面。

Answer 2

Sencha在設置vbox內部組件的自動高度時有困難。我建議你在切換標籤時手動設置高度。看看activeitemchange的收聽者和fixHeight的功能如下：

Ext.application({ 
    name: 'Test', 

    requires: [ 
     'Ext.MessageBox', 
     'Ext.TitleBar', 
     'Ext.tab.Panel' 
    ], 

    launch: function() { 
     // Destroy the #appLoadingIndicator element 
     Ext.fly('appLoadingIndicator').destroy(); 

     // Initialize the main view 
     Ext.Viewport.add(Ext.create('Ext.Container', { 
      scrollable: 'vertical', 
      layout: 'vbox', 
      items: [{ 
       xtype: 'titlebar', 
       title: 'Test', 
       docked: 'top' 
      }, { 
       xtype: 'panel', 
       height: 100, 
       layout: 'hbox', 
       padding: 10, 
       defaults: { 
        width: 80, 
        margin: '0 5px' 
       }, 
       items: [{ 
        style: { 
         'background-color': '#B1654B' 
        } 
       }, { 
        style: { 
         'background-color': '#F79273' 
        } 
       }, { 
        style: { 
         'background-color': '#FDC08E' 
        } 
       }, { 
        style: { 
         'background-color': '#FFF6B9' 
        } 
       },{ 
        style: { 
         'background-color': '#99D1B7' 
        } 
       }] 
      }, { 
       xtype: 'tabpanel', 
       height: 0, 
       style: { 
        'border': '2px solid #555' 
       }, 
       defaults: { 
        style: { 
         'padding': '10px 5px', 
         'background-color': '#EFFFE0' 
        } 
       }, 
       items: [{ 
        xtype: 'panel', 
        title: 'tab 1', 
        html: 'panel 1<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' 
       }, { 
        xtype: 'panel', 
        title: 'tab 2', 
        html: 'panel 2<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' 
       }, { 
        xtype: 'panel', 
        title: 'tab 3', 
        html: 'panel 3<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.' 
       }], 
       listeners: { 
        activeitemchange: function() { 
         this.fixHeight(); 
        }, 
        scope: this, 
        order: 'after' 
       } 
      }] 
     })); 
     this.fixHeight(); 
    }, 

    fixHeight: function() { 
     var tabPanel = Ext.Viewport.down('tabpanel'), 
      tabBar = tabPanel.down('tabbar'), 
      dh = 10, 
      h; 
     tabPanel.setHeight(0);// reset tab panel height 
     h = tabPanel.getActiveItem().element.dom.scrollHeight + tabBar.element.getHeight() + dh; 
     tabPanel.setHeight(h); 
    } 
});