View Full Version : Newbie question - how to replace a form in a Ext.Window

4 Feb 2010, 12:25 PM
I am creating a window which uses a border layout. The 'north' is a data view and 'center' is a formPanel. Based on user interaction, I want to be able to replace the form in this window with a updated (new) form.
The code outline:

var win = new Ext.Window({
//...config params
layout: 'border',
items: [ { xtype: 'panel',
region: 'north',
collapsible: true,
collapsed: false,
layout: 'fit',
height: 35, collapseMode :'mini',
bodyStyle: {},
items: [lview] //dataView
}, {
xtype: 'panel',
layout: 'form',
region: 'center',
autoHeight: true,
items: [nform]
//buttons etc.

After displaying this window, the user may select another item to see in the form - and I want to replace the existing form with the newly created form while retaining the window.
Q1: What is the correct way to update the form in this window?
Something like
win.items[1].items[0] = newlycreatedForm ?

(..I am afraid this style of coding is fragile if the components are moved around/added)

Q2: Since the form fields are dynamically added, how do I size the window so that the entire form is visible and the scrollbars do not come on?

Thanks for your help.

4 Feb 2010, 1:26 PM
Your looking for the add and remove methods of the containing Panel/Window.

Though I prefer using a card layout and setting the active item, as it visually switches faster than a complete remove/add does.

4 Feb 2010, 1:34 PM
Thanks for your help. Can you provide some sample/pesudo code fragment for the card layout?
I am currently doing
var mxc = cwin.items.items[1].items; //get the items in the center panel
var rem = mxc.removeAt(0); //remove the first element in the panel (which is a FormPanel)
mxc.add(nform);//add the new form

This does not remove the old form, instead the oldform is pushed down and the new form is rendered above creating a cascade of forms in Y axis - one above another..! what am I doing wrong?

4 Feb 2010, 2:04 PM

4 Feb 2010, 2:47 PM
Why use removeAt? I mentioned remove, which is a method of the containing Panel/Window. This takes a panel reference or an id as the parameter. Easy enough.

As for the card layout, its just like using tabs, or anything else that has items for that matter.

layout: 'card',
activeItem: 0,
items: [{
title: 'Bla'
title: 'Bleh'

Then you switch the active item using...

// switch to second panel
// switch to first panel

You should really take a deeper look at the documentation.

4 Feb 2010, 2:53 PM
I have this working now. For anyone interested:
//get the panel
var panel = ... ;
does the job. I also tried the card layout.
I did
visually this seem to do the same thing as removing/adding and doing the layout. I did not notice a difference in either performance or rendering. There is a "ripple" as the form is rendered.
... other thoughts/comments?