PDA

View Full Version : [Portal] Dynamically manage panel headers



tR4x0u
15 May 2013, 1:52 AM
Hi everyone,

I would like to know how can I manage dynamically my panel's headers on my website.

By default, my panels are set with "header: false", but on mouseover event, I want the headers to be activated. I'm able to handle the mouseover event but I tried "header: true" , it doesn't work. I also tried "setHeader(true)" and it's the same.

Someone could help me please ?

Thanks in advance.

mitchellsimoens
17 May 2013, 6:28 AM
Instead of header : false why not hide the header and then on mouseover you can show the header.

tR4x0u
17 May 2013, 7:42 AM
Thanks for your reply, but how can I do that ?

mitchellsimoens
17 May 2013, 7:57 AM
Thanks for your reply, but how can I do that ?

Something like:


var panel = new Ext.panel.Panel({
renderTo : document.body,
height : 200,
width : 200,
header : {
title : 'Foo',
hidden : true
},
listeners : {
element : 'el',
mouseover : function () {
panel.header.show();
},
mouseout : function () {
panel.header.hide();
}
}
});

tR4x0u
17 May 2013, 8:05 AM
Thanks, I will try this as soon as possible

tR4x0u
20 May 2013, 11:29 PM
I just tried your code but it doesn't work :(

tR4x0u
21 May 2013, 2:06 AM
I've finally find a solution by myself.

I post it below if it may help other people later.

First, in my portlet container, for each of my portlets (panels) I give them an unique id and a base CSS class to hide them (instead of using hidden: true which doesn't work)


initComponent: function () {

Ext.apply(this, {

items: [{
id: 'col-1',
items: [{
id: 'portlet-1',
title: 'Table component',
tools: this.getTools(),
header: {
id: 'header1',
draggable: true,
height: 40,
baseCls: 'x-hide-display'
},
items: Ext.create('MyApp.views.GridPortlet')
}, {
id: 'portlet-2',
title: 'Pie component',
tools: this.getTools(),
header: {
id: 'header2',
draggable: true,
height: 40,
baseCls: 'x-hide-display'
},
items: Ext.create('MyApp.views.PiePortlet')
//html: Supervision.classes.Constants.shortBogusMarkup
}]
}, {
id: 'col-2',
items: [{
id: 'portlet-3',
title: 'Area component',
tools: this.getTools(),
header: {
id: 'header3',
draggable: true,
height: 40,
baseCls: 'x-hide-display'
},
items: Ext.create('MyApp.views.AreaPortlet')
//html: Supervision.classes.Constants.bogusMarkup
}]
}, {
id: 'col-3',
items: [{
id: 'portlet-4',
title: 'Chart component',
tools: this.getTools(),
header: {
id: 'header4',
draggable: true,
height: 40,
baseCls: 'x-hide-display'
},
items: Ext.create('MyApp.views.ChartPortlet')
}]
}]

});

this.callParent(arguments);
}

Then, in my individual portlet class, I do the following in the afterRender configuration option:


afterRender: function () {
var me = this;
var headerId = 'header' + me.id.split('-')[1];
var header = me.getComponent(headerId);

me.callParent();

me.mon(me.getEl(), 'mouseenter', function () {

header.removeCls('x-hide-display');

}, me);

me.mon(me.getEl(), 'mouseleave', function () {

header.addCls('x-hide-display');

}, me);
},

Just retrieve the header id of the hovered component using my portlet own id, and get the header object using the getComponent() method of the Panel object.

Then I set a custom CSS class on the desired event to show/hide my header.

And voila :D !

sheikhwaqasahmad
3 Aug 2013, 11:58 AM
Hi.

I want to implement view like portal layout example of sencha.

I am facing issues in portlets dynamically. Can u help me in this regard.

Thanks in advance.

tR4x0u
4 Aug 2013, 1:25 AM
What kind of issue are you facing ?