radiogroup 不能在viewport里正常显示

Question

我有个js文件，用来注册的，是一个fromPanel面板，里面有一个radiogroup组件，把该js用一个jsp页面，通过<div id="a"></div>可以正确显示，但是把该页面引用到viewport里面，在tabPanle下，就不能正常 显示了。其中，viewport采用border布局，左边是一个树，中间是tabPanel，下面是两个js文件完整代码，可以copy下来直接使用。
1：注册的
Ext.onReady(function() {
   var center = new Ext.form.FormPanel({
      width : 400,
      height : 300,
      id : "center1",
      frame : true,
      renderTo : Ext.get("register01"),
      labelWidth : 105,
      labelAlign : "right",
      defaultType : "textfield",
      items : [{
         name : "username",
         xtype : "textfield",
         fieldLabel : "用户名",
         allowBlank : false,
         width : 200
        }, {
         name : "password",
         fieldLabel : "密码",
         xtype : "textfield",
         allowBlank : false,
         inputType : "password",
         width : 200
        }, {
         name : "register",
         fieldLabel : "注册日期",
         xtype : "datefield",
         value : new Date(),
         format : "Y-m-d",
         width : 150
        }, {
         name : "profession",
         width : 120,
         allowBlank : true,
         fieldLabel : "职业"
        }, {
         name : "email",
         allowBlank : false,
         fieldLabel : "邮件地址",
         width : 150
        },
         new Ext.form.RadioGroup({
           name : "group",
           renderTo : Ext.getCmp(this.center),
           items : [{
              name : "authority",
              xtype : "radio",
              boxLabel : "管理员",
              inputValue : "admin"
             }, {
              name : "authority",
              xtype : "radio",
              boxLabel : "普通用户",
              inputValue : "guest"
             }]  //就是这里在viewport下不能正常显示，          })     ],
      buttons : [{
       text : "注册",
       handler : function() {
        center.getForm().submit({
         url : "./action/reg.action",
         params : {
          username : center.getForm()
            .findField("username")
            .getValue(),
          password : center.getForm()
            .findField("password")
            .getValue(),
          registTime : center.getForm()
            .findField("register")
            .getValue().format("Y-m-d"),
          email : center.getForm()
            .findField("email").getValue(),
          profession : center.getForm()
            .findField("profession")
            .getValue(),
          authority : center.getForm()
            .findField("group").getValue()
            .getRawValue()
         },
         success : function(f, action) {
          // document.location="test.jsp"
          alert("提交成功");
         },
         failure : function() {
          alert("提交失败");
         }
        });
       }
      }, {
       text : "重置",
       handler : function() {
        center.getForm().reset();
       }
      }]
     });
  })2：viewport的页面，采用border布局
Ext.onReady(function() {
var north = new Ext.Panel({
    region : 'north',
    title : "标题",
    height : 80,
    split : true,
    autoScroll : true,
    border : true,
    html : "LOGO",
    margins : '0 0 5 0'
   });
var west = new Ext.tree.TreePanel({
    region : 'west',
    collapsible : true,
    width : 200,
    autoScroll : true,
    split : true,
    listeners : {
     click : function(n) {
      var url = n.attributes.url;
      alert(url);
      var id = n.attributes.id;// id如果没有定义，则自动生成一个唯一的ID
      var p = center.getItem(id);// 获取节点ID 对应的标签面板
      var p1 = center.getItemId(n);
      if (url) {
       if (p) {
        // 如果已经存在，则激活
        center.setActiveTab(p);
       } else {
        // 如果不存在，则创建新的并激活
        p = new Ext.Panel({
         title : n.attributes.text,
         width : 400,
         height : 300,
         autoScroll : true,
         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({
    text : "公网地址分布",
    url : "./ip.jsp",//暂时空的
    success : function() {
     alert("数据加载成功");
    },
    failure : function() {
     alert("数据加载失败");
    }
   });
var child2 = new Ext.tree.TreeNode({
    text : "用户管理",
    collapsible : true,
    url : "./register.jsp"  //这里就是引用上面个的登录的jsp文件，很奇怪，这里不能正常显示，具体的话，感觉radiogroup的位置不能控制，回报“north”区去。   });
var child3 = new Ext.tree.TreeNode({
    text : "用户登录",
    url : "./test.jsp"   //暂时空的
   });
root.appendChild([child1, child2, child3]);
west.setRootNode(root);
var center = new Ext.TabPanel({
    region : 'center',
    width : 600,
    height : 600,
    split : true,
    autoScroll : true,
    items : {
     id : "opt1",
     title : 'Default Tab',
     html : '欢迎使用寒梅网址之家管理系统'
    },
    enableTabScroll : true
   });
center.setActiveTab("opt1");
var bottom = new Ext.Panel({
    region : 'south',
    title : 'Information',
    collapsible : true,
    html : '版权所有，翻版必究!',
    split : true,
    height : 100,
    autoScroll : true,
    minHeight : 100,
    bodyStyle : "padding: 10px; font-size: 12px; text-align:center;"
   });
var vp = new Ext.Viewport({
    layout : 'border',
    // renderTo : Ext.getBody(),
    items : [north, west, center, bottom]
   });
west.expandAll();
})来源：一起Ext
原文地址：http://www.17ext.com/showtopic-42821.aspx

Answer 1

这个是我在网上找的，但是我也学习了很久了！！ 
var child3 = new Ext.tree.TreeNode({
text : "用户登录",
url : "./test.jsp"
});
这种通过URL加载的都不能正常显示

Answer 2

我真是晕死了，var child2 = new Ext.tree.TreeNode({
  text : "用户管理",
  collapsible : true,
  url : "./register.jsp" 通过url来加载数据，然后显示在viewport的center里，难道就显示不正常？难道extjs没有实现这个功能！！！

Answer 3

我上面个的代码是完整的代码，copy就可以运行，请求高手 出现！！！！！！