View Full Version : Need help with FormPanel and setting defaults

21 Jun 2010, 4:46 AM
Hello there!

I was wondering if anybody had any suggestions on how to properly set the defaults for a form panel. My FP is nested inside a Window, and there are two text boxes inside my FP. I'm trying to add some defaults to the FP (which I gave an autoref of 'form') in my Window component form by setting this.form.defaults.

If I inspect the dom for the 'form' component, it looks like it gets the defaults object that I've set, but nothing is being applied. However, if I take that same code and manually paste it in the .ui.js file for my Window under the form's defaults, it works like a charm. Obviously I don't want to do this though because it gets overwritten everytime.

Am I doing something wrong by trying to set this.form.defaults or is there another way this can be achieved without using the really tiny 'defaults' area in Ext Designer?


22 Jun 2010, 2:57 AM
Are you applying this.form.defaults before the initComponent is called for the window's superclass? defaults are applied in initComponent, so make sure it's called before the superclass' is called, or you've "missed" it.

22 Jun 2010, 4:44 AM
If I apply this.form.defaults before calling the initComponent.call(this) line, it doesn't seem to be able to find this.form...

23 Jun 2010, 10:43 AM
Ok that's true, I overlooked the part where you set an autoRef. In the next release of the Designer (this week), defaults is available as a config option. In the meantime, you can index the "this.items" array directly to set defaults. Before initComponent, "this.items" is a simple Array. Only after initComponent is "this.items" turned into a MixedCollection. It's a little kludgey but it will work for you in the meantime. You can optionally make the FormPanel its own exportable class by moving it to the "root" of the component tree, making it a "top-level" component (all "top-level" components are exported into their own .ui.js and .js files). You can then include the FormPanel into your Window in your startup code.

23 Jun 2010, 6:36 PM
could you slap up a code example of the this.items call? It keeps saying this.items is undefined when I try to access the first element of the array to add the defaults. So I think I must be doing something wrong...

24 Jun 2010, 5:02 AM
Right, right...not sure what I'm thinking, but they won't be available until after superclass' initComponent is called, since that's where items is assigned in the .ui.js class. But this will work:

.ui.js example:

MyWindowUi = Ext.extend(Ext.Window, {
title: 'My Window',
width: 400,
height: 250,
layout: 'fit',
initComponent: function() {
this.items = [
xtype: 'form',
title: 'My Form',
layout: 'form'

.js example setting defaults

MyWindow = Ext.extend(MyWindowUi, {
initComponent: function() {
this.defaults = {
defaults: {
// form defaults go here

So we set the defaults of the Window, which has a defaults for the FormPanel. Obviously this only works well if 1) you only have a FormPanel in the Window, or 2) the defaults only contain options that pertain to a FormPanel, and thus wouldn't affect other children of Window.

Again, we have "defaults" as a config option in the next release, so this will only be temporary for you.

27 Jul 2010, 12:52 PM
Jarred, sorry for the post to an old thread but...

I need to add a component to my root component and
1) The place that i've to do that is after the root initComponent call because before this, "this.items" is undefined, so i call this.add({xtyle: ......})
2) The component that i'm adding is a very complex layout created in designer.

The situation is that (i'm not sure if this is the cause) in some browsers and in some situations i'm visually seeing the "render/layout" and i think this is because the "add" after the "root initComponent".

Can you help me with this? There is a way to add a component before the initComponent call?

Thanks in advance

27 Jul 2010, 1:47 PM
Hi ldonofrio,

Is the component that you're adding within the same project as the component you're adding it to? If so, you can just drag it and choose "Link" to establish a linked instance.

If not, your method of calling add() after initComponent is the appropriate way to add a component. There is no way to specify this.items before initComponent when the class you are deriving from is already specifying it in initComponent (it will just override your copy). Calling add() doesn't trigger a render/layout, it is just adding your configuration/component to the "items" MixedCollection. When the initComponent chain is finished, if you have a "renderTo" option specified, then the rendering takes place. Otherwise, the component waits for you to render it or for its parent Container/Layout to render it. I'm not sure what you are seeing that looks "wrong", other than slow browser performance which is completely normal. You will see slow renders in IE and sometimes Firefox...particularly when it's a very large component of deeply nested child components & layouts. You could try to render the components as hidden (see http://www.sencha.com/deploy/dev/docs/?class=Ext.layout.ContainerLayout&member=renderHidden) and show the parent component when rendering has completed. Might work for you.

Hope that helps.