[2.x] Field Override (appending other fields, and displaying help text)

[Confused]

UPDATED: May, 17
- resolved rendering issue in IE when the first control is a combo box and it has one or more other controls appended to it

A few of my forms required one or more fields/labels be added to the right of an existing field in a form without having to go through the pain of using columns and them lining up. I also wanted the ability to add small print text below the field like help text. The attached override does just that, it allows you to append other fields within the same column as an existing field:

    var form = new Ext.FormPanel({
        id: 'form',
        bodyStyle: 'padding: 10px',
        border: false,
        buttons: [{
            text: 'Submit',
            scope: this,
            handler: function() {
                Ext.getCmp('form').getForm().submit({ url: 'noscript.php' }); 
            }
        }],
        items: [{
            xtype: 'textfield',
            name: 'text',
            fieldLabel: 'TextField',
            helpText: 'This is the help info for this group of widgets',
            append: [{
                xtype: 'datefield',
                name: 'date'
            }, {
                xtype: 'button',
                text: '...',
                handler: function() {
                    alert('do something here');
                }
            }]
        }, {
            xtype: 'numberfield',
            name: 'number',
            fieldLabel: 'NumberField',
            helpText: 'Only enter numbers'
        }]
    });

The code above will create the items illustrated in the attached image.

The coding may not be 100% and if you have alternate ways of doing things, I'm all ears.

[bhaidaya]

this looks interesting.. Cant wait to try it.. keep it up.

[garraS]

Nice!
Thanks!

[manube]

Thanks!!!

First tests are OK. Very useful!!

[JorisA]

I was also looking for a way to join multiple fields (for example with dates: from ... to ... ) so thnx, Ill have a look at it later.

[gelleneu]

It should be included in the next Ext Release!! Great!

At the moment I try to append a combobox, but it doesn't work..

[gelleneu]

OK, it was my mistake. But I have probably a new problem:

I have a form with 20 elements. In a special mode, some elements will be disabled (f.E. the first 10 elements). If the items.get selector meets the "double" field, only the first item will be disabled or enabled... Hmm.

[Confused]

Tnx all... I didn't run the code through too much testing nor have had the chance to play with it more than what's in the example code. I put it through its paces and see if I can resolve some of the issues. I have been curious how it would look with text areas and other widgets. This new functionality should probably be disabled when someone is trying to create a control in a Editor Grid. And I will take a look at enabling/disabling the appended widgets.

[gelleneu]

It's a great snippet of code, I used embedded layouts in my forms before, but that's not the best solution.

Testing your code in IE7 with ExtJS 2.1 failed, because in the wrap and createChild configs, there is a config attribute "class". You have to change it to "cls" and it works in FF AND IE.

The missing disable function is a little curios: the appended field is not a part of my formular (it seems so): I disable my fields in this way (pseudo code).

for (i = 0..){

form.items.get(i).disable();

}

That works for all items but not for the appended field. :-)

[Confused]

Tnx. I will apply these changes to the code.