Extjs 如何在Ext JS BorderLayout区域中的两个组件之间切换

我在这里创建了栅格面板视口的两个区域（西部和中部）， 现在我想要的是动态地改变中心的“xtype”

目前“xtype”是“examplegrid”，我想把它改为“eontable” 当我点击“西部”区域的列

下面是代码：对于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
        }]
    });

});

}`)

代码 对于php

(`
$start=@$_请求[“start”]；
$limit=@$_请求[“limit”]；
$start=$start？$start:0；
$limit=$limit？$limit:5；
$data=数组(
数组（“供应商”=>“a1”），
数组（“供应商”=>“a2”），
数组（“供应商”=>“a3”），
数组（“供应商”=>“a4”），
数组（“供应商”=>“”），
数组（“供应商”=>“”），
数组（“供应商”=>“”），
数组（“供应商”=>“”），
数组（“供应商”=>“”），
数组（“供应商”=>“”），
数组（“供应商”=>“”）
);
$a=数组（）；
$limit=（$limit>count（$data））？$limit=count（$data）：$limit；
对于（$i=$start；$i<$start+$limit；$i++）{
$a[]=$data[$i]；
}
$o=数组(
“成功”=>正确
，“totalCount”=>sizeof（$data）
，“行”=>a美元
);
echo json_编码（$o）；
//eof
? >
)

我不会尝试使用您的示例代码，因为它目前非常混乱。然而，根据您的描述，您最好探索卡片布局

将中心区域定义为：

{
    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”。

关于边框布局的文档中有这样一个例子：

考虑格式化代码，因为它当前不可读（使用4个空格正确缩进）。也可以考虑给你的问题更有意义的标题。这是正确的，边界布局不允许你改变显示在它的一个区域内的面板。因此，将卡布局嵌套在其中一个区域中不会trick@Juan，这是否也意味着包装布局不能是边框布局？或者这仅适用于要删除的项目的布局（即嵌套项目的卡片布局）？几周来，我一直在尝试使用border layout来解决这个问题，有一个答案是使用Ext.id（）来获取唯一的id，但是我的控制器逻辑使用了itemId，我设置了itemId以使其更简单，我正在尝试在商店中管理这些id，我不使用框架来解决这个问题是愚蠢的。如果你能在这里给出一个使用卡片布局示例的建议，那就太棒了。如果我有三个或更多的组件，它将如何工作。

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);