How to switch between 2 components in Ext JS BorderLayout region

Question

I created here 2 areas (west and center) of the grid viewports screen, now what I want, I want to dynamically change the "xtype" from the center

currently "xtype" is an "examplegrid", I want to change it to "eontable" when I click on the columns of the west region ......

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 will not try to work with your sample code, as this is currently a mess. However, based on your description, it seems to you that it is best to explore CardLayout.

Define your central area 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
        }
    ]
};

, :

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

, . . "examplegrid" "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);

"eontable" "examplegrid".

Answer 2

, : http://www.sencha.com/deploy/dev/docs/?class=Ext.layout.BorderLayout