How to add a fieldset in EXTJS on button click

Question

My problem is when I click Add button it needs to add a fieldset ("rulepanel") after the previous fieldset, but in my code if I execute it the new fieldset is added on top of the previous (I can be able to notice it as the letters are getting bold when click on Add button).

This is my code:

var rulepanel = {
    xtype: 'fieldset',
    border: false,
    itemId: 'rule',
    items: [{
        xtype: 'container',
        items: [{
            xtype: 'textfield',
            fieldLabel: 'value',
            name: 'value',
            allowBlank: false,
            placeholder: 'value'
        }, {
            xtype: 'button',
            id: 'add',
            text: 'Add',
            handler: function (button, event) {
                me.insert(rulepanel);
            }
        }, {
            xtype: 'button',
            id: 'branch',
            text: 'Branch'
        }]
    }]
};

Ext.apply(me, {
    items: [rulepanel]
});

Answer 1

Your code should be like below:-

{
    xtype: 'button',
    text: 'Add',
    handler: function (button, event) {
        button.up('fieldset').insert(rulepanel);
    }
}

You can find running example here.

Hope this will help you.