Sencha觸摸2和浮動，彎曲面板

我遇到Sencha觸摸2和vbox彎曲問題。這裏是我的小組代碼（修改爲簡單起見，真正的面板是更加複雜的，但是這是它歸結爲）：Sencha觸摸2和浮動，彎曲面板

Ext.define('risbergska2.view.Test', { 
extend: 'Ext.Panel', 
xtype: 'test', 


config: { 
    title: 'Test', 
    iconCls: 'home', 

    items: [ 
     { 
      xtype: 'container', 
      layout: 'vbox', 
      items: [ 
       { 
        xtype: 'container', 
        flex: 2, 
        style: 'background-color: #f90;' 
       }, 
       { 
        xtype: 'container', 
        flex: 1, 
        style: 'background-color: #9f0;' 
       }, 
       { 
        xtype: 'container', 
        flex: 1, 
        style: 'background-color: #0f9;' 
       }, 
       { 
        xtype: 'container', 
        flex: 2, 
        style: 'background-color: #90f;' 
       } 
      ] 
     } 
    ] 
}

}）

這裏是我的Main.js：

Ext.define("risbergska2.view.Main", { 
extend: 'Ext.tab.Panel', 
requires: [ 
    'Ext.TitleBar', 
    'Ext.Video' 
], 
config: { 
    tabBarPosition: 'bottom', 

    items: [ 
     { 
      xtype: 'homeloggedinview' 
     }, 
     { 
      xtype: 'myview' 
     }, 
     { 
      xtype: 'programview' 
     }, 
     { 
      xtype: 'socialview' 
     }, 
     { 
      xtype: 'aboutview' 
     }, 
     { 
      xtype: 'test' 
     } 
    ] 
}

}）;

我app.js：

Ext.application({ 
name: 'risbergska2', 

requires: [ 
    'Ext.MessageBox' 
], 

views: ['Main', 'HomeLoggedIn', 'My', 'Program', 'Social', 'About', 'Test'], 

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

    // Initialize the main view 
    Ext.Viewport.add(Ext.create('risbergska2.view.Main')); 
}, 

onUpdated: function() { 
    Ext.Msg.confirm(
     "Application Update", 
     "This application has just successfully been updated to the latest version. Reload now?", 
     function(buttonId) { 
      if (buttonId === 'yes') { 
       window.location.reload(); 
      } 
     } 
    ); 
}

}）;

如果我運行此代碼並轉到測試面板，則不顯示任何內容。我希望它（在測試案例中）顯示四種不同的容器，其中有四種不同的顏色，頂層和底層是中間層的兩倍。

這不是獲得該結果的方法嗎？我哪裏錯了？

謝謝！

來源

2012-09-19 Daniel Engdahl

我很困惑，爲什麼這個問題有什麼關係的Flex。 – JeffryHouser

該問題直接與Sencha Touch中面板的「flex」屬性有關。它與Adobe的Flex無關。我很抱歉你的困惑。 –

組佈局：「適合」的risbergska2.view.Test

Ext.define('risbergska2.view.Test', { 
extend: 'Ext.Panel', 
xtype: 'test', 


config: { 
    title: 'Test', 
    iconCls: 'home', 
    layout : 'fit', 
    items: [ 
     { 
      xtype: 'container', 
      layout: 'vbox', 
      items: [

來源

2012-09-19 10:13:01

不幸的是，這是行不通的。我之前嘗試過，雖然我認爲它應該根據Sencha的文檔工作，但事實並非如此。也許別的什麼是我的代碼錯了......但我不知道我錯過了什麼。這看起來很瑣碎，所以它真的讓我惱火！ –

我測試你的risbergska2.view.Test作爲主應用程序視圖，它工作正常，如果添加到配置佈局：'fit'。爲了測試，你可以把你的視圖放在視口中。在app.js launch：function（）{ //銷燬#appLoadingIndicator元素 Ext.fly（'appLoadingIndicator'）。destroy（）; Ext.Viewport.add（{xtype：'test' }）; }控制檯輸出是否爲空？ –

我已經添加了測試面板作爲我的TabPanel中的最後一個元素，應該是同樣的事情。出於測試目的，我將啓動面板更改爲我的測試面板，正如您在這裏所建議的那樣，但它仍然沒有顯示任何內容我的意思是面板加載，但它沒有任何顯示，只是一個灰色的背景和底部TabPanel已經消失，因爲它被加載到我的Main.js. –

Sencha觸摸2和浮動，彎曲面板

回答

相關問題