FormPanel to render dynamic forms into LayoutRegions

[aconran]

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]

Cannot place a title on this FormPanel ?

[aconran]

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]

The var config = config || {}; is giving a syntax error.

[aconran]

I'm using this code now and is working fine....

[KRavEN]

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]

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]

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]

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]

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');