PDA

View Full Version : Configure collapse control for panels



alane
5 Dec 2012, 10:56 AM
I'm looking for a way to configure panels so that the collapse tool that appears with collapsible (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.panel.Panel-cfg-collapsible): true renders on the left hand side of the panel, before the title object.

There's a hacky way suggested under collapseFirst (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.panel.Panel-cfg-collapseFirst) on Ext.panel.Panel's documentation page, but this can adversely impact render time if you're rendering a lot of collapsible panels at the same time.

Is there, or are there plans to develop, something like a collapseAlign configuration?

mitchellsimoens
7 Dec 2012, 8:08 AM
If you want total control, you can add an item to the header, the header is a container using hbox layout.

alane
7 Dec 2012, 9:29 AM
Would I need to replace the collapse tool with a tool of my own that mimics it, or could I specify the native items in the order I want them using the header configuration?

How would I do that? (Specify the order of the native items, like the title component, collapse tool, etc?)

header: {
collapsetool,
title
}

alane
7 Dec 2012, 11:15 AM
..ok. I do believe I got it looking at Ext.panel.Header.

for anybody else looking into this, my solution was:



Ext.define('myapp.view.repeatingpanel', {
extend: 'Ext.form.Panel',
collapsible: true,
header: {
listeners: {
beforerender: function(header) {
var collapsetool = header.tools[0];
header.insert(0,collapsetool);
//this.log('before render',header);
},
}
}