how to get an eventhandle for tabclick

[harish]

i need to trigger a custom javascript method whenever the user chooses a tab. this is to update another region on the page based on tab selection. where should i wire this event.

if this may be of importance: my tabs are created when the borderlayout is updated. i am not writing any tabpanel code.

i have already tried .setTitle method.. i didnt like it becos i want the event fired whenever the tab is enabled.. not only when the user clicks exactly on the title text...it should work even if the user clicks outside the text but inside the tab area.

thanks for any help.
Harish.

[jarrod]

You can listen for panel "activate" and "deactivate" events.

[harish]

that was helpful.. but it still doesn't work.

to clarify..
i was wanting to change content in the east pane based on tabs in the center pane in a border layout.

i wired the below code... but it still doesn't work.. the onActivate event doesn't trigger. i believe my call is wrong. any help is appreciated. [ Below code runs the method while loading the tabs rather than when clicking on the tab becos i have used '()' in the call. How should this be wired.]

//this was my original east pane addition
layout.add('east', new YAHOO.ext.GridPanel(propsGrid, {title: 'Properties', closable: false}));

//this was the my tab 'report designer'
var rptDesignerTab = new YAHOO.ext.ContentPanel('rptDesign', {closable: false});
rptDesignerTab.setTitle("Report Design");

//this is the onactivate call that does the job.
rptDesignerTab.onActivate=showRptDesigner();

//this is the method that overwrites the east pane with a new contentpanel.
function showRptDesigner()
{
	layout.beginUpdate();
	layout.add('east', new YAHOO.ext.ContentPanel('test1', {title: 'test', closable: false}));
	layout.endUpdate();
}

Thanks,
Harish

[Animal]

Add a listener to a ContentPanel:

http://www.yui-ext.com/deploy/yui-ex...tPanel.html#on

[harish]

can someone help me here. whats wrong with below code..
this also executes onload rather than triggering on activation.

rptDesignerTab.on("activate", function()
                      {
                        rptFieldsPanel1 = new YAHOO.ext.ContentPanel('test1', {title: 'test', closable: false});
                      
                      	layout.beginUpdate();
                      	layout.remove('east');
                      	layout.add('east', rptFieldsPanel1);
                      	layout.endUpdate();
                      }
                    );

[jbowman]

is rptDesignerTab a panel?

Really, it's not enough code to diagnose the problem.

Are you getting any errors in firebug? try throwing try/catch's in there? Also, a hunch I have, is that you may need to add that event after you've initialized the layout for the first time, as it may be getting activated during the initialization process.

[jack.slocum]

layout.remove('east'); what is that?

[harish]

Originally Posted by jbowman

is rptDesignerTab a panel?

yes, sorry if that was confusing .. i named it to mean that it shows a tab to the end user.

Originally Posted by jbowman

... as it may be getting activated during the initialization process.

this was really the problem.. once i set the on("activate"...after the layout.endUpdate();
it worked.

layout.endUpdate();
rptDesignerTab.on("activate", showRptFields);

Now when i click on the reportdesignertab(actually a panel) it adds a new panel to the east which is what i wanted. but i also want to remove all existing panels in the 'east' region.

Originally Posted by jacksloc

layout.remove('east'); what is that?

i am trying to understand and use layout.remove() but it doesn't seem to work.

In the east grid i have a props panel which was created by the below code:

propsGrid = new YAHOO.ext.grid.PropsGrid('props-panel');
propsGrid.setSource({
      "(name)": "TextBox1",
      "required": false
    });
propsGrid.render();

propsPanel1 = new YAHOO.ext.GridPanel(propsGrid, {title: 'Properties', closable: false});
layout.add('east', propsPanel1);

How do i use layout.remove to remove the above panel, before i add the new one as below.

var showRptFields = function(){
...
...
	layout.beginUpdate();
	
	layout.remove('east');
	layout.add('east', rptFieldsPanel1);
	layout.endUpdate();
}

[jack.slocum]

If you look at the docs for remove() you have to pass it the panel to remove as the second parameter.

[harish]

I would appreciate a line of code or a pointer to some sample.

I tried this below, but it threw some general errors.

layout.add(propsPanel1);  //is this it

thanks for your time.
Harish.