Page 1 of 8 123 ... LastLast
Results 1 to 10 of 73

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

  1. #1
    Sencha User
    Join Date
    Apr 2007
    Posts
    71

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

    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:

    Code:
        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.
    Attached Images Attached Images
    Attached Files Attached Files

  2. #2
    Sencha User
    Join Date
    Jun 2007
    Posts
    125

    Default

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

  3. #3
    Sencha User garraS's Avatar
    Join Date
    Oct 2007
    Location
    Argentina
    Posts
    204

    Default

    Nice!
    Thanks!

  4. #4
    Sencha User
    Join Date
    Jan 2008
    Location
    Nice, France
    Posts
    43

    Default

    Thanks!!!

    First tests are OK. Very useful!!


  5. #5
    Sencha User
    Join Date
    Mar 2007
    Posts
    464

    Default

    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.

  6. #6
    Sencha User
    Join Date
    Aug 2007
    Location
    Munich, Germany
    Posts
    135

    Default

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

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

  7. #7
    Sencha User
    Join Date
    Aug 2007
    Location
    Munich, Germany
    Posts
    135

    Default

    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.

  8. #8
    Sencha User
    Join Date
    Apr 2007
    Posts
    71

    Default

    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.

  9. #9
    Sencha User
    Join Date
    Aug 2007
    Location
    Munich, Germany
    Posts
    135

    Default

    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. :-)

  10. #10
    Sencha User
    Join Date
    Apr 2007
    Posts
    71

    Default

    Tnx. I will apply these changes to the code.

Page 1 of 8 123 ... LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •