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
... |
...
{ // [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.8/10 (5 votes cast)
One thought on “Fieldset /w Dynamic Controls (6)”