What Is ExtJS ExtJS 4+ Extensions Examples Tutorials

3Dec/110

Fieldset /w Dynamic Controls (6)

Adding drop-down menu for the [+] "Add" button

In this example we'll add a drop-down menu to the [+] button and set up a simple combo box with a store:



DEMO & SOURCE @ JSFIDDLE

JS

...
{  // [Add] button with dropdown menu
    xtype: 'button'
    , style: 'position: absolute; top: ' + (Ext.isIE||Ext.isChrome?0:-20) + 'px; right: 20px;'
    , iconCls: 'icon-add'
    // drop-down menu
    , menu: Ext.create('Ext.menu.Menu', {
        plain: true
        , items: [
            { html: '<b>Attribute</b>' }
            , {
                xtype: 'combo' 
                , queryMode: 'local'
                , displayField: 'label'
                , valueField: 'name'
                , typeAhead: true
                , store: Ext.create('Ext.data.Store', {
                    fields: ['name','label']
                    , data: [
                        { label: 'Display Name', name: 'displayName' }
                        , { label: 'First Name', name: 'givenName' }
                        , { label: 'Middle Name', name: 'initials' }
                    ]
                    , sorters: [ { property: 'label' } ]
                }) // eo store
            } // eo combo
        ] // eo items
        , bbar: [ '->', { xtype: 'button', iconCls: 'icon-add', name: 'add',text: 'Add' } ]
    }) // eo Menu
} // eo [Add] button with dropdown menu
...

Next -> Implement MVC

VN:F [1.9.22_1171]
Rating: 6.0/10 (4 votes cast)
Fieldset /w Dynamic Controls (6), 6.0 out of 10 based on 4 ratings
Comments (0) Trackbacks (1)

Leave a comment

* Copy This Password *

* Type Or Paste Password Here *