PDA

View Full Version : Make listener to expand my Panel



qtax87
6 Nov 2008, 5:52 AM
I need help to make an listener and mabye make my expand in another way.

I dynamic make some Panels, and on the expand icon (is clicked) I run an function:


function goExpandAndLoad(companyPanel) {
if(!companyPanel.loaded) {
companyPanel.body.load({
url: eidUrl,
params: {companyID: companyPanel.companyID, mode: "getOverview"},
text: "Loading. Please wait...",
scripts: true,
discardUrl: false,
nocache: true,
timeout: 30,
callback: function(el, success) {
if (success) {
companyPanel.loaded = true;
}
}
});
}
}

My test function for the click handler:

function handleClick(e){ // e is not a standard event object, it is a Ext.EventObject
e.preventDefault();
var target = e.getTarget();
//goExpandAndLoad();
console.log(this.companyID);
}

and my script to make the "panels":

function createCompanyPanels(companyPanelsArr) {
for(i=0; i<companyPanelsArr.length; i++) {
var Panel = new Ext.Panel({
title: "<span style=\"float: left; text-align: left;\"><input type=\"checkbox\" name=\"deleteCompany[]\" value=\""+companyPanelsArr[i][0]+"\" /> <span id=\"titleOfCompany_"+companyPanelsArr[i][0]+"\">"+companyPanelsArr[i][1]+"</span></span> <span style=\"float: right; text-align: right; margin-right: 15px;\"> <span style=\"padding-right: 125px;\" id=\"countryOfCompany_"+companyPanelsArr[i][0]+"\">"+companyPanelsArr[i][2]+"</span> <span id=\"typeOfCompany_"+companyPanelsArr[i][0]+"\">"+companyPanelsArr[i][3]+"</span><span style=\"padding-left: 65px;\" id=\"updated_"+companyPanelsArr[i][0]+"\">Updated: "+companyPanelsArr[i][4]+"</span></span>",
collapsible: true,
collapsed: true,
frame: true,
width: 770,
autoHeight: true,
companyID: companyPanelsArr[i][0],
//iconCls: "CompanyPanelsClick",
listeners: {
expand: function() {
goExpandAndLoad(this)
}
}

});
//
Panel.render("companyDivPanel_"+companyPanelsArr[i][0]);
Ext.EventManager.addListener("companyDivPanel_"+companyPanelsArr[i][0], 'click', handleClick, {
companyID: companyPanelsArr[i][0]
});

}
}; // Ends the createPanels function

qtax87
6 Nov 2008, 5:54 AM
I need my test handle to send "this" with, when onclick, or mabye I need to edit it all, but need help to "build it" in a new way.

So please help me.

qtax87
7 Nov 2008, 12:15 AM
No one?

mjlecomte
7 Nov 2008, 1:06 AM
It looks like you already have another thread on this...http://extjs.com/forum/showthread.php?t=51349

Why not use an event? beforecollapse (http://extjs.com/deploy/dev/docs/?class=Ext.Panel&member=beforecollapse) , etc

qtax87
7 Nov 2008, 1:08 AM
Yes but can't delete/lock that tread.
But how should I use that?

qtax87
7 Nov 2008, 1:23 AM
But have I to change my code, or can I still use this?
and beforecollapse, shall be like this:


listeners: {
expand: function() {
goExpandAndLoad(this)
}
beforecollapse: function() {
Ext.MessageBox.alert('Status', 'beforecollapse() function called!');
}
}

qtax87
7 Nov 2008, 1:26 AM
But beforecollapse, is not the right one to use..
Shall use 'onclick' function

mjlecomte
7 Nov 2008, 1:37 AM
It's up to you to find an appropriate event that meets your needs. I would think beforecollapse would do what you want. You would need to explain why that doesn't work for me to suggest anything else.

qtax87
7 Nov 2008, 1:39 AM
Yeah okay.
When click on the panel I want it to expand (default: collapsed), but can't find the right event/listener to do this for me.

Edit: > You understand what I need?

mjlecomte
7 Nov 2008, 1:50 AM
So you have a collapsed panel and when you click on the header (not the button) you want to catch the event and do something before it expands? If you just want something to happen when it is expanded you can simply listen to the expand event, no?

qtax87
7 Nov 2008, 2:02 AM
Semi yes.
Got this screenshot: http://img514.imageshack.us/img514/7245/extjstq0.jpg

Onclick on the header> on the panel not the button, I want it to expand.
So I not have to click on the "expand"/"collapse" button to do this.

qtax87
7 Nov 2008, 4:53 AM
Can you help me with this?

mjlecomte
7 Nov 2008, 6:00 AM
Look here:
http://sandbox.extjs-ux.org/mjlecomte/ext/examples/panel/panels.html

qtax87
7 Nov 2008, 6:20 AM
Look here:
http://sandbox.extjs-ux.org/mjlecomte/ext/examples/panel/panels.html

Okay that's a nice link to have.

but now I added this to my code, this works fine, but now I have this panel to expand, how can I send this with?:



function createCompanyPanels(companyPanelsArr) {
var panelEvent = function(e) {
console.log(e.thisPanel);
//this.expand();
}
for(i=0; i<companyPanelsArr.length; i++) {
var Panel = new Ext.Panel({
title: "<span style=\"float: left; text-align: left;\"><input type=\"checkbox\" name=\"deleteCompany[]\" value=\""+companyPanelsArr[i][0]+"\" /> <span id=\"titleOfCompany_"+companyPanelsArr[i][0]+"\">"+companyPanelsArr[i][1]+"</span></span> <span style=\"float: right; text-align: right; margin-right: 15px;\"> <span style=\"padding-right: 125px;\" id=\"countryOfCompany_"+companyPanelsArr[i][0]+"\">"+companyPanelsArr[i][2]+"</span> <span id=\"typeOfCompany_"+companyPanelsArr[i][0]+"\">"+companyPanelsArr[i][3]+"</span><span style=\"padding-left: 65px;\" id=\"updated_"+companyPanelsArr[i][0]+"\">Updated: "+companyPanelsArr[i][4]+"</span></span>",
collapsible: true,
collapsed: true,
frame: true,
width: 770,
autoHeight: true,
companyID: companyPanelsArr[i][0],
//iconCls: "CompanyPanelsClick",
listeners: {
expand: function() {
goExpandAndLoad(this)
}
}

});
//
Panel.render("companyDivPanel_"+companyPanelsArr[i][0]);
var panelEL = Panel.getEl();
panelEL.addListener("click", panelEvent, panelEL, {
thisPanel: panelEL
});
}
}; // Ends the createPanels function