ext中关于替换布局中的panel

今天做任务碰到一个问题：左边是一颗树，右边是一个grid的布局；当点击左侧树的时候可以动态的“替换”掉右边的grid。

由于右侧的grid是被二次封装过的，所以不能简单的用之前替换url的方法去解决这个问题。所以想到动态去替换panel中的item方法。这个有两个解决的方法，解法不同但是本质上都是操作一个先定义好的容器panel，再对其中需要的组件进行操作。

（以下的示例没有贴完全的代码，部分实现需要自己去完成，如触发事件如何去写）
第一个：在viewport的center里先定义好一个容器panel，然后把要替换的组件加到此panel里

示例代码：

//定义主面板
this.panel=newExt.Panel({
region:'center',
margins:'1111',
layout:'fit',
items:[viewPanel]
});


new Ext.Viewport({
layout:'border',
title:'替换右侧grid',
items:[this.tree,this.panel]

)}

//这里填写树的触发事件

tree.on("click", function(){

this.panel.add(viewPanel);//
this.doLayout();

})

第二个：第二个方法不是用“替换”，而是利用新的布局cardLayout，具体示例：

varpanel=newExt.Panel({
region:'center',
layout:'card',
activeItem:0,
items:[initPanel] //初始化时需要显示的grid
});

tree.on("click",function(){

panel.add(xxx); //xxx代表你要添加的grid
panel.getLayout().setActiveItem(1); //利用cardLayout特有的方法，直接显示第二个item
});