Question

带有手风琴布局的面板包含在vbox中，另一个项目。

我有两个麻烦：

当我尝试使用手风琴布局将flex设置为面板时，会导致错误“[E]布局运行失败”
当高度由const修复时，它无法正常工作：第一个面板不会崩溃。

以下是代码示例：

Ext.create('Ext.panel.Panel', {
    title: 'Accordion Layout',
    width: 300,
    height: 500,
    layout: 'vbox',
    items: [{
        xtype: 'datefield'
    }, {
        defaults: {
            // applied to each contained panel
            bodyStyle: 'padding:15px'
        },
        layout: {
            // layout-specific configs go here
            type: 'accordion',
            titleCollapse: true,
            animate: true
        },
        items: [{
            title: 'Panel 1',
            html: 'Panel content 1!'
        }, {
            title: 'Panel 2',
            html: 'Panel content 2!'
        }, {
            title: 'Panel 3',
            html: 'Panel content 3!'
        }],
    }],
    renderTo: Ext.getBody()
});

http://jsfiddle.net/6DHM4/1/

Answer 1

我无法重现您的错误，但如果我将flex: 1更改为

，layout: 'vbox'对我来说效果会很好

layout: {
   type: 'vbox',
   align: 'stretch'
}

（见this fiddle）

Answer 2

可能是正确的方法是使用布局＆＃39;锚定＆＃39;反对＆＃39; vbox＆＃39;？试试这种方式？

Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
width: 300,
height: 500,    
layout: 'anchor',
items: [
            {xtype: 'datefield'},
            {
             defaults: {
               // applied to each contained panel
               bodyStyle: 'padding:15px'
               ,anchor: '100%'
             },

    ...

我不知道为什么，但是当我在jsfiddle.net上测试时，它会显示错误：＆＃39;第一个面板不会崩溃＆＃39;。但是，如果我在这里测试它http://try.sencha.com/，它可以正常工作。

在vbox中扩展js 4.2手风琴布局

2 个答案: