PDA

View Full Version : [CLOSED] Ext.tab.Panel listeners error



perry_jia
23 Nov 2011, 6:26 AM
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
23 Nov 2011, 12:19 PM
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
23 Nov 2011, 5:39 PM
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
10 Jan 2012, 4:22 PM
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
10 Jan 2012, 6:19 PM
I know, thank you very much.