Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Mar 2011
    Location
    Shanghai
    Posts
    71
    Vote Rating
    0
    perry_jia is on a distinguished road

      0  

    Default Ext.tab.Panel listeners error

    Ext.tab.Panel listeners error


    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:
    Code:
        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();
        }
    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,645
    Vote Rating
    816
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Mar 2011
    Location
    Shanghai
    Posts
    71
    Vote Rating
    0
    perry_jia is on a distinguished road

      0  

    Default


    I changed my code as you said, still alert the same information:
    false, false, id:child1, id:child1.
    Code:
    // 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();
        }
    });

    Quote Originally Posted by mitchellsimoens View Post
    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.

  4. #4
    Sencha - Sencha Touch Dev Team Jacky Nguyen's Avatar
    Join Date
    Jul 2009
    Location
    Palo Alto, California
    Posts
    469
    Vote Rating
    14
    Jacky Nguyen has a spectacular aura about Jacky Nguyen has a spectacular aura about

      0  

    Default


    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.
    Sencha Touch Lead Architect

  5. #5
    Sencha User
    Join Date
    Mar 2011
    Location
    Shanghai
    Posts
    71
    Vote Rating
    0
    perry_jia is on a distinguished road

      0  

    Default


    I know, thank you very much.