Ext.tab.Panel listeners error

[perry_jia]

U]REQUIRED INFORMATION[/U]Ext version tested:

• Sencha Touch 2.0PR2

Browser versions tested against:

• Chrome 11 (Windows)

Description:

• tab panel event listeners error.

Steps to reproduce the problem:

• Create Ext.tab.Panel which contains two same child (xtype: 'child')
• Override initialize method of Child panel, and alert some informations, strange!!

The result that was expected:

• false
• true
• id: child1

The result that occurs instead:

• false
• false
• id: child1
• id: child1

Test Case:

    Ext.setup({    
  onReady : function() {
        // child
        Ext.define('Child', {
            extend: 'Ext.Container',
            xtype: 'child',
            config: {
                items: [{
                    xtype: 'sliderfield',
                    label: 'Single Thumb'
                }, {
                    xtype: 'togglefield',
                    label: 'Toggle Thumbs'
                }]
            },
            initialize: function() {
                alert('is hidden? ' + this.isHidden());
                this.on('show', function(cmp) {
                    alert('id: ' + cmp.getId());
                })
            }
        });
        // Tab Panel
        Ext.define('MyTanPanel', {
            extend: 'Ext.tab.Panel',
            config: {
                tabBarPosition: 'top',
                items: [{
                    title: 'child1',
                    xtype: 'child',
                    id: 'child1'
                }, {
                    title: 'child2',
                    xtype: 'child',
                    id: 'child2'
                }]
            }
        });
        
        Ext.create('MyTanPanel').show();
    }
});

[mitchellsimoens]

You have overridden the initialize method which is used internally. You must do this.callParent(arguments); in order to keep the functionality the framework may have in internally used methods.

[perry_jia]

I changed my code as you said, still alert the same information:
false, false, id:child1, id:child1.

// child
Ext.define('Child', {
    extend: 'Ext.Container',
    xtype: 'child',
    config: {
        items: [{
            xtype: 'sliderfield',
            label: 'Single Thumb'
        }, {
            xtype: 'togglefield',
            label: 'Toggle Thumbs'
        }]
    },
    initialize: function() {
        this.callParent(arguments);
        alert('is hidden? ' + this.isHidden());
        this.on('show', function(cmp) {
            alert('id: ' + cmp.getId());
        })
    }
});
// Tab Panel
Ext.define('MyTanPanel', {
    extend: 'Ext.tab.Panel',
    config: {
        tabBarPosition: 'top',
        items: [{
            title: 'child1',
            xtype: 'child',
            id: 'child1'
        }, {
            title: 'child2',
            xtype: 'child',
            id: 'child2'
        }]
    }
});
// Main
Ext.setup({
    onReady : function() {
        Ext.create('MyTanPanel').show();
    }
});

You have overridden the initialize method which is used internally. You must do this.callParent(arguments); in order to keep the functionality the framework may have in internally used methods.

[Jacky Nguyen]

The observed result is correct, here's why:

When the 2 'Child' tab is instantiated, their initialize() method gets called. At that moment, they're not hidden (since their 'hidden' config is not explicitly set to 'true'). That's why you see 2 'is hidden? false' alerts.

After they're fully instantiated and are added into the 'MyTanPanel' container, the container has a 'card' layout by default, which will hide all the cards right after they're added to the container.

Finally, the 'card' layout activate the active card, and that's when the 'show' event is fired on the first child.

To reliably get informed about the visibility state of components, listen to both 'show' and 'hide' events instead.

[perry_jia]

I know, thank you very much.