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'
}
]
}
]

});