PDA

View Full Version : Add new tab (panel) to TabPanel after all tabs removed



ShatyUT
28 Feb 2010, 12:46 PM
I have a tab panel that I initially add some number of tabs to but I want the user to be able to remove them if they are incorrect tabs and I provide a method for them to add new tabs. The tabs can be removed fine and new tabs can be added fine and all works well as long as I haven't removed all tabs.

If all tabs are removed and then a new tab is added it shows up fine (not active tab) but when I click on the newly added tab, I get an error in ext-all.js that this.getComponent(a) is undefined.

Should I be able to do this? This happens in both FF and IE. I searched and couldn't find anyone else with this issue.

mitchellsimoens
28 Feb 2010, 6:59 PM
I'm wondering if TabPanel doesn't like having no tabs.

To test this, add a "beforedestroy" listener and count number of tabs current. If the number is 1 (remember the beforedestroy event will fire before the tab is destroyed) then add a new tab you want and then return true.

Animal
28 Feb 2010, 10:26 PM
I get an error in ext-all.js that this.getComponent(a) is undefined.

Should I be able to do this? This happens in both FF and IE. I searched and couldn't find anyone else with this issue.

What debugging have you done?

ShatyUT
2 Mar 2010, 2:57 PM
I'm wondering if TabPanel doesn't like having no tabs.

I'm wondering the same thing...that's why I'm asking. If it doesn't like having no tabs, then I'll have to take that into consideration for the UI. I don't see why it couldn't have 0 tabs though. If it is written that way, then maybe I need to extend it to fix for that or something.


What debugging have you done?

Well, the error occurs in ext-all.js so not too much. Since I am able to add tabs at any other time without errors I'm assuming I'm doing it right and that either I am expecting the wrong functionality or maybe there is a bug.

I'll try to do this in a more simpler way and see if it still behaves this way.

ShatyUT
4 Mar 2010, 7:48 AM
OK, now that I'm not on vacation anymore, I greatly simplified my code and still see the same issue.

Should I be able to close all tabs on a TabPanel and then programmatically add a new tab? If so, it doesn't appear to be working.



var count = 3;

Ext.onReady(function(){
var tp = new Ext.TabPanel({
renderTo: document.body,
plain: true,
width: 600,
activeTab: 0,
height: 600,
items: [{
title: 'Tab 1',
closable: true
},{
title: 'Tab 2',
closable: true
}],
bbar: [{
text: 'Add',
handler: function() {
tp.add({
title: 'Tab ' + count++,
closable: true
});
}
}]
});

});


With the above code, you can add a new tab initially and see that it shows up and you can select it just fine but then close all tabs and then click the button to add another one and it still throws an error.

fay
4 Mar 2010, 8:00 AM
Well, the error occurs in ext-all.js so not too much.

For development/debugging use ext-all-debug.js.

I just tested the example you posted and it works fine for me in IE and FF. There's something else wrong in your code/page.

fay
4 Mar 2010, 8:04 AM
Test this (of course, change the ext311 path to yours):


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

<link rel="stylesheet" type="text/css" href="../ext311/resources/css/ext-all.css">
<script type="text/javascript" src="../ext311/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext311/ext-all-debug.js"></script>

<script type="text/javascript">
var count = 3;

Ext.onReady(function(){
var tp = new Ext.TabPanel({
renderTo: document.body,
plain: true,
width: 600,
activeTab: 0,
height: 600,
items: [{
title: 'Tab 1',
closable: true
},{
title: 'Tab 2',
closable: true
}],
bbar: [{
text: 'Add',
handler: function() {
tp.add({
title: 'Tab ' + count++,
closable: true
});
}
}]
});
</script>
</head>

<body></body>
</html>

ShatyUT
4 Mar 2010, 8:14 AM
Fay, thanks for taking a look. I am still seeing the same error with your HTML page....there was a missing }); but I get the same behavior.

Here is where the error occurs in ext-all-debug.js..."this.getComponent(item) is undefined)


getTabEl : function(item){
return document.getElementById(this.id + this.idDelimiter + this.getComponent(item).getItemId());
},


I'm using FF 3.5.8 and IE 8. In IE 8 I clicked the "Compatibility View" button and still get the same issue.

Now, I'm fairly certain I am using Ext 3.1.1 but I am not completely sure how I can prove that.

ShatyUT
4 Mar 2010, 8:19 AM
OK, it must've been an older version of Ext. I just deleted what I had and replaced with 3.1.1 and am no longer seeing the problem.

Thanks for the attention guys!