煎茶觸摸2面板沒有拉伸到全高

我已在煎茶觸摸該應用2
煎茶觸摸2面板沒有拉伸到全高

Ext.application({ 
    name: "SOMENAME", 
    launch: function() { 
     //Ext.Viewport.setLayout({type:'fit',align:'stretch'}); 
     var mainPanel = Ext.create('Ext.Container', { 
      layout: 'vbox', 
      items: [ 
       { 
        xtype: 'panel', 
        layout: { 
         type: 'card', 
         animation: 'slide' 
        }, 
        height: 300, 
        id: 'nooPanel', 
        items: [ 
         { 
          html: 'Page 1' 
         }, 
         { 
          html: 'Page 2 asdasdasd' 
         }, 
         { 
          html: 'Page 3 asdq323434' 
         } 
        ] 
       }, 
       { 
        xtype: 'button', 
        text: 'Next', 
        handler: function (button, e, eOpts) { 
         var panel = Ext.getCmp('nooPanel'); 
         var totalItems = panel.getInnerItems().length; 
         var index = panel.getInnerItems().indexOf(panel.getActiveItem()); 
         panel.setActiveItem((index + 1) % totalItems); 


        } 
       } 
      ] 
     }); 
     Ext.Viewport.add(mainPanel); 
     mainPanel.down('panel').setActiveItem(0); 
    }, 
    init: function() { 
    } 
})

但問題是，如果我不把高度300面板上的佈局card其高度變爲0並且不顯示任何內容
即使在設置佈局以適合視口後，我應該怎麼做？

來源

2012-05-31 Parv Sharma

打井到我發現flex作爲配置的一部分CONFIGS。。
通過此屬性我可以限定容器內部的所有元素的比例具有vbox佈局
所以，如果我設置彎曲以3名不同的項目，如10,1,1然後第一個會佔用空間的(10/(10+1+1))*100 % ..
爲我工作的那種..
但仍在尋找最終答案

來源

2012-05-31 14:07:18

當您將物品放入容器中時，Sencha Touch 2需要知道這些子物品之間的高度比是多少。

如果你想有一個VBOX裏面全高的項目，這個配置添加到該項目，而不是height: 300，使用flex:1

來源

2012-05-31 14:04:29

當您使用'fit'時，您只能在容器中放置一個物品。我添加了一些'flex：'值來給我想要的東西。這裏是代碼，它在SenchaFiddle進行測試。

 
Ext.Loader.setConfig({ 
    enabled: true 
}); 

Ext.application({ 
    name: "SOMENAME", 
    launch: function() { 
     //Ext.Viewport.setLayout({type:'fit',align:'stretch'}); 
     var mainPanel = Ext.create('Ext.Container', { 
      layout: 'vbox', 
      items: [ 
       { 
        xtype: 'panel', 
        flex: 20, 
        layout: { 
         type: 'card', 
         animation: 'slide' 
        }, 
        //height:300, 
        id: 'nooPanel', 
        items: [ 
         { 
          html: 'Page 1', 
          flex:1 
         }, 
         { 
          html: 'Page 2 asdasdasd' 
         }, 
         { 
          html: 'Page 3 asdq323434' 
         } 
        ] 
       }, 
       { 
        xtype: 'button', 
        text: 'Next', 
        flex: 1, 
        handler: function (button, e, eOpts) { 
         var panel = Ext.getCmp('nooPanel'); 
         var totalItems = panel.getInnerItems().length; 
         var index = panel.getInnerItems().indexOf(panel.getActiveItem()); 
         panel.setActiveItem((index + 1) % totalItems); 


        } 
       } 
      ] 
     }); 
     Ext.Viewport.add(mainPanel); 
     mainPanel.down('panel').setActiveItem(0); 
    }, 
    init: function() { 
    } 
})

來源

2012-05-31 14:07:28

煎茶觸摸2面板沒有拉伸到全高

回答

相關問題