What Is ExtJS ExtJS 4+ Extensions Examples Tutorials

2Dec/113

Fieldset /w Dynamic Controls (4)

Adding [+] "Add" button to fieldset

In this example we'll use some CSS magic to put a button in the upper right corner of the fieldset. The button will be a child of our fieldset, so that when you collapse/expand the fieldset, the button behaves appropriately.

DEMO & SOURCE @ JSFIDDLE

JS

Ext.create('Ext.form.FieldSet',{
    title: 'Search Filter'
    , renderTo: Ext.getBody()
    , width: 300
    , collapsible: true
    , iconCls: 'icon-properties'
    , style: 'background-color: #F1F1F1; margin: 30px auto;'
           + 'position: relative;' // support the [+] button
    , items:
    [
        {  // [Add] button
            xtype: 'button'
            , name: 'AddDirectAttr'
            , style: 'position: absolute; top: ' + (Ext.isIE||Ext.isChrome?0:-20) + 'px; right: 10px;'
            , iconCls: 'icon-add'
        } // eo [Add] button
        , {
            xtype: 'textfield'
            , fieldLabel: 'Test'
            , msgTarget: 'under'
            , anchor: '-25'
            , allowBlank: false
        }
    ]
});

Next -> Adding [X] "Remove" button to an input

VN:F [1.9.22_1171]
Rating: 7.0/10 (3 votes cast)
Fieldset /w Dynamic Controls (4), 7.0 out of 10 based on 3 ratings
Comments (3) Trackbacks (2)
  1. When I try it with ext4.1.0 the left table icon is missing.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)

Leave a comment

* Copy This Password *

* Type Or Paste Password Here *