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.