Use listeners in Ext.TabPanel

[hyang]

I have been trying to use the listeners to get my active tab for changing my page title, here is my code:


<script>
var tabs = Object ();
Ext.onReady(function(){

tabs = new Ext.TabPanel({
renderTo: 'tabs1',
width:400,
activeTab: 0,
plain:true,
defaults:{autoHeight: true},
items:[
{contentEl:'mytab1', title: 'My Tab 1' },
{contentEl:'mytab2', title: 'My Tab 2' },
],
listeners: {
tabchange: function() {
var tabs1 = Ext.getCmp('tabs1');
alert (tabs1.getItem());
if (this.getActiveTab() == 0) {
document.getElementById('myTitle').innerHTML = 'My page title 1';
}
if (this.getActiveTab() == 1) {
document.getElementById('myTitle').innerHTML = 'My page title 2';
}
}
}
});
</script>
<h1 id="myTitle"></h1>
<div id="tabs1">
<div id="mytab1" class="x-hide-display">
this is my page 1
</div>
</div>
.....
Set the alert and got the message: "tabs1 is null". Did I use the right function?

Any suggestion or help will be appreciated.

[hendricd]

@hyang -- Why not use the arguments provided by the event:



listeners: {
tabchange: function(tabPanel, newTab) {

Ext.get('myTitle').update(newTab.title );

}

[hyang]

Doug,

Thanks. But can you give me some tips on how I should use : Ext.get('myTitle').update(newTab.title );
for changing my page title when specific tab is clicked?

Thanks again!

[hendricd]

@hyang -- I think I just did. /:)

What title text do you want to show when the tab changes? New title from where?

[hyang]

hmm.. ok.

I have two tabs: My Tab1 & My Tab2 on my page. When page is loaded, the 'My Tab1' is the default with the page title: My page title 1. The page title will be changed when the Tab2 is clicked/active.

I'm slow...and the beginner...:(

[hyang]

Doug,

It works! Thank you so much. :))