ext 怎么点击子节点加载进页面

在点击树子节点链接时，只有第一次可以加载到页面、之后的点击就后出现
IE就报这个mainPanel（var mainPanel = Ext.getCmp('tab');//要显示区域的id属性）为空或不为对象。纠结好久了，求各位大神们帮忙解决。。。。废话不多说了，下面是代码：

Ext.onReady(function(){

// top 是放置在顶端的工具条
var top =new Ext.Toolbar({
autoHeight:true,
autoWeight:true,
defaults:{border:false},
items:['-',{
text:'****',
xtype:'tbtext'
},'-','->',{
text:'****',
xtype:'button'
}]
});


//放置在center位置的面板
var tab =new Ext.TabPanel({
anchor:'100% 100%',
id: 'tab',
activeTab:0, //默认设置 显示的是当前第几个面板，以数组形式存在的。从下标0开始
items:[
{
title:'企业文化介绍',
id: 'infor'
}]
});



//buttom 底部的工具条
var buttom =new Ext.Toolbar({
autoHeight:true,
autoWeight:true,
store:store,
defaults:{border:false},
items:[{
text: '当前用户:',
xtype: 'tbtext'
},{
text:'用户',
xtype: 'tbtext'
}]
});

//设置的树形
var Tree = Ext.tree;
  var tree = new Tree.TreePanel({
  useArrows: true,
  autoScroll: true,
  animate: true,
  enableDD: true,
  containerScroll: true,
  border: false,
  listeners:{
  click:function(node,event){
  if(node.id=='a1-1'){
var mainPanel = Ext.getCmp('tab');//要显示区域的id属性
  mainPanel.load({  
  url : 'user_admin.html',
  discardUrl : false,
  text:"loading" ,
  timeout : 30,
  scripts : true,
  nocache : false
  })
  }else if(node.id=='a2-1'){
  var mainPanel = Ext.getCmp('tab');//要显示区域的id属性
  mainPanel.load({  
  url : 'role_admin.html',
  discardUrl : false,
  text:"loading" ,
  timeout : 30,
  scripts : true,
  nocache : false
  })
  }
  }
  },
  root: {
  nodeType: 'async', 
  text: '导航',
  draggable: false,
  id: 'src',
children:[{
text:'员工信息管理',
id:'a1',
children:[
{
text: '查询员工信息',
id: 'a1-1',
leaf: true
},{
text: '人员变动公告栏',
id: 'a1-2',
leaf: true
}
]},{
text:'角色管理',
id: 'a2',
children:[
{
text: '角色列表',
id: 'a2-1',
leaf: true
},
{
text: '变更公告',
leaf: true
}]
}]
  }
  });
   

//1.创建页面的综合布局
var viewport=new Ext.Viewport({
layout:'border',
items:[
{
region:'center',
id: 'center',
defaults:{border:false},
items:[tab] 
},
{
region:'north',
id: 'north',
width:50,
defaults:{border:false},
items:[top]
},
{
region:'west',
width:150,
defaults:{border:false},
  title:'菜单栏',
  split:false, //可以拖拽和改变的大小的元素)。
  collapsible: true, //决定行是否可以隐藏
  margins:'35 0 5 5',
  cmargins:'35 5 5 5',
  layout:'accordion', //决定行是否可以隐藏
  layoutConfig:{animate:true}, 
items:[tree]
},
{
region:'south',
height:26,
defaults:{border:false},
items:[buttom]
}]
});
});