[FIXED-438][3.1] Error when resizing a window with enableTabScroll

[PranKe01]

Ext version tested:


Ext 3.1



Adapter used:


ext
air



css used:


ext-all.css
ext-air.css
statusbar.css





Browser versions tested against:


Adobe Air



Operating System:


WinXP Pro



Description:


I got a Panel with enableTabScroll: true and I am using a buttongroup there. I resize the window so that the tabscrolling gets active, click on the arrows to show the menu and then make the window bigger again, I get an error.




Steps to reproduce the problem:


See above.



The result that was expected:


No errors :)



The result that occurs instead:


The window is resized properly - everything looks good, but I get an error:

TypeError: Undefined value

at app:/lib/ext/ext-all-debug.js : 3844

at app:/lib/ext/ext-all-debug.js : 9785

at app:/lib/ext/ext-all-debug.js : 34320

at app:/lib/ext/ext-all-debug.js : 9779

at app:/lib/ext/ext-all-debug.js : 9770

at app:/lib/ext/ext-all-debug.js : 34314

at app:/lib/ext/ext-all-debug.js : 1577

at app:/lib/ext/ext-all-debug.js : 2348

at app:/lib/ext/ext-all-debug.js : 1253

undefined at undefined : undefined

[Jamie Avins]

Please post a code sample so we can recreate the issue and test a proper fix.

[PranKe01]

Hi - the code is still a big long, but I think it's okay to test:


this.showInterface = function(){
var tabs = new Ext.TabPanel({
region: 'center',
activeTab: 0,
border: false,
monitorResize: true,
enableTabScroll: true,
defaults: {
autoScroll: true
},
items: [{
title: 'Start',
id: 'Start',
height: 200,
html: '<h2>Resize me, click on the arrow from the tabscrolling and make me bigger again!</h2>',
style: 'padding: 5px;'
}]
})

var content = new Ext.Panel({
region: 'north',
height: 108,
border: false,
monitorResize: true,
enableTabScroll: true,
title: 'Test',
id: 'interfacepanel',
tools: [{
id: 'online',
qtip: 'Online'
},{
id: 'offline',
qtip: 'Offline'
},{
id: 'germanlang',
qtip: 'Deutsch'
},{
id: 'help',
qtip: 'Hilfe'
}, {
id: 'close',
qtip: 'Ausloggen'
}],
tbar: [{
xtype: 'buttongroup',
columns: 1,
title: 'Neu',
items: [{
xtype: 'splitbutton',
rowspan: 2,
scale: 'large',
iconCls: 'neu',
iconAlign: 'top',
arrowAlign: 'bottom',
width: 50,
height: 54,
menu: [{
text: 'Neu',
iconCls: 'neu'
},{
text: 'Neu',
iconCls: 'neu'
},{
text: 'Neu'
}]
}]
}, {
xtype: 'buttongroup',
columns: 2,
title: 'Post',
items: [{
text: 'Post',
scale: 'large',
rowspan: 2,
iconCls: 'nach',
iconAlign: 'top'
}, {
text: 'Neu',
scale: 'large',
rowspan: 2,
iconCls: 'neu',
iconAlign: 'top'
}]
}, {
xtype: 'buttongroup',
columns: 4,
title: 'Abc',
items: [{
text: 'Mein',
scale: 'large',
rowspan: 2,
iconCls: 'mein',
iconAlign: 'top'
}, {
text: 'All',
scale: 'large',
rowspan: 2,
iconCls: 'all',
iconAlign: 'top'
}, {
text: 'Gen',
iconCls: 'gen'
}, {
text: 'Pap',
scale: 'large',
rowspan: 2,
iconCls: 'pap',
iconAlign: 'top'
}, {
text: 'Ab',
iconCls: 'ab'
}]
}]
});

new Ext.Viewport({
layout: 'border',
items: [content, tabs]
});
};

I use this code with Adobe Air.

[evant]

I'm not really clear on what the issue is here. Can you explain your test case a bit? For example, how can you get the tab scroller to show up when you only have a single tab?

[PranKe01]

Okay - the TabScrolling is also active for the Panel in which is a ButtonGroup. And this ButtonGroup gets a little arrow on which you can click and the hidden items are displayed in a list. If you left this list open and make the window bigger, so all items are visible again, the error comes. This error does nothing have to do with the TabPanel I included in this sample ;)

Hope it's a bit more clear now.

[evant]

No, it's not any clearer for me.

You have the north region as a Panel, but you have enableTabScroll: true as a parameter, which the Panel will ignore.

[PranKe01]

Ah - okay. I tried it with commenting the line and the TabScrolling still works. But the error still occurs. Here again the error:


TypeError: Result of expression 'me.dom' [undefined] is not an object.

at app:/lib/ext/ext-all-debug.js : 3844

So the Problem is following:
I got a Panel with a buttongroup.
I make the window as small, as not all items can be dsiaplyed -> a arrow will appear where a list is shown when you click on.
While the list is shown, I resize the window, so that all items are visible again. Right now the error appears.

[evant]

Does this happen only in Air, what happens if you try it in a browser? I can't replicate anything like you're talking about in FF.

[PranKe01]

I will try it today. I only tested it in Adobe Air.

[PranKe01]

The error also appears in firefox! I attached a testcase ;)

[Jamie Avins]

Your test case has 1 tab, is it supposed to have more? What steps do we need to take to have the error happen?

[PranKe01]

The Tabs are not the problem. The buttongroup is! When you make your FF window so small that not all buttons can be displayed a arrow appears. Click on that arrow to show the button-list. While the list is open, make the window so big, that all buttons can be displayed again - and whoops, the error appears.

I am using Windows 7 with FireFox 3.5.5. In Adobe Air the same error appears.

[Jamie Avins]

Fixed in svn 5928 for 3.1.1.

[PranKe01]

Very good :) Thank you for your fast work.