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); 
    } 
});