ExtJs 4.1.1 TabPanel card generating duplicate html markup

[gazal]

I have a tabpanel with the following cards:
1) a form
2-n) a container with forms nested within
n+1) another form

one of cards 2-n is displayed based on a combobox input from the form in the first card. The form is initialized with a value for this combo, so at no point is this value not set.

Now my problem is, the child items within the nested forms within containers in card 2-n are generating duplicate html markup.

I've debugged and found out that the components' getRenderTree is invoked a first time setting the rendering flag, this generates html markup but Renderable.onRender is not invoked to set el and clear rendering flag.

The stack trace for this occurrence is listed below:

getRenderTree()Renderable.js (line 581)getItemsRenderTree(items=[Object { xtype="fieldcontainer", fieldLabel="SMS Content", hideEmptyLabel=false, more...}, Object { xtype="hiddenfield", name="stateId", isContained={...}, more...}, Object { xtype="hiddenfield", name="typeId", value=1, more...}], renderCfgs=Object {})Layout.js (line 319)
getRenderTree()Container.js (line 809)
doRenderItems(out=["<", "div", " ", 51 more...], renderData=Object { $comp={...}, $layout={...}, ownerId="creativesmsform-3054"})Container.js (line 572)
doRenderBody(out=["<", "div", " ", 51 more...], renderData=Object { $comp={...}, $layout={...}, ownerId="creativesmsform-3054"})Container.js (line 552)
(?)(out=["<", "div", " ", 51 more...], values=Object { $comp={...}, $layout={...}, ownerId="creativesmsform-3054"}, parent=Object {}, xindex=1, xcount=1)57 (line 4)
applyOut(values=Object { $comp={...}, $layout={...}, ownerId="creativesmsform-3054"}, out=["<", "div", " ", 51 more...], parent=undefined)XTemplate.js (line 301)
doRenderContainer(out=["<", "div", " ", 51 more...], renderData=Object { $comp={...}, id="creativesmsform-3054", ui="default", more...})Container.js (line 564)
(?)(out=["<", "div", " ", 51 more...], values=Object { $comp={...}, id="creativesmsform-3054", ui="default", more...}, parent=Object {}, xindex=1, xcount=1)3 (line 42)
applyOut(values=Object { $comp={...}, id="creativesmsform-3054", ui="default", more...}, out=["<", "div", " ", 51 more...], parent=undefined)XTemplate.js (line 301)
generateMarkup(spec=Object { tag="div", tpl={...}, cls="x-panel x-panel-default", more...}, buffer=["<", "div", " ", 51 more...])ext-debug.js (line 10430)
generateMarkup(spec=[Object { tag="div", tpl={...}, cls="x-panel x-panel-default", more...}], buffer=["<", "div", " ", 51 more...])ext-debug.js (line 10401)
doRenderItems(out=["<", "div", " ", 51 more...], renderData=Object { $comp={...}, $layout={...}, ownerId="basecreativecontainer-3053"})Container.js (line 575)
doRenderBody(out=["<", "div", " ", 51 more...], renderData=Object { $comp={...}, $layout={...}, ownerId="basecreativecontainer-3053"})Container.js (line 552)
(?)(out=["<", "div", " ", 51 more...], values=Object { $comp={...}, $layout={...}, ownerId="basecreativecontainer-3053"}, parent=Object {}, xindex=1, xcount=1)7 (line 4)
applyOut(values=Object { $comp={...}, $layout={...}, ownerId="basecreativecontainer-3053"}, out=["<", "div", " ", 51 more...], parent=undefined)XTemplate.js (line 301)
doRenderContainer(out=["<", "div", " ", 51 more...], renderData=Object { $comp={...}, id="basecreativecontainer-3053", ui="default", more...})Container.js (line 564)
(?)(out=["<", "div", " ", 51 more...], values=Object { $comp={...}, id="basecreativecontainer-3053", ui="default", more...}, parent=Object {}, xindex=1, xcount=1)8 (line 4)
applyOut(values=Object { $comp={...}, id="basecreativecontainer-3053", ui="default", more...}, out=["<", "div", " ", 51 more...], parent=undefined)XTemplate.js (line 301)
generateMarkup(spec=Object { tag="div", tpl={...}, cls="x-container x-tabpanel-child x-container-default", more...}, buffer=["<", "div", " ", 51 more...])ext-debug.js (line 10430)
markup(spec=Object { tag="div", tpl={...}, cls="x-container x-tabpanel-child x-container-default", more...})ext-debug.js (line 10468)
doInsert(el=div#tabpanel-2958-body.x-panel-body, o=Object { tag="div", tpl={...}, cls="x-container x-tabpanel-child x-container-default", more...}, returnElement=undefined, pos="beforeend", sibling="", append=true)ext-debug.js (line 12922)
append(el=Object { dom=div#tabpanel-2958-body.x-panel-body, id="tabpanel-2958-body", $cache={...}, more...}, o=Object { tag="div", tpl={...}, cls="x-container x-tabpanel-child x-container-default", more...}, returnElement=undefined)ext-debug.js (line 10556)
render(container=Object { dom=div#tabpanel-2958-body.x-panel-body, id="tabpanel-2958-body", $cache={...}, more...}, position=12)Renderable.js (line 783)
renderItem(item=Object { xtype="basecreativecontainer", creativeGroupTypeId=1, isContained={...}, more...}, target=Object { dom=div#tabpanel-2958-body.x-panel-body, id="tabpanel-2958-body", $cache={...}, more...}, position=12)Layout.js (line 436)
setActiveItem(newCard=Object { xtype="basecreativecontainer", creativeGroupTypeId=1, isContained={...}, more...})Card.js (line 332)
setActiveTab(card=Object { xtype="basecreativecontainer", creativeGroupTypeId=1, isContained={...}, more...})Panel.js (line 457)
onClick(e=Object { browserEvent=Event click, type="click", button=0, more...}, target=button#tab-3207-btnEl.x-tab-center)Bar.js (line 140)
(?)(e=Object { browserEvent=Event click, type="click", button=0, more...}, options=Object { scope={...}, element="el", click=function()}, fn=function(), scope=Object { dock="top", plain=false, border="1px 1px 1px 1px", more...}, ename="click", dom=div#tabbar-2959.x-tab-bar, wrap=function(), args=undefined, X=Object { _startTime=1343733994029, global=window, buildSettings={...}, more...}, evtMgr=Object { hasBoundOnReady=true, hasFiredReady=true, deferReadyEvent=1, more...})29 (line 43)
wrap(e=click clientX=676, clientY=183, args=undefined)ext-debug.js (line 9257)

Then a subsequent invocation renders the components again and finishes properly. The stack trace for this invocation is:

getRenderTree()Renderable.js (line 581)render(container=Object { dom=div#creativesmsresponseform-3935-body.x-panel-body, id="creativesmsresponseform-3935-body", $cache={...}, more...}, position=0)Renderable.js (line 773)
renderItem(item=Object { xtype="fieldcontainer", fieldLabel="SMS Content", hideEmptyLabel=false, more...}, target=Object { dom=div#creativesmsresponseform-3935-body.x-panel-body, id="creativesmsresponseform-3935-body", $cache={...}, more...}, position=0)Layout.js (line 436)
renderItems(items=[Object { xtype="fieldcontainer", fieldLabel="SMS Content", hideEmptyLabel=false, more...}, Object { xtype="hiddenfield", name="stateId", isContained={...}, more...}, Object { xtype="hiddenfield", name="typeId", value=20, more...}], target=Object { dom=div#creativesmsresponseform-3935-body.x-panel-body, id="creativesmsresponseform-3935-body", $cache={...}, more...})Layout.js (line 380)
renderChildren()Layout.js (line 361)
invalidate(components=[Object { xtype="creativesmsresponseform", showCreativeLabel=true, creativeContainer={...}, more...}], full=true)Context.js (line 669)
invalidate(components=[Object { xtype="basecreativecontainer", creativeGroupTypeId=7, isContained={...}, more...}], full=true)Context.js (line 673)
invalidate(components=[Object { xtype="tabpanel", items={...}, dockedItems={...}, more...}], full=true)Context.js (line 673)
invalidate(components=[Object { title="Create New Creative Group", initialConfig={...}, events={...}, more...}], full=null)Context.js (line 673)
flushInvalidates()Context.js (line 506)
run()Context.js (line 1034)
flushLayouts()Abstra...nent.js (line 84)
resumeLayouts(flush=true)Abstra...nent.js (line 100)
resumeLayouts(flush=true)Abstra...nent.js (line 3437)
setActiveTab(card=Object { xtype="basecreativecontainer", creativeGroupTypeId=7, isContained={...}, more...})Panel.js (line 467)
onClick(e=Object { browserEvent=Event mouseleave, type="mouseleave", button=0, more...}, target=em#tab-4023-btnWrap)Bar.js (line 140)
(?)(e=Object { browserEvent=Event mouseleave, type="mouseleave", button=0, more...}, options=Object { scope={...}, element="el", click=function()}, fn=function(), scope=Object { dock="top", plain=false, border="1px 1px 1px 1px", more...}, ename="click", dom=div#tabbar-3769.x-tab-bar, wrap=function(), args=undefined, X=Object { _startTime=1343733994029, global=window, buildSettings={...}, more...}, evtMgr=Object { hasBoundOnReady=true, hasFiredReady=true, deferReadyEvent=1, more...})29 (line 43)
wrap(e=click clientX=676, clientY=188, args=undefined)ext-debug.js (line 9257)

Finally the html on page has both markups:

<table id="fieldcontainer-3936" class="x-container-default" cellpadding="0" style="border-width: 0pt; table-layout: fixed; width: 676px;" data-errorqtip=""><table id="hiddenfield-3940" class="x-field-default" cellpadding="0" style="border-width: 0pt; table-layout: auto;">

<table id="hiddenfield-3941" class="x-field-default" cellpadding="0" style="border-width: 0pt; table-layout: auto;">

<table id="fieldcontainer-3936" class="x-container x-form-fieldcontainer x-form-item x-container-default x-anchor-form-item" cellpadding="0" style="border-width:0;">

<table id="hiddenfield-3940" class="x-field x-form-item-hidden x-field-default x-anchor-form-item" cellpadding="0" style="border-width:0;">

<table id="hiddenfield-3941" class="x-field x-form-item-hidden x-field-default x-anchor-form-item" cellpadding="0" style="border-width:0;">

<div id="creativesmsresponseform-3935-overflowPadderEl" style="font-size: 1px; width:1px; height: 1px;"></div>

From the id of the html elements generated, it can be clearly observed that they are rendered twice. Please tell me what I'm doing wrong.

[gazal]

Moderator(s), please close this.
I found out that there was an afterRender in the form and we'd missed to callParent().
Spent hours trying to figure this one out

[gazal]

This was a very silly mistake. But it would be nice if the framework had some error/warning message to indicate when a life-cycle method like afterRender is overridden without invoking its parent.