reducing nesting confusion- fieldset objs? column objs?

One of the biggest stumbling blocks I have when getting things going in ext is the deep nesting that is sometimes required. Items within items within items. Take for example, I need to popup a window containing a FormPanel which contains 2 columns, each of which contains 1 or more fieldsets, each of which contain N fields.

In the following code, I am just creating the formPanel object, which I later use in my window items. This code works, by the way. Note also, that I have opted for the indenting pattern that I have been using for 20 years, where the opening and closing brace are on the same column. Sorry if it is not what you are used to seeing.

var editFormPanel = new Ext.form.FormPanel(
{
title: 'Edit Transaction Details',
labelWidth: 80,
heigh:400,
bodyStyle:'padding:5px 5px 0',
border: false,
items:
[
{
layout: 'column',
items:
[
{
columnWidth: .5,
layout: 'form',
title: 'Left',
border:false,
header: false,
bodyStyle:'padding:5px 5px 0',

items:
[
{
xtype: 'fieldset',
title: 'Closing Details',
autoHeight: true,
items:
[
{
xtype:'textfield',
fieldLabel:"Borrower First Name",
name:"borrowerFName"
},

{
xtype:'textfield',
fieldLabel:"Borrower Last Name",
name:"borrowerLName"
}
]
}

]
},
{
columnWidth: .5,
layout: 'form',
title: 'Right',
border:false,
header: false,
bodyStyle:'padding:5px 5px 0',
items:
[
{
xtype: 'fieldset',
title: 'Package',
autoHeight: true,
items:
[
{
xtype:'textfield',
fieldLabel:"Tracking",
name:"trackingNum"
}
]
},
{
xtype: 'fieldset',
title: 'Misc',
autoHeight: true,
items:
[
{
xtype:'textarea',
fieldLabel:"Notes",
name:"comments"
}
]
}
]
}
]
}
]
});

So- here is my question. Is there a way I can create my fieldsets and columns individually as an object, so as to make it more readable? And if I do so, is there a performance penalty?

I see the docs for Class Ext.form.FieldSet but I don't think I can create one of these using new. Similarly, I found Class Ext.layout.ColumnLayout, but I don't see a way to create an object for a single column.

If I could, then I could do something like this (fictitious code):

var fieldSet1 = new Ext.form.Fieldset(
{
title: 'Fieldset 1',
items:
[
{
fields...
}
]
}

... etc for fieldSet2, 3, 4

var editFormCol1 = new Ext.layout.Column(
{
title: 'column1',
width: .5,
items:
[ fieldSet1, fieldSet2 ]
}

var editFormCol2 = new Ext.layout.Column(
{
title: 'column1',
width: .5,
items:
[ fieldSet3, fieldSet4 ]
}

var editFormPanel = new Ext.form.FormPanel(
{
title: 'Edit Transaction Details',
labelWidth: 80,
heigh:400,
bodyStyle:'padding:5px 5px 0',
border: false,
items: [ editFormCol1, editFormCol2 ]
}

Is there a reasonable way to do something like I describe?

Thanks for a fantastic toolkit!

That's just what I was looking for- thanks much!

You will incur a performance hit if you use the constructor form of object creation, rather than configs. This will cause the individual objects to render as they're are created, rather than rendering all components once. This might not be a big deal on a small form/layout, but as things get more complex, you will definitely see performance improvements using configs.

Note that you can declare config as string vars and use them where appropriate, so you don't have to have things indented 10+ tab stops across.

You can define anything in braces as a var, so you could for example, change your code to this. You can take this as far as you need.

var cols = {
layout: 'column',
items:
[
{
columnWidth: .5,
....
}
var editFormPanel = new Ext.form.FormPanel(
{
title: 'Edit Transaction Details',
labelWidth: 80,
heigh:400,
bodyStyle:'padding:5px 5px 0',
border: false,
items:
[cols]
....

Note that you can declare config as string vars and use them where appropriate, so you don't have to have things indented 10+ tab stops across.

Hmm. Can you show me what that syntax would look like? This might be a nice solution- kinda like a #define in C.

Thanks

#If you have any other info about this subject , Please add it free.#

7 January 2009 | cameltoepants.com | edit