PDA

View Full Version : FormPanel to render dynamic forms into LayoutRegions



aconran
27 Apr 2007, 6:33 PM
Small snippet of code to render a dynamic form directly to a LayoutRegion.

var FormPanel = function(formObject) {
FormPanel.superclass.constructor.call(this, Ext.id(), {autoCreate: true});
formObject.render(this.getId());
};
Ext.extend(FormPanel, Ext.ContentPanel);

After creating a dynamic form (named myForm) you can now do this:

layout.add('west', new FormPanel(myForm))

wajatimur
29 Apr 2007, 10:56 AM
Cannot place a title on this FormPanel ?

aconran
30 Apr 2007, 8:11 AM
Should be able to pass a 2nd parameter into the constructor named config then pass it up to the superclass/ContentPanel. Here is an untested fix, let me know your results:


var FormPanel = function(formObject, config) {
var config = config || {};
FormPanel.superclass.constructor.call(this, Ext.id(), Ext.apply({autoCreate: true}, config));
formObject.render(this.getId());
};
Ext.extend(FormPanel, Ext.ContentPanel);

KRavEN
1 May 2007, 6:21 AM
The var config = config || {}; is giving a syntax error.

aconran
1 May 2007, 7:17 AM
I'm using this code now and is working fine....

KRavEN
1 May 2007, 7:39 AM
strange. Gave the syntax error in firefox and IE. I changed it to "var config = config;" and it works fine. Tab title is set correctly as well.

aconran
1 May 2007, 7:45 AM
var config = config || {};

Just says if config was passed in as an argument set it to a variabled named config, otherwise set it to a blank object literal.


It could also be done like this:


if (config)
var config = config;
else
var config = {};

KRavEN
1 May 2007, 10:31 AM
How would I go about adjusting the way the form looks in the panel? Any way to inject the html div it would have been applied to if rendered normally?

timb
1 May 2007, 12:17 PM
You would probably want to change

var config = config || {}; to
config = config || {}; since the the config variable is already declared as a parameter. There should be no problem with this, as I use it throughout my apps. I've seen similar stuff in the Ext code too.

KRavEN
6 Jul 2007, 6:08 AM
How would I go about adjusting the way the form looks in the panel? Any way to inject the html div it would have been applied to if rendered normally?

Well, I actually went back to this after not worrying about it for a long time and I guess my Ext skills must have gotten better because I figured it out pretty quickly. To set the style on the FormPanel container get the element and use setStyle. Here's mine for setting the margins for the example above:


Ext.get(panel.el.dom.parentNode.id).setStyle('margin', '10px 0px 0px 10px');