how to reset an extjs dashboard to its default layout

Question

How do I reset a dashboard to its original "shape"?

I have this fiddle, where the dashboard has 6 out of the 7 panels that are closable (and will be destroyed on close).

When the user clicks on the reset button, it should restore all the panels back.

Answer 1

The only way is to remove all and add them again. Something like this:

    onResetClick: function () {
        const me = this;
        let newContent = [
            {type: "toppanel", columnIndex: 0},
            {type: "midpanel1", columnIndex: 1},
            {type: "midpanel2", columnIndex: 2},
            {type: "midpanel3", columnIndex: 3},
            {type: "bottompanel1", columnIndex: 1},
            {type: "bottompanel2", columnIndex: 2},
            {type: "bottompanel3",columnIndex: 3}
        ];
        
        me.removeAll();

        newContent.forEach(function(widget) {
            const columnIndex = widget.columnIndex;
            delete widget.columnIndex;
            
            me.addView(widget, columnIndex);
        });
    }