0

Panel with accordion layout is contained in vbox with another one item.

I have a 2 troubles:

  1. When i'm trying to set flex to panel with accordion layout it causes the error "[E] Layout run failed"
  2. When height is fixed by constand it not working as expected: first panel does not collapse.

Here is example of code:

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/

Darin Kolev
  • 3,401
  • 13
  • 31
  • 46
Damask
  • 1,754
  • 1
  • 13
  • 24

2 Answers2

1

I couldn't reproduce your error, but things look good for me with flex: 1 if I change the layout: 'vbox' to

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

(see this fiddle)

Towler
  • 1,552
  • 1
  • 10
  • 21
0

may be the right way is to use layout 'anchor' against 'vbox'? try that way? 

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%'
             },

    ...

I don't know why, but when i test it on jsfiddle.net it shows bug: 'first panel does not collapse'. But if i test it here http://try.sencha.com/ for example, it works fine.

ytppa
  • 1