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