Extjs Cloning a panel

Question

panel({}) and all its contents like grid, form and want to render that exact clone to another panel is there a way to do it..is it possible to do it with panel.getEl() or is there any other way...please help

Answer 1

The sra's answer is incorrect. Ext's cloneConfig does exactly what you want it to. http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Component-method-cloneConfig

The following code renders two of the "same" panels to the body.

var panel = Ext.create('Ext.Panel', {
    width: 500,
    height: 300,
    title: "HBoxLayout Panel",
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    renderTo: document.body,
    items: [{
        xtype: 'panel',
        title: 'Inner Panel One',
        flex: 2
    },{
        xtype: 'panel',
        title: 'Inner Panel Two',
        flex: 1
    },{
        xtype: 'panel',
        title: 'Inner Panel Three',
        flex: 1
    }]
});

var clone = panel.cloneConfig();

Answer 2

I must admit that the old answer was not entirely correct. Cloning of Componments is available since ExtJS2 and can be done via cloneConfig(overrides) which is a instance-method.

This will return a clone of the current instance with the applied overrides (if set). A clean clone will require you to use correct configurations, meaning no instances are created within the config. Here are some information bout this For more details read the Sencha guides

---

Old answer (only valid if the components to clone configs contains instances instead of plain configurations)

No, there is no buildin way to do this. And you should not try it. Consider to wrap the panel in a function that returns a instance of it (a simple sort of factory).

Edit

Something like this:

Factory.Panel = function (config) {
    var defaults = {
        labelWidth: 80,
        labelAlign: 'left',
        layout: 'form',
        width: 720,
        autoHeight: true,
        header: false,
        bodyStyle: 'padding:10px 15px;'
    };
    var cfg = Ext.apply({}, config, defaults);
    var cmp = new Panel(cfg);
    return cmp;
}

You can add as much function params as you like. This would be a clean way to do it. You just can clone simple object like a record. Note that Factory is a Namespace!