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布局，使您的组件填充剩余空间。