ExtJs问题：TabPanel显示异常

最近做spring+hibernate+dwr+extjs的整合，主页面的JS代码是：
JScript code

Ext.onReady(function() {
    Ext.QuickTips.init();

    var center = new Ext.TabPanel( {
        region : 'center',
        items : {
            id : 'opt1',
            title : '欢迎使用',
            html : '欢迎使用此管理系统'
        },
        enableTabScroll : true
    });
    var left = new Ext.tree.TreePanel({
        items : {
            title : '菜单列表'
        },
        region : 'west',
        width : 200,
        collapsibel : true,
        autoScoll : true,
        split : true,
        listeners : {
            click : function(n) {
                var url = n.attributes.url;
                var id = n.attributes.id;
                var p = center.getItem(id);
                if (url) {
                    if (p) {
                        center.setActiveTab(p);
                    } else {
                        p = new Ext.Panel( {
                            title : n.attributes.text,
                            autoLoad : {
                                url : url,
                                scripts : true
                            },
                            closable : true,
                            id : id
                        });
                        center.add(p);
                        center.setActiveTab(p);
                    }
                }
            }
        }
    });
    var root = new Ext.tree.TreeNode( {
        text : '菜单'
    });
    var child1 = new Ext.tree.TreeNode( {
        id:'user1',
        text : '用户管理',
        url : 'usershow.html'
    });
    var child2 = new Ext.tree.TreeNode( {
        id:'productType',
        text : '产品类型管理',
        url : 'productType.html'
    });
    root.appendChild( [ child1, child2]);
    left.setRootNode(root);
    center.setActiveTab('opt1');
    new Ext.Viewport( {
        layout : 'border',
        items : [ {
            region : 'north',
            height : 80,
            title : '顶部面板'
        }, {
            region : 'south',
            height : 80,
            title : '底部面板'
        }, center, left ]
    });
    left.expandAll();
});

预计效果是点击不同的树节点会在中心的tabpanel中加入相对的子panel，内容是节点中对应的url，但是现在点击树节点之后，的确会产生相应的子panel，但是内容只会在第一个产生的panel中显示，如图：

请问是什么原因产生的，怎么解决？

估计是范围不对了吧.
写法有问题,具体不好说.

应该判断Tab是否存在，然后再添加或激活。我是这样写的：

JScript code

//操作TabPanel的方法
BaseTab.SetTab = function(node, grid, icon) {
    var tabPanel = Ext.getCmp('center');    //页面主显示区的TabPanel
    var tab = tabPanel.getItem(node.id);    //查看是否存在该节点对应的TabPanel
    
    if(!tab)    //如果tab不存在,新增节点对应的tab
    {
        tab = tabPanel.add({
            id: node.id,
            xtype: "panel",
            iconCls: icon,
            title: node.text,
            closable: true,
            layout: "fit",
            items: [grid]
        });
    }

    tabPanel.setActiveTab(tab);   //激活Tab
}