PDA

View Full Version : FormPanel with buttons inside a tab with accordion layout doesn't remove correctly...



makana
15 Jan 2010, 4:54 AM
Hey guys!

I have a problem for which I can't find a solution...

In my app I have a complex border layout with tabpanel in the center.... one tab has an accordion layout with a formpanel as one of the child items. If I want to close the tab, I get the following error in firebug:

this.dom is undefined (see screenshot)

I reduced the code to the following. Put this in a file in the examples/tabs folder:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Tabs Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->

<script language="JavaScript" type="text/javascript">
Ext.onReady(function(){
var form = new Ext.form.FormPanel({
collapsed: false,
autoScroll: true,
title: 'Example Panel Problem',
buttonAlign: 'center',
fbar: [{ // NO PROBLEM WITHOUT BUTTONS (?)
text: 'Button'
}],
items: []
});
var panel = new Ext.Panel({
expanded: true,
title: 'Example Panel',
html: 'test'
});
var tab = new Ext.Panel({
layout: 'accordion',
layoutConfig: {
autoWidth: false,
animate: false
},
title: 'Example Tab',
closable: true,
hideBorders: true,
items: [
form,
panel
]
});
// basic tabs 1, built from existing content
var tabs = new Ext.TabPanel({
region: 'center',
width:450,
height: 600,
activeTab: 0,
deferredRender: false, // offene Tabs erst rendern, wenn das erste mal aktiv
frame:true,
items: [
panel.cloneConfig(),
tab
],
renderTo: 'layout'
});
});
</script>

<h1>Tab Panel Examples</h1>
<h3>Tabs with auto height that resize to the content. Built from existing markup.</h3><br>

<!-- container for the existing markup tabs -->
<div id="layout"></div>
</body>
</html>

To reproduce it, open the example and switch to the "Example Tab". Then make sure that the form was expanded at least once. Collapse the form and then close the tab.

The problem occurs when removing/destroying the button in the form and the panel's syncHeight-method gets called. So far.... I'm at a loss now....
The problem doesn't occur, if you don't specify buttons....

What's the problem here? Could anybody help me with this? Maybe it's a bug?
Thank you very much!

makana
18 Jan 2010, 1:07 AM
Does anybody have any idea? Please tell me, if you need additional information! Thanks in advance!

daanlib
18 Jan 2010, 4:22 AM
This is a known bug:
http://www.extjs.com/forum/showthread.php?p=423359
http://www.extjs.com/forum/showthread.php?t=89316

There are solutions in these topics, but it will be fixed in 3.1.1 (beta available at: http://www.extjs.com/forum/showthread.php?p=427976)

makana
18 Jan 2010, 4:44 AM
daanlib, thank you very much!
I've looked in the bug section but did not find this. Thanks for posting the relevant topics!