How to switch between 2 components in Ext JS BorderLayout region

Question

i have created here 2 regions( west and center ) of grid panels viewport , now what i want is i want to change "xtype" dynamically of center

presently "xtype" is 'examplegrid' i want to change it to 'eontable' when i click on columns of region of "west" ......

here is the code : for extjs

(

function output()
 {

    Ext.ns('supplierlist');
    Ext.BLANK_IMAGE_URL = '/extjs/ext/resources/images/default/s.gif';

    /********************************Code For Suppliers*****************************/

}
//end function var_dump
supplierlist.Grid = Ext.extend(Ext.grid.GridPanel, {
    initComponent: function() {
        var config = {
            store: new Ext.data.JsonStore({
                id: 'supplier',
                totalProperty: 'totalcount',
                root: 'rows',
                url: 'get_suppliers_list.php',
                fields: [{
                    name: 'supplier'
                }]
            }),
            columns: [{
                id: 'supplier',
                header: 'Suppliers List',
                width: 40,
                sortable: true,
                dataIndex: 'supplier'

            }],
            viewConfig: {
                forceFit: true
            }
        }
        this.addListener('click',
        function(val) {


            });
        Ext.apply(this, Ext.apply(this.initialConfig, config));
        supplierlist.Grid.superclass.initComponent.apply(this, arguments);

    }

    ,
    onRender: function() {
        // call parent
        supplierlist.Grid.superclass.onRender.apply(this, arguments);

        // load the store
        this.store.load({
            params: {
                start: 0,
                limit: 20
            }
        });


    }
    // eo function onRender
});

 Ext.reg('printsuppliers', supplierlist.Grid);


 Ext.ns('Example');


// example grid pre-configured class
 Example.Grid = Ext.extend(Ext.grid.GridPanel, {
    initComponent: function() {
        var config = {
            store: new Ext.data.JsonStore({
                //                              
                id: 'company'
                ,
                totalProperty: 'totalCount'
                ,
                root: 'rows'
                ,
                url: 'get-grid-data.php'
                ,
                fields: [

                ]
            })
            ,
            columns: [{
                id: 'Smart Metering'
                ,
                header: "Smart Metering"
                ,
                width: 40,
                sortable: true

            }
            ]
            ,
            viewConfig: {
                forceFit: true
            }
        };
        // eo config object
        // apply config
        Ext.apply(this, Ext.apply(this.initialConfig, config));

        this.bbar = new Ext.PagingToolbar({
            store: this.store
            ,
            displayInfo: true
            ,
            pageSize: 20
        });

        // call parent
        Example.Grid.superclass.initComponent.apply(this, arguments);
    }
    // eo function initComponent

    ,
    onRender: function() {

        // call parent
        Example.Grid.superclass.onRender.apply(this, arguments);

        // load the store
        this.store.load({
            params: {
                start: 0,
                limit: 20
            }
        });

    }
    // eo function onRender
});
 Ext.reg('examplegrid', Example.Grid);





 Ext.ns('eon');


// example grid pre-configured class
 eon.Grid = Ext.extend(Ext.grid.GridPanel, {
    initComponent: function() {
        var config = {
            store: new Ext.data.JsonStore({
                //                              
                id: 'company'
                ,
                totalProperty: 'totalCount'
                ,
                root: 'rows'
                ,
                url: 'get-grid-data.php'
                ,
                fields: [

                ]
            })
            ,
            columns: [{
                id: 'dummy'
                ,
                header: "dummy"
                ,
                width: 40,
                sortable: true

            }

            ]
            ,
            viewConfig: {
                forceFit: true
            }
        };
        // eo config object
        // apply config
        Ext.apply(this, Ext.apply(this.initialConfig, config));

        this.bbar = new Ext.PagingToolbar({
            store: this.store
            ,
            displayInfo: true
            ,
            pageSize: 20
        });

        // call parent
        eon.Grid.superclass.initComponent.apply(this, arguments);
    }
    // eo function initComponent

    ,
    onRender: function() {

        // call parent
        eon.Grid.superclass.onRender.apply(this, arguments);

        // load the store
        this.store.load({
            params: {
                start: 0,
                limit: 20
            }
        });

    }
    // eo function onRender
});
 Ext.reg('eontable', eon.Grid);


 Ext.onReady(function() {

    Ext.QuickTips.init();

    // create viewport with border layout
    var viewport = new Ext.Viewport({
        layout: 'border'
        ,
        id: 'vp'
        ,
        items: [{
            region: 'center'
            ,
            layout: 'fit'
            ,
            title: 'Center'
            ,
            xtype: 'examplegrid'
        },
        {
            region: 'west'
            ,
            title: 'Suppliers'
            ,
            width: 220
            ,
            xtype: 'printsuppliers'
            ,
            split: true
            ,
            collapsible: true
        }]
    });

});

}`)

code for php

(`

$start = @$_REQUEST["start"];
 $limit = @$_REQUEST["limit"];

 $start = $start ? $start: 0;
 $limit = $limit ? $limit: 5;

 $data = array(
array("supplier" = >'a1'),
array("supplier" = >'a2'),
array("supplier" = >'a3'),
array("supplier" = >'a4'),
array("supplier" = >''),
array("supplier" = >''),
array("supplier" = >''),
array("supplier" = >''),
array("supplier" = >''),
array("supplier" = >''),
array("supplier" = >'')
);
 $a = array();
 $limit = ($limit > count($data)) ? $limit = count($data) : $limit;
for ($i = $start; $i < $start + $limit; $i++) {
    $a[] = $data[$i];
}


$o = array(
"success" = >true
, "totalCount" = >sizeof($data)
, "rows" = >$a
);

 echo json_encode($o);

// eof
 ? >

)

Answer 1

I won't try working with your example code as it is presently a mess. However, going by your description it seems you will be best served exploring the CardLayout.

Define your center region as:

{
    id: 'center',
    region: 'center',
    layout: 'card',
    border: false,
    activeItem: 0,
    items: [
        {
            itemId: 'examplegrid',
            xtype: 'examplegrid'
            // other config properties here as needed
        },
        {
            itemId: 'eontable',
            xtype: 'eontable'
            // other config properties here as needed
        }
    ]
};

Then flip between the cards when the appropriate control is manipulated in the other region:

Ext.getCmp('center').getLayout().setActiveItem('eontable');
// or...
Ext.getCmp('center').getLayout().setActiveItem('examplegrid');

Note that this technique keeps a singleton instance of both panel types around. You may alternatively leave one of the panels out of the initial definition of the center region and dynamically create and destroy panels at the time of the swap. Here is an example of changing from 'examplegrid' to 'eontable':

var center = Ext.getCmp('center');

center.add(Ext.ComponentMgr.create({
    itemId: 'eontable',
    xtype: 'eontable'
    // other config properties
}));

center.getLayout().setActiveItem('eontable');

center.remove('examplegrid', true);

A similar operation would then be used to later switch back from 'eontable' to 'examplegrid'.

Answer 2

There's an example of exactly that on the documentation for border layout: http://www.sencha.com/deploy/dev/docs/?class=Ext.layout.BorderLayout