extjs的viewport问题。。求高手解答。在线等

代码如下：
Ext.onReady(function() {
new Ext.Viewport({
layout : 'border',
items : [{
region : 'north',
html : '<h1 class="x-panel-header">IT管理系统</h1>',
autoHeight : true,
border : false,
margins : '0 0 5 0'
},{
region : 'west',
collapsible : true,
title : '菜单',
xtype : 'treepanel',
width : 200,
autoScroll : true,
split : true,
loader : new Ext.tree.TreeLoader(),
root : new Ext.tree.AsyncTreeNode({
expanded : true,
children : [ {
text : '数据管理',
children : [{
text : '新建设备记录',
leaf : true,
url : 'addITInfo.jsp'
},{
text : '设备记录维护',
leaf : true,
url : 'iTInfoList.jsp'
}]
}, {
text : '用户管理',
children : [{
text : '新建用户',
leaf : true,
url : 'addUserinfo.jsp'
},{
text : '维护用户数据',
leaf : true,
url : 'userList.jsp'
}]
}, {
text : '单位管理',
children : [{
text : '新建单位',
leaf : true,
url : 'bbbbb'
},{
text : '维护单位数据',
leaf : true,
url : 'aaaaaa'
}]
} ]
}),
rootVisible : false
},{
region : 'center',
xtype : 'tabpanel',
items : {
title : '首页',
autoLoad : 'tUserList.action'
}
} ]
});
});
怎么才能点击左右的子节点在右侧面板中加载我已经写好的页面。
求高手解答

Ext.onReady(function() {
  var addPanel = function(btn, event) {
  var n;
  n = tabPanel.getComponent(btn.id);
  if (n) {
  tabPanel.setActiveTab(n);
  return;
  }
  n = tabPanel.add({
  id : btn.id,
  title : btn.text,
  html : '<iframe width=100% height=100% src=' + btn.id + '.jsp />',
  closable : 'true'
  });
  tabPanel.setActiveTab(n);
  }
  var item1 = new Ext.Panel({
  title : '数据管理',
  cls : 'empty',
  items : [new Ext.Button({
  id : 'addITInfo',
  text : '新建设备记录',
  width : '100%',
  listeners : {
  click : addPanel
  }
  }),
  new Ext.Button({
  id : 'iTInfoList',
  text : '设备记录维护',
  width : '100%',
  listeners : {
  click : addPanel
  }
  })]
  });
  var item2 = new Ext.Panel({
  title : '用户管理',
  cls : 'empty',
  items : [new Ext.Button({
  id : 'addUserinfo',
  text : '新建用户',
  width : '100%',
  listeners : {
  click : addPanel
  }
  }),
  new Ext.Button({
  id : 'userList',
  text : '维护用户数据',
  width : '100%',
  listeners : {
  click : addPanel
  }
  })]
  });
  var item3 = new Ext.Panel({
  title : '单位管理',
  cls : 'empty',
  items : [new Ext.Button({
  id : 'addUserinfo',
  text : '新建单位',
  width : '100%',
  listeners : {
  click : addPanel
  }
  }),
  new Ext.Button({
  id : 'userList',
  text : '维护单位数据',
  width : '100%',
  listeners : {
  click : addPanel
  }
  })]
  });
  var top = new Ext.TabPanel({
region : 'north',
html : '<h1 class="x-panel-header">IT管理系统</h1>',
autoHeight : true,
border : false
  });
  var accordion = new Ext.Panel({
  region : 'west',
  split : true,
  width : 210,
  items : [item1, item2, item3]
  });
  var tabPanel = new Ext.TabPanel({
region : 'center',
enableTabScroll : true,
deferredRender : false,
activeTab : 0,
items : [{
title : '首页',
html : "欢迎使用IT管理系统"
}]
  });
  var viewport = new Ext.Viewport({
  layout : 'border',
  items : [top,accordion, tabPanel]
  });
});
按照LZ要求改了改。。
没用treepanel。。用的是按钮