PDA

View Full Version : Limit Accordion height to the height the subitem requires?



mik3e
11 Feb 2012, 2:21 AM
Hi there!

I implemented a accordion layout to be used as a menu. My problem is, that the opened accordion always uses the whole height which is available. But I want the open accordion, that it only uses the heigt, the panel inside requires - so the complete height of the accordion is dynamic.

Has anyone an idea how to solve this problem?

Thanks in advance & ciao,
Mike

gilescambray
11 Feb 2012, 11:43 AM
You know what, I had the exact same problem yesterday and it was driving me insane. I haven't completely fixed the problem yet, but I have got a little further by not using the Accordion layout, and instead using the following config properties in each child item:

collapseDirection (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Panel-cfg-collapseDirection) : Boolean
(http://docs.sencha.com/ext-js/4-0/#!/api/Boolean)collapseFirst (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Panel-cfg-collapseFirst) : (http://docs.sencha.com/ext-js/4-0/#!/api/Boolean)Boolean
(http://docs.sencha.com/ext-js/4-0/#!/api/Boolean)collapseMode (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Panel-cfg-collapseMode)[/URL] : (http://docs.sencha.com/ext-js/4-0/#!/api/Boolean)String
(http://docs.sencha.com/ext-js/4-0/#!/api/String)collapsed (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Panel-cfg-collapsed) (http://docs.sencha.com/ext-js/4-0/#!/api/Boolean) : (http://docs.sencha.com/ext-js/4-0/#!/api/String)Boolean
(http://docs.sencha.com/ext-js/4-0/#!/api/Boolean)collapsedCls (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Panel-cfg-collapsedCls) (http://docs.sencha.com/ext-js/4-0/#!/api/Boolean)[URL="http://docs.sencha.com/ext-js/4-0/#!/api/Boolean"] : (http://docs.sencha.com/ext-js/4-0/#!/api/String)String
collapsible (http://docs.sencha.com/ext-js/4-0/#!/api/String) : Boolean

(http://docs.sencha.com/ext-js/4-0/#!/api/String)Not sure if that helps. I'm working on something else atm, but when I come back to it I'll let you know how I get on if at all.

mik3e
11 Feb 2012, 12:10 PM
Hi Giles,

Good idea - I´ll try it tomorrow. It should work with panels I think...
I´ll also let you know if I find a solution :)

Good night,
Mike

mik3e
12 Feb 2012, 10:05 AM
Hi,

I also tried to use collapse and panels, but it isn´t really working fine. For example the panel is not shown, if collapsed=true. And the open/close animation is also not quite fast and beautiful.

I think I´ll have a look around in the web if there is another solution to do this with accordion layout :)

gilescambray
12 Feb 2012, 10:12 AM
Been working on it this afternoon as well. The documentation is a bit sparse on this bit, but if the parent container / panel / whatever has a vbox layout, then the 'title' attributes in the panel remain shown when the panel is collapsed. Took me a while to realise that!

There's a animCollapse (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Panel-cfg-animCollapse) boolean property for the panel too which might help your animation.

Let me know if you have any more luck.

mik3e
12 Feb 2012, 11:57 AM
Yes, i did it. Besides i will write a basic controller wich closes all other panels if one is expanded. At the moment you can expand more than one panel at once. But I´m not yet sure, if this isn´t the better solution for my menu.

Here´s my solution:


Ext.define('LT.view.menu.Main', {
extend: 'Ext.container.Container',
alias: 'widget.menu_main',
id: 'menu_main',
layout: 'auto',
style : 'padding-left:15px',
defaults: {
collapsible: 'true',
titleCollapse: 'true',
animCollapse: false,
collapsed: true
},

items: [
{
xtype: 'panel',
title: __('Master Data'),
items: [
{
xtype: 'menu_masterdata'
}
]
},{
xtype: 'panel',
title: __('System'),
items: [
{
xtype: 'menu_system'
}
]
},{
xtype: 'panel',
title: 'panel2',
items: [
{
xtype: 'label',
text: 'test'
}
]
}
]

});