View Full Version : function to replace panel with new one

5 Mar 2010, 3:18 PM
hi guys,

Spend few days on this simple issue but still not able to find solutions. Any help would be appreicated.

I have a toolbar displaying in north region. When click on toolbar item, I wan overwrite my south region panel with few formPanel. Below is the code I tried but not working...

// ToolBar displayed in North region
text:'Add Record',
handler: addRecord

// Default panel for South region
dtlFormPanel = new Ext.FormPanel({
id: 'formPanel',

var addRecord= function() {
var abc = new Ext.FormPanel({
id: 'addNewForm',
items: [{
xtype: 'textfield',
fieldLabel: 'NewName',
name: 'NewName'

5 Mar 2010, 3:36 PM
Second time today.

You use the render function.

Have you read its API desc?

5 Mar 2010, 3:43 PM
newbies to ExtJS. I did rendering and it worked. But what I'm asking is how to replace aaa formPanel with bbb fornPanel when one of my toolbar item is clicked. Simple render is working. I guess I need some kind of replace funcation or so.

5 Mar 2010, 4:02 PM
I tried this way of rendering but nothing happens. No Error No output. hmmmm...strainge


5 Mar 2010, 10:58 PM
So that's a "no" then.

You don't want it to work.

7 Mar 2010, 10:16 AM
Animal I dont know what do you Means ??

Can anyone give me hint how to proceed.

7 Mar 2010, 10:37 AM
1st. Forget about 'render' word until you've read its documentation and sources.

abc.render(Ext.get('formPanel')); - it is the same as , for example,
creating a new file in sectors belong to other file. Or the same as creating a new array using memory of existing array.
Or the same as writing a letter on a page containing another text.

Find examples with viewport
Create a component. Add it to viewport with add function. Then remove it from viewport with remove function

3rd Make a more difficult example.

ExtJs has some 'rules' which are not explictly defined somewhere.If you are beginner than you have to read some documentation and read the source of all samples. Then take some sample which is nearest to your task and make few changes step by step until it works.

You can not mix Ext.Component layer which is above DOM with simple DOM without understanding that Ext.Component use a DOM as a source. Can you make 2 different components in same DOM element? Can you display 2 html pages in one <body> tag? So don't think that you are stupid - just think that ExtJs is not so simple that you can use it without reading the documentation

9 Mar 2010, 1:46 PM
Thanks "ZeusTheTrueGod" for your explanation. So the only option I hv is #2.

But when I remove container and replace, it means formal container will be destroyed. But I dont wanna destroy but just replace or hide old content.

in bwt I was trying to come up function: but not working exactly.

abc = function()
var center = Ext.getCmp('southPanelID');
center.remove('southPanelDefaulContent', false);

error:center.getLayout().setActiveItem is not a function

9 Mar 2010, 1:48 PM
card layout!

9 Mar 2010, 1:49 PM
why don't you explore the examples? Much of these techniques are shown there. here is a simple example:

9 Mar 2010, 1:55 PM
Thanks 'anminal' I already tried with card layout but didnt worked.

mainPanel = new Ext.Panel({
layout: 'border',
items: [gridPanel, southPanelID]

but mine:
southPanelID & southPanelNEW are define as card layout.

"steffenk:" I searched soo many examples for last few days none has what I wanted. Obsously I may not have exact match, the close I hv was from ExtJS 2.0 but thats not working.