Question

我正在尝试在面板中添加面板，但始终隐藏子面板。检查萤火虫我发现儿童面板的内容在那里，但因为它的宽度/高度没有设置所以它是不可见的。这是我的父母小组

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

这是我的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父视图的代码。干杯

子面板不可见

1 个答案: