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.
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
Fieldset /w Dynamic Controls (4),
When I try it with ext4.1.0 the left table icon is missing.
You must mean the fieldset icon… yes this no longer works in ExtJS4.1 as they’ve changed the code for the fieldsets. Let me make a new one for 4.1…
Here’s the fix: https://whatisextjs.com/extjs-4-extension/extjs-4-1-fieldset-icons