Results 1 to 6 of 6

Thread: TabPanel beforetabchange event not firing

  1. #1

    Default TabPanel beforetabchange event not firing

    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);

  2. #2

    Default Some more info......

    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
    }

    }

    }]};

  3. #3

    Default Solution - Order is so important when subclassing

    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

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Yes. It's called the "extend to configure" antipattern.

  5. #5

    Default Antupatterns

    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...

  6. #6
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Unless you are adding methods or overriding methods then there is no point whatsoever in subclassing.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •