extjs4.2 中Viewport动态添加或删除panel中的items

显示的viewport

 var viewPort =  new Ext.Viewport({
	   id:'mainView',
           layout : "border",  
           items : [{  
		    	    xtype: 'panel',
		   	     // title: 'Bottom Inner Panel',
		   	     width: '50%',
		   	     region:'west',//指定子面板所在区域
		   	     height: document.documentElement.clientHeight,
		   	     items:[ShxpGrid]
   	 		}, {
   	 		     id:'treePanel',
	   	 	     xtype: 'panel',
	   		     // title: 'Bottom Inner Panel',
	   		     width: '50%',
	   		     region:  'center',
	   		     height: document.documentElement.clientHeight,
                 	     containerScroll : true,  
                	     items: [tree],
                             rootVisible: false,//是否显示根节点，
               		     layout:"fit"
                
		        }
      		    ]
   });

现在我想通过一个事件将id为treePanel中的items替换掉，步骤如下：

1.添加监听事件

  listeners: {
                                 select:function(rowModel,record){//获取选中行的数据
                                 var obj = rowModel.getLastSelected().data;
                                 var key = "SYSTEMID";
                                 //alert(obj[key]);
                                 Ext.getCmp('treePanel').removeAll();//删除treePanel
                                 systemId = obj[key];
                                 changeMenu(systemId);//通过方法进行替换
                                                               
                             }

2.我做的是权限树的删除替换

function changeMenu(systemId){
	   var newtree = Ext.create("Ext.panel.Panel", {
	        height : '100%',//设置高度
	        region : 'north',
	        border:false,
	        layout : {
	            type : 'accordion',
	            titleCollapse : false,//允许通过点击标题栏的任意位置来展开/收缩子项Panel
	            animate : true,// 动画切换效果
	            activeOnTop : false
	        // 折叠展开是否改变菜单顺序
	        },
	        layoutConfig : {
	            animate : true
	        },
	        split : true
	    });
	
	  Ext.Ajax.request({//向服务端发送ajax请求
		  url:ctx+'/right/getUserRightCheckboxList',//请求地址
		     waitMsg: '正在加载权限菜单. ...',
		     method : 'post',
			 params : {systemid : systemId },
         success : function(response) {
             var json = Ext.JSON.decode(response.responseText);//获取返回的文本并解析为json格式。Ext.JSON.decode(..)：解码（解析）JSON字符串对象。
             if(json.code == 'OK'){
           	  newtree.getEl().unmask();
                 Ext.each(json.data, function(el) {//迭代一个数组或是可迭代的值，在每个元素上调用给定的回调函数 
                	 var panel = Ext.create('Ext.panel.Panel', {//创建一个Panel
                                     id : el.id,//定义id
                                     title : "权限配置",//定义标题
                                     iconCls:el.iconCls,//定义图标
                                     layout : 'fit'//定义布局。fit:当容器只包含一个子元素时, 子元素自动填满容器
                     });
                     panel.add(buildTree(el));//当前Panel添加由此节点的子节点所创建的树面板
                     newtree.add(panel);//tree（1个Panel）添加当前Panel
                 									});
             					   }else{
											 	 Ext.Msg.alert('加载失败', respText.message+"("+respText.code+")");
											 }
        },
	      failure : function(request) {
	             tree.getEl().unmask();
	              Ext.MessageBox.show({
	                 title : '操作提示',
	                 msg : "连接服务器失败",
	                 buttons : Ext.MessageBox.OK,
	                 icon : Ext.MessageBox.ERROR
	                               	});
	                    				 },
	              		});
				  Ext.getCmp('treePanel').add(newtree);
			 }

这样将newtree放到方法中，全台就不会报错了