子面板不可见

Question

我想在面板内添加一个面板，但子面板始终处于隐藏状态。检查萤火虫我发现子面板的内容是存在的，但是因为它的宽度/高度没有设置，所以它不可见。这里是我的父面板

...{ 
    items: [subCards] 
}... 

这里是我的子卡

var subCards = Ext.create('Ext.Panel', { 
    layout : { 
     type : 'card', 
     animation : { 
      type : 'slide', 
      direction: 'left' 
     } 
    }, 
    activeItem: 0, 
    items: [ 
     { 
      style: "background-color: #3f3f3f;", 
      html: 'Wellcome screen' 
     }, 
     { 
      style: "background-color: #3f3f3f;", 
      html: 'SEcond screen' 
     }, 
     { 
      html: "third screen" 
     }, 
     { 
      html: '4th screen' 
     } 
    ] 
}); 

Answer 1

如果使用card layout你只能有一个activeItem。

尝试创建一个Viewport这样的：

Ext.define('MyApp.view.Viewport', { 
extend : 'Ext.Container', 
xtype : 'myapp-viewport', 

config : { 
    fullscreen : true, 
    layout  : 'card', 
    items  : [ 
     /** 
     * Here you can specify any items on the top toolbar 
     */ 
     { 
      xtype  : 'toolbar', 
      docked  : 'top', 
      title  : 'Title', 
      defaultTitle : 'Title', 
      items  : [ 
       { 
        text : 'Back', 
        ui  : 'back', 
        hidden : true 
       } 
      ] 
     }, 
     /** 
     * Here you can specify any items on the bottom toolbar 
     */ 
     { 
      xtype : 'toolbar', 
      docked : 'bottom', 
      title : 'Bottom' 
     }, 
     /** 
     * Here you can specify any items to show up as content 
     */ 
     { 
      xtype : 'myapp-content' 
     } 
    ] 
} 
}); 

上面我们定义的内容是的xtype maypp-content所以在这里，你可以添加你的子卡：

Ext.define('MyApp.view.ListWrap', { 
extend : 'Ext.Container', 
xtype : 'myapp-listwrap', 

config : { 
    layout : { 
     type : 'vbox', 
     align : 'stretch' 
    }, 
    items : [ 
     { 
      html : 'Image Here', 
      flex : 1 
     }, 
     /** 
     * Here you can specify any other sub-sub layouts, just use the xtype 
     */ 
     { 
      //xtype : 'mvctest-list', 
      html : 'Another image can be on this place', 
      flex : 3 
     } 
    ] 
} 
}); 

如果仍然没有帮助你出来了，请张贴应该包含你的子卡的te父视图的代码。欢呼声