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

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">
<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" />
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->

<script language="JavaScript" type="text/javascript">
var form = new Ext.form.FormPanel({
collapsed: false,
autoScroll: true,
title: 'Example Panel Problem',
buttonAlign: 'center',
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: [
// basic tabs 1, built from existing content
var tabs = new Ext.TabPanel({
region: 'center',
height: 600,
activeTab: 0,
deferredRender: false, // offene Tabs erst rendern, wenn das erste mal aktiv
items: [
renderTo: 'layout'

<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>

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!

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

18 Jan 2010, 4:22 AM
This is a known bug:

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)

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!