PDA

View Full Version : 3.3.3 GroupTabPanel GroupTab activate not always firing on group change



vdavidoff
20 May 2011, 2:09 PM
I have a fairly complex build I'm doing, but have recreated my issue with some fairly straightforward code that I've included in this post. I have a GroupTabPanel that contains TabPanels in its GroupTabs. I need to update window.location.hash whenever a user selects one of the GroupTabs. Explaining how to reproduce my issue is probably the easiest way to explain what my issue is. Using the included code:

1. Click "Group Tab 1 Tab Panel 1" - The activate listener runs for this TabPanel (good)
2. Click "Group Tab 2 Tab Panel 1" - The activate listener runs for this TabPanel (good)
3. Click "Group Tab 1 Tab Panel 1" - The activate listener does not run for this TabPanel (bad)

I am not sure that this is actually a bug, but it's undesired behavior given what I am trying to accomplish. My specific problem is that when a sequence like the described above occurs, I am unable to update window.location.hash using an activate listener, and I haven't found any other events firing that I might take advantage of.

I attempted to use a groupchange listener on the GroupTabPanel to work my way down to the TapPanel I want to make sure to activate, but I can't access activeTab. If I dump the GroupTabPanel to the console during groupchange I see that there's an Object (the one I'd like to re-activate, in fact) assigned to activeTab, but under the GroupTabPanel's __proto__ section there is another member named activeTab that's set to null, and when I try to access activeTab, I get null. I don't really know enough to understand why activeTab would come up twice like that under the same object, or why one appears to be set to the right object, and one is null.

Any thoughts here?

Thanks.
Andrew Davidoff



<html>
<head>
<title></title>

<!-- Load Ext JS -->
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>

<!-- Load Ext JS Extensions -->
<script type="text/javascript" src="extjs/examples/ux/GroupTabPanel.js"></script>
<script type="text/javascript" src="extjs/examples/ux/GroupTab.js"></script>

<!-- Ext JS and Extension CSS -->
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="extjs/examples/ux/css/GroupTab.css" />

<script type="text/javascript">
Ext.onReady(function() {
var viewport = new Ext.Viewport({
id: 'page_viewport',
layout: 'fit',
autoScroll: true,
items: [
{
xtype: 'grouptabpanel',
tabWidth: 220,
activeGroup: 0,
items: [
{
id: 'group_tab_1',
items: [
{ title: 'Group Tab 1 Grouping Item' },
{
title: 'Group Tab 1 Tab Panel 1',
xtype: 'tabpanel',
items: [
{
title: 'Tab 1',
listeners: {
activate: function() { console.log('Group Tab 1 Tab Panel 1 Tab 1 activate'); }
}
},
{
title: 'Tab 2',
listeners: {
activate: function() { console.log('Group Tab 1 Tab Panel 1 Tab 2 activate'); }
}
}
],
listeners: {
activate: function () {
console.log('Group Tab 1 Tab Panel 1 activate');
},
deactivate: function () {
console.log('Group Tab 1 Tab Panel 1 deactivate');
}
}
},
{
title: 'Group Tab 1 Tab Panel 2',
xtype: 'tabpanel',
items: [
{
title: 'Tab 1',
listeners: {
activate: function() { console.log('Group Tab 1 Tab Panel 2 Tab 1 activate'); }
}
},
{
title: 'Tab 2',
listeners: {
activate: function() { console.log('Group Tab 1 Tab Panel 2 Tab 2 activate'); }
}
}
],
listeners: {
activate: function () {
console.log('Group Tab 1 Tab Panel 2 activate');
},
deactivate: function () {
console.log('Group Tab 1 Tab Panel 2 deactivate');
}
}
}
],
listeners: {
activate: function() {
console.log('Group Tab 1 activate');
},
deactivate: function() {
console.log('Group Tab 1 deactivate');
}
}
},
{
id: 'group_tab_2',
items: [
{ title: 'Group Tab 2 Grouping Item' },
{
title: 'Group Tab 2 Tab Panel 1',
xtype: 'tabpanel',
items: [
{
title: 'Tab 1',
listeners: {
activate: function() { console.log('Group Tab 2 Tab Panel 1 Tab 1 activate'); }
}
},
{
title: 'Tab 2',
listeners: {
activate: function() { console.log('Group Tab 2 Tab Panel 1 Tab 2 activate'); }
}
}
],
listeners: {
activate: function () {
console.log('Group Tab 2 Tab Panel 1 activate');
},
deactivate: function () {
console.log('Group Tab 2 Tab Panel 1 deactivate');
}
}
},
{
title: 'Group Tab 2 Tab Panel 2',
xtype: 'tabpanel',
items: [
{
title: 'Tab 1',
listeners: {
activate: function() { console.log('Group Tab 2 Tab Panel 2 Tab 1 activate'); }
}
},
{
title: 'Tab 2',
listeners: {
activate: function() { console.log('Group Tab 2 Tab Panel 2 Tab 2 activate'); }
}
}
],
listeners: {
activate: function () {
console.log('Group Tab 2 Tab Panel 2 activate');
},
deactivate: function () {
console.log('Group Tab 2 Tab Panel 2 deactivate');
}
}
}
],
listeners: {
activate: function() {
console.log('Group Tab 2 activate');
},
deactivate: function() {
console.log('Group Tab 2 deactivate');
}
}
}
],
listeners: {
groupchange: function() {
console.log('Group Tab Panel groupchange');
}
}
}
]
});
});
</script>
</head>

<body>
</body>
</html>

vdavidoff
24 May 2011, 10:36 AM
Just bumping this once before I let it fall off.

vdavidoff
28 May 2011, 10:12 PM
I got something working here. It's probably kind of a hack, but it's working for me and is relatively simple. I am not sure how complete your view of the solution will be without knowing the rest of how I implemented this location hash changing in my application, but I ended up leveraging my GroupTabPanel's tabchange listener to solve my problem.

The goal was to ensure that the activate event always fires for the active Tab within a GroupTabPanel group when switching to it, even if the Tab being switched to was the last one that was active within the GroupTabPanel group. The native behavior seems to fire no events at all for the Tab you're switching to within a GroupTabPanel group if that Tab was the last active tab within that GroupTabPanel group.

I readily admit that I am not entirely clear on why the "activate" event is sometimes simply "true", but in my testing, this was sometimes the case, so I test for it.



tabchange: function(gtp) {
if (gtp.activeGroup.activeTab.events.activate != true) {
gtp.activeGroup.activeTab.events.activate.fire();
}
}