PDA

View Full Version : TabPanel beforetabchange event not firing



jbd3rd
11 Aug 2009, 5:08 PM
I'm extending Ext.TabPanel.
I'm assigning a listener for beforetabchange event.
When I change tabs on the TabPanel the function is never executed.
Using Firefox 3.0.13

Donor.DonorTabPanel = Ext.extend(Ext.TabPanel, {
selectedDonorId: null,

initComponent: function() {

var tabPanelConfig = {
activeItem: 0,
layoutOnTabChange: true,
items:[
{
xtype: 'generalInfoFormPanel',
id: 'generalInfoFormPanel',
hideMode: 'offsets',
title: 'General'
},
{
xtype: 'contactInfoFormPanel',
hideMode: 'offsets',
id: 'contactInfoFormPanel',
title: 'Contact'
}], // end items
listeners: {
'beforetabchange': {
fn: handleBeforeTabChangeEvent,
scope: this
}
}

};

Ext.apply(this, tabPanelConfig);

// call parent initComponent
Donor.DonorTabPanel.superclass.initComponent.apply(this, arguments);

function handleBeforeTabChangeEvent(tabPanel, newTab, currentTab) {
alert('donorTabPanel-->handleBeforeTabChangeEvent ' + this.selectedDonorId);
return true;
}

}, // end initComponent

setDonorId: function(donorId) {
this.selectedDonorId = donorId;
alert('donorTabPanel-->setDonorId');
}

});

Ext.reg('donorTabPanel', Donor.DonorTabPanel);

jbd3rd
11 Aug 2009, 6:17 PM
I have been playing with this more.
If I extend Ext.Panel and create the tab panel in the initComponent method....It works?

Donor.DonorTabPanel = Ext.extend(Ext.Panel, {
initComponent: function() {

var tabPanelConfig = {items:[{
xtype: 'tabpanel',
activeItem: 0,
layoutOnTabChange: true,
items:[
{
xtype: 'generalInfoFormPanel',
id: 'generalInfoFormPanel',
hideMode: 'offsets',
title: 'General'
},
{
xtype: 'contactInfoFormPanel',
hideMode: 'offsets',
id: 'contactInfoFormPanel',
title: 'Contact'
},
{
xtype: 'panel',
hideMode: 'offsets',
title: 'Notes',
id: 'notesPanel',
layout: 'border',
items: [{xtype: 'notesListPanel', region: 'north', autoHeight: false, height: 250},
{xtype: 'notesFormPanel', region: 'center'}]
}], // end items
listeners: {
'beforetabchange': {
fn: handleBeforeTabChangeEvent,
scope: this
}

}

}]};

jbd3rd
12 Aug 2009, 8:54 AM
In my first post I was using the listeners: { } configuration attribute to set listeners for my subclass. This was being applied before the call to superclass.initComponent.

When superclass.initComponent is called the superclass (in this case TabPanel) defines its own listeners and appears to replace any listeners already defined up to this point.

By adding my listeners AFTER the call to superclass.initComponent it works.
The new subclass I created has listeners from its superclass and the ones defined for it.

Here is my final working code.

Hope this helps anyone else who may be subclassing TabPanel.

Donor.DonorTabPanel = Ext.extend(Ext.TabPanel, {
selectedDonorId: null,

/**
* This method is invoked to initialize a Donor.DonorTabPanel
*
* 'this' refers to the new Donor.DonorTabPanel
*/
initComponent: function() {

var tabPanelConfig = {
layoutOnTabChange: true,
activeItem: 0,
items:[
{
xtype: 'generalInfoFormPanel',
id: 'generalInfoFormPanel',
hideMode: 'offsets',
title: 'General'
},
{
xtype: 'contactInfoFormPanel',
hideMode: 'offsets',
id: 'contactInfoFormPanel',
title: 'Contact'
},
{
xtype: 'panel',
hideMode: 'offsets',
title: 'Notes',
id: 'notesPanel',
layout: 'border',
items: [{xtype: 'notesListPanel', region: 'north', autoHeight: false, height: 250},
{xtype: 'notesFormPanel', region: 'center'}]
}] // end items

};

// apply subclass configurations
Ext.apply(this, tabPanelConfig);

// call parent initComponent
Donor.DonorTabPanel.superclass.initComponent.apply(this);

// add listeners AFTER call superclass.initComponent
this.addListener('beforetabchange', handleBeforeTabChangeEvent, this, {single: false});

// helper functions for initComponent
function handleBeforeTabChangeEvent(tabPanel, newTab, currentTab) {
var result = false;

if(this.selectedDonorId != null)
{
result = true;
}

return result;
}

}, // end initComponent

Animal
12 Aug 2009, 9:59 AM
Yes. It's called the "extend to configure" antipattern.

jbd3rd
14 Aug 2009, 11:44 AM
Yes..it might well fit that description..

I work in a group that is trying to prototype the building of business domain specific UI components based on EXT-JS. There is great potentila for reuse across our suite of applications.

Goals is to provide .js file(s) that represent a specific widget and associated .jar for server side logic.
Use in application(s) (also based on ExtJS) by specifying an xtype.
Interact with the widget by: 1. listening for events and 2. invoking notification methods on the widget.

So far meeting with pretty good success..just the occasional issue like this!

Be interested in your thoughts on this...

Animal
14 Aug 2009, 11:48 AM
Unless you are adding methods or overriding methods then there is no point whatsoever in subclassing.