sencha touch 2：旋轉木馬的一個面板內的卡布局

Question

我在這裏要做的是在旋轉木馬的面板內使用卡布局。但似乎不可能的是，創建卡片佈局並不常見，而傳送帶實際上是卡片佈局類容器之一。所以我想如果能在煎茶觸摸來實現2.

這裏是我的主視圖，一個普通的旋轉木馬容器：

Ext.define("myapp.view.Main", { 
    extend: 'Ext.carousel.Carousel', 

    config: { 

     defaults: { 
      styleHtmlContent : true 
     }, 

     activeItem: 0, 

     items: [ 
      { 
       xtype: 'firstview' 
      }, 
      { 
       xtype: 'secondview' 
      }, 
      { 
       xtype: 'thirdview' 
      } 
     ] 
    } 
}); 

，這裏是我的「的firstView」，它擴展了Ext.Panel爲傳送帶容器的一部分：

Ext.define("myapp.view.Compose", { 
    extend: 'Ext.Panel', 
    xtype: 'firstview', 

    requires: [ 
     'Ext.form.FieldSet', 
     'Ext.TitleBar', 
     'Ext.form.Text', 
     'Ext.Button' 
    ], 

    config: { 
     styleHtmlContent: true, 
     scrollable: true, 
     layout: 'vbox', 

     items: [ 
      { // title bar 
       xtype: 'titlebar', 
       docked: 'top', 
       title: 'a Title here' 
      }, 
      { 
       xtype: 'toolbar', 
       docked: 'top', 
       layout: { 
        type: 'vbox', 
        align: 'center', 
        pack: 'center' 
       }, 

       items: [ 
        { // controll button set - to change view for composing different kinds of messages 
         xtype: 'segmentedbutton', 
         allowDepress: true, 
         allowMultiple: false, 
         items: [ 
          { 
           text: 'subview-1', 
           pressed: true 
          }, 
          { 
           text: 'subview-2' 
          }, 
          { 
           text: 'subview-3' 
          } 
         ] 
        } 
       ] 
      }, 
     { 
      xtype: 'container', 
      id: 'id_compose_card', 
      layout: { 
       type: 'card', 
       align: 'center', 
       pack: 'top' 
      }, 

      config: { 
       height: '100%', 
       items: [ 
       { 
        html: 'card 1' 
       }, 
       { 
        html: 'card 2' 
       } 
      ] 
      } 
     } 
      ] 
     } 

}); 

正如您所見，此面板中有一個卡片佈局。但事實上，沒有什麼不會顯示。

當然，我可以找到另一種方法來實現這裏的一些相似的東西，但我只想知道是不是可以將卡容器嵌入卡片佈局類容器，例如「tabPanel」或sencha touch 2中的'carousel'？

Answer 1

嘿在撰寫部件更換標識的一部分：「id_compose_card」

與此

{ 
    xtype: 'container', 
    id: 'id_compose_card', 
    layout: { 
     type: 'card', 
     align: 'center', 
     pack: 'top' 
    }, 
    flex: 1, 
    items: [ 
     { 
      html: 'card 1' 
     }, 
     { 
      html: 'card 2' 
     } 
    ] 
} 

我剛掏出配置對象內的零件，並把它們之外。我得到這種感覺，你不能嵌套在另一個配置對象的配置類的定義。很多人都有問題，這似乎是問題所在。你可能想在他們的論壇上確認這一點。

然後我也換成了屬性

height: '100%', 

與此

flex:1 

這將告訴VBOX佈局，使您的組件填充剩餘空間。