View Full Version : How to render tabPanel 2 times?

14 Aug 2013, 10:24 AM
I have a tabPanel. How can I render it 2 times?
how to write code like below

panel = new Ext.FormPanel({
items: [

xtype: "tabpanel",
activeTab: 0,
deferredRender: false,
renderOnTabChange: true,

deferredRender: false, ----when we submit tab form, we want to submit whole tab form data.
reRender OnTabChange ----- (when we use deferredRender: false, some control can't rend suitable. eg dateField , htmleditor) we need to render control suitable.

Any suggestions, many thanks,

Gary Schlosberg
19 Aug 2013, 8:42 AM
Perhaps you could define the panel and then create instances of it:

Ext.define('MyApp.tab.Panel', {
extend: 'Ext.tab.Panel',
width: 200,
height: 100,
items: [{
title: 'Foo'
}, {
title: 'Bar',

Ext.create('MyApp.tab.Panel', {
title: 'Instance 1',
renderTo: Ext.getBody()

Ext.create('MyApp.tab.Panel', {
title: 'Instance 2',
renderTo: Ext.getBody()

Not sure I understand your deferredRender question. Do you have some code that recreates the problem?

20 Aug 2013, 7:02 AM
Gary, thanks for your respond. I met a question. When I was using pop windows with tab panel. I have to set deferredRender: false, for get all tab information, when I submit. But at the same time, if I set deferredRender: false, some extjs control didn't appropriate render (eg. tab2 have a datetime picker, it's render has some problem)
Do you have any solution for this issue.
Thanks in advance.

Gary Schlosberg
20 Aug 2013, 1:28 PM
In what version of ExtJS are you seeing this issue? Can you create a test case that reproduces the issue or perhaps modify mine to make it exhibit the behavior?

21 Aug 2013, 5:16 AM
I am using extjs3.4. Let you know when I create a test case.

Gary Schlosberg
21 Aug 2013, 7:32 AM
Great. In the meantime, I have moved this thread to the Ext 3.x forums so it gets viewed by the right eyes.