1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    2
    Vote Rating
    0
    mchiciak is on a distinguished road

      0  

    Default Adding html NEXT to a form item (like a button)

    Adding html NEXT to a form item (like a button)


    Is there anyway in EXTJS to add an icon that is directly to the right of a control? I am working on form layout that has different columns depending on what row you are on. For instance, I may have one fieldset called 'Basic Information'. Within that fieldset, I have one row, which has 3 columns, one row that has only 1 column, and one row that has 5 columns. I figured out how to do this by using ext.fieldsets as rows and columns themselves.

    My problem is that, in some cases, we need an icon to show up next to any given field (like a text box for instance) and I am struggling to come up with a good way to accomplish that. My only solution so far was to add yet another column (fieldset) that will hold the button and adjusts the widths as necessary. But since all our forms will be dynamic, the calculations for the width of the column that houses the button will be challenging so it shows up consistently in the correct spot.

    Here is the image of what my code has generated so far, you can see my "test" icon shows up right next to where I wanted it to, but that was because my code right now is simply hardcoded to prove a concept. When it becomes dynamic (X number of rows, X number of columns per individual row) it is going to prove difficult to calculate it so it shows up exactly like it is in the image I have given.




    And here is my code snippet...


    Code:
    <body></body>
    
    new Ext.form.FormPanel({
                renderTo: 'divLayoutEditor',
                title: 'Create Lead',
                bodyStyle:'padding:5px 5px 5px 5px',
                items: [
                    new Ext.form.FieldSet({
                        title: 'Basic Information',
                        layout: 'form',
                        items: [
                            //Row 1...contains 3 columns
                            new Ext.form.FieldSet({
                                bodyBorder: false,
                                border: false,
                                layout: 'column',
                                //each column is another fieldset with layout 'form'
                                //inside these columns, is where the fields go that you mapped with the tool
                                items: [
                                    //col 1
                                    new Ext.form.FieldSet({
                                        bodyBorder: false,
                                        border: false,
                                        columnWidth: .33,
                                        layout: 'form',
                                        items: [
                                            new Ext.form.TextField({
                                                fieldLabel: 'Enter',
                                                html: '<span>test</span>'
                                            }),
                                            new Ext.form.TextField({
                                                fieldLabel: 'Enter'
                                            })
                                        ]
                                    }),
                                    //col 2
                                    new Ext.form.FieldSet({
                                        bodyBorder: false,
                                        border: false,
                                        columnWidth: .33,
                                        layout: 'form',
                                        items: [
                                            new Ext.form.TextField({
                                                fieldLabel: 'Enter'
                                            })
                                        ]
                                    }),
                                    //col 3
                                    new Ext.form.FieldSet({
                                        bodyBorder: false,
                                        border: false,
                                        columnWidth: .33,
                                        layout: 'form',
                                        items: [
                                            new Ext.form.TextField({
                                                fieldLabel: 'Enter'
                                            })
                                        ]
                                    })
                                ]
                            
                            }),
                            //Row 2, contains 1 column
                            new Ext.form.FieldSet({
                                bodyBorder: false,
                                border: false,
                                layout: 'column',
                                items: [
                                    //col 1
                                    new Ext.form.FieldSet({
                                        bodyBorder: false,
                                        border: false,
                                        columnWidth: .25,
                                        layout: 'form',
                                        items: [
                                            new Ext.form.TextField({
                                                fieldLabel: 'Enter'
                                            })
                                        ]
                                    }),
                                    //Column for button only
                                    new Ext.form.FieldSet({
                                        bodyBorder: false,
                                        border: false,
                                        columnWidth: .25,
                                        items: [
                                            new Ext.Button({
                                                text: 'test'
                                            })
                                        ]
                                    })
                                ]
                            }),
                            //Row 3, contains 5 columns
                            new Ext.form.FieldSet({
                                bodyBorder: false,
                                border: false,
                                layout: 'column',
                                labelWidth: 50,
                                items: [
                                    //col 1
                                    new Ext.form.FieldSet({
                                        bodyBorder: false,
                                        border: false,
                                        columnWidth: .2,
                                        layout: 'form',
                                        items: [
                                            new Ext.form.TextField({
                                                fieldLabel: 'Enter'
                                            })
                                        ]
                                    }),
                                    new Ext.form.FieldSet({
                                        bodyBorder: false,
                                        border: false,
                                        columnWidth: .2,
                                        layout: 'form',
                                        items: [
                                            new Ext.form.TextField({
                                                fieldLabel: 'Enter'
                                            })
                                        ]
                                    }),
                                    new Ext.form.FieldSet({
                                        bodyBorder: false,
                                        border: false,
                                        columnWidth: .2,
                                        layout: 'form',
                                        items: [
                                            new Ext.form.TextField({
                                                fieldLabel: 'Enter'
                                            })
                                        ]
                                    }),
                                    new Ext.form.FieldSet({
                                        bodyBorder: false,
                                        border: false,
                                        columnWidth: .2,
                                        layout: 'form',
                                        items: [
                                            new Ext.form.TextField({
                                                fieldLabel: 'Enter'
                                            })
                                        ]
                                    }),
                                    new Ext.form.FieldSet({
                                        bodyBorder: false,
                                        border: false,
                                        columnWidth: .2,
                                        layout: 'form',
                                        items: [
                                            new Ext.form.TextField({
                                                fieldLabel: 'Enter'
                                            })
                                        ]
                                    })
                                ]
                            })
                        ]
                    })
                ]
            });

  2. #2
    Sencha User
    Join Date
    Oct 2011
    Posts
    2
    Vote Rating
    0
    mchiciak is on a distinguished road

      0  

    Default


    When the invalid "!" pops up, I can see it simply just inserts a div next to the control. That is all I need, but I haven't found any attribute that can accomplish this.