Maintaining view instances after switiching view

Question

I have a few set of layouts in which the I rearrange a set of components (views) in different order.

What I would like to achieve is that the same instance of the view should be rendered on different layouts so that the state of the view is maintained.

I have done something similar

Ext.define('MyApp.view.FirstView',{
    extend:'Ext.container.Container',
    alias:'widget.firstView'
});

Ext.define('MyApp.view.SecondView',{
    extend:'Ext.container.Container',
    alias:'widget.secondView'
});

Ext.define('MyApp.view.HboxLayout',{
    extend:'Ext.container.Container',
    layout:{ type:'hbox',align:'stretch'},
    items:[
        { xtype:'firstView'},
        {xtype:'secondView'}]
});

Ext.define('MyApp.view.VboxLayout',{
extend:'Ext.container.Container',
layout:{ type:'vbox',align:'stretch'},
items:[
        { xtype:'firstView'},
        {xtype:'secondView'}]
});

Any help appreciated.

Answer 1

You can call remove method on container still keeping the reference to it provided that container is configured with autoDestroy:false.

Then you can add the view you still have the reference of to the other container with add or insert methods.

Here are some links:

http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.container.AbstractContainer-cfg-autoDestroy http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.container.AbstractContainer-method-remove http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.container.AbstractContainer-method-add