PDA

View Full Version : Accordion Header - Move collapse button to left of header title



charCo
22 May 2012, 7:59 AM
I am using an accordion layout to place two grid panels above each other and are on the right side of the page. Our UX designer wants the collapse/expand button to be at the left of the header instead of the right because he feels it is not intuitive to the user. I have attempted to override the accordion layout on render and modify the CSS, however the styles are being applied at the element level and I haven't been able to move the button.

Any suggestions or simple thing I am missing?

vietits
23 May 2012, 1:57 AM
Because panel header always renders tools after its title, so you need to override this header behaviour. Below is my solution: override Ext.panel.Header.


Ext.define('OverridePanelHeader', {
override: 'Ext.panel.Header',
initComponent: function(){
var me = this;
me.callParent(arguments);


if(me.toolFirst){
var items = me.items.items;
var title = items.splice(0, items.length - me.tools.length);
me.items.items = items.concat(title);
}
}
});

To render tools on the left with this override, you should config panel header with toolFirst set to true. Example:


Ext.onReady(function(){


Ext.define('OverridePanelHeader', {
override: 'Ext.panel.Header',
initComponent: function(){
var me = this;
me.callParent(arguments);


if(me.toolFirst){
var items = me.items.items;
var title = items.splice(0, items.length - me.tools.length);
me.items.items = items.concat(title);
}
}
});
var item1 = Ext.create('Ext.Panel', {
title: 'Accordion Item 1',
html: '<empty panel>',
cls:'empty'
});


var item2 = Ext.create('Ext.Panel', {
title: 'Accordion Item 2',
html: '<empty panel>',
cls:'empty',
header: {
toolFirst: true
}
});


var item3 = Ext.create('Ext.Panel', {
title: 'Accordion Item 3',
html: '<empty panel>',
cls:'empty'
});


var item4 = Ext.create('Ext.Panel', {
title: 'Accordion Item 4',
titleAlign: 'right',
html: '<empty panel>',
cls:'empty',
header: {
toolFirst: true
}
});


var accordion = Ext.create('Ext.Panel', {
renderTo: Ext.getBody(),
title: 'Accordion',
collapsible: true,
region:'west',
margins:'5 0 5 5',
split:true,
width: 210,
height: 400,
layout:'accordion',
items: [item1, item2, item3, item4]
});
});

charCo
23 May 2012, 7:24 AM
The override code does work :) when the toolFirst condition can be passed! But I had to remove the condition to get things to work. This:



var item2 = Ext.create('Ext.Panel', {
title: 'Accordion Item 2',
html: '<empty panel>',
cls:'empty',
header: {
toolFirst: true
}
});


to apply the toolFirst parameter to the header causes an error and seems to not create the header correctly when trying to access the header and add this value.

I am trying to add the "toolFirst: true" to a grid panel and haven't been able to get a hold of the header to apply that value.

charCo
23 May 2012, 9:28 AM
I have even tried to extend the panel header and add it as an xtype to the header config of the panel. But I am still getting this error anytime I try to use the header config.

Using this:
header: {....} config of the panel I get this error:


me.header.setUI is not a function

vietits
23 May 2012, 3:16 PM
Which Ext version do you use? The solution and example I posted in my previous post ran well on Ext 4.1.0, Chrome 19.

charCo
24 May 2012, 5:34 AM
I am using ExtJs 4.1 beta 2 and using in Firefox 11. It is a company wrapper of the code, which is limiting the flexibility.

I have been trying to apply this to grid panels, I will try basic panels to see if that will work. Then maybe resort to wrapping a panel around the grid panels. Or for now I will hold off until they upgrade their release to the non-beta version.

alicexyl
30 May 2012, 11:13 AM
I'm using Ext 4.1.0 and ran into a similar issue, where specifying any header config and closable: true causes unexpected error, i.e. it has issues even without override. Filed a bug here: http://www.sencha.com/forum/showthread.php?198949-4.1-Uncaught-TypeError-with-Ext.selection.Model&p=793779

alicexyl
30 May 2012, 11:40 AM
I noticed that the collapse button still has element style left: 2px applied. Any suggestions on removing this so the button is better positioned?

nohemi.feltl
7 Jun 2012, 5:50 AM
I tried the code that was posted before but it didn't work for me, probably because the version of Extjs that we use is 3.2. So if anybody using the same version is looking for the answer, thought I would share it.

var item2 = new Ext.Panel({
title: this.titleTwo,
html: this.textTwo,
cls:'empty',
listeners: {'afterrender' : function(p) {

var header = p.header;
var firstelement = header.first();
var lastelement = header.last();
lastelement.move("r",40,true); //text label
firstelement.move("l",850,true); //expand sign

}}
});

adgpt
22 Nov 2012, 12:24 PM
Add the following class in your css file.The buttons will come to the left side.

-accordion-hd > .x-panel-header-body > .x-box-inner > .x-box-item{left: 15px !important; }

Modify the 15px value if you need. Thanks.