extjs 动态加载的树结点，如何实现点击这个树结点出现相应的js页面？急！急！

 
extjs 动态加载的树结点，如何实现点击这个树结点出现相应的js页面？急！急！ 
如图，左边是extjs 动态加载的树结点，如何实现点击这个树结点出现相应的js页面。点击节点一，将节点一的id取出传入到js页面，js页面动态加载数据，然后将js页面中的gridPanel放到上图的右边panel中.
图中动态树的生成代码

var MenuTree=Ext.create('Ext.tree.Panel', {
    title: 'Simple Tree',
   	displayField: 'text',
    region: 'west',
    width: '16%',
    autoScroll: true,
    store: Ext.LICENSE.Model.nodeStore,
	rootVisible: false,
    listeners:{       
    	itemclick: function(view, record, item, index, e, eOpts) {
             var tab =Ext.getCmp(record.data.id);
                 //创建数据源 
             if(!tab){
               MainPanel.add({
                	id:record.data.id,
                	title:record.data.text,
                	closable : true,
                	layout : 'fit',
                	height: '100%',
                    autoLoad :{
                                 url : record.data.url, // 这里是存的一个action
                                 params:{"tabId":record.data.id},
                                 scripts: true  // 加载的页面中js可运行
                          }     
                }).show();
                }else {
                       MainPanel.setActiveTab(tab);
                    }
          },
          scope : this
    }
});

：
点击节点一，运行到 url : record.data.url,跳转到一个action，然后返回到一个jsp页面，jsp页面代码如下：
 <script type="text/javascript">
Ext.onReady(modelInit("${tabId}"));
</script> 

在jsp页面调用一个js页面.js页面：

var licenseListPanel = Ext.create('Ext.grid.Panel',{
store: store,
layout : 'fit',
height: '100%',
id: 'licenseListPanel',
columns:[{
          text:'id',
          dataIndex:'id',
         // width: '10%',
          sortable: true 
         },{
          text:'节点名称'。

这个Ext.grid.Panel根据树的节点id动态生成数据。到这里我要把这个Ext.grid.Panel放到图中的右边，也就是这个
Ext.create('Ext.container.Viewport', {
    layout: 'border',
   defaults: {
            collapsible: true,
            split: true,
            bodyStyle: 'padding: 10px'
        },
    items: [TopPanel,MenuTree, MainPanel, FooterPanel],
});
}的MainPanel中。
var MainPanel = Ext.create('Ext.panel.Panel', {
id: 'mainPanel',
region: 'center',
  width: '84%',
        autoScroll: true,
        bodyStyle: "background-color:#dfe8f6; border-width: 0px 1px 0px 0px;background:transparent",
        frame:true,
layoutConfig: {
animate: true 
}
}); 
在var licenseListPanel = Ext.create('Ext.grid.Panel',{……  这个js页面不知道如何得到
MainPanel ,然后将licenseListPanel 放到MainPanel 

2 个解决方案

#1

我在Ext.grid.Panel那个js页面这样写：
var tabPanel = Ext.getCmp(tabId);
tabPanel.add(licenseListPanel);
tabId是主界面中MainPanel添加的组件的id.

 listeners:{       
    	itemclick: function(view, record, item, index, e, eOpts) {
             var tab =Ext.getCmp(record.data.id);
                 //创建数据源 
             if(!tab){
               MainPanel.add({
                	id:record.data.id,
                	title:record.data.text,
                	closable : true,

运行结果如下图：
数据能显示但一直在loading……，点击

#2

点击下面那个刷新按钮之后页码什么的都出来了，loading……那个也消失了，但高度还是没有铺满右边那个区域。主面MainPanel添加的那个组件我使用了height: '100%',Ext.grid.Panel也使用了height: '100%',但高度显示还是不对。
上面结果我是在Firefox中运行的结果，在IE中tabPanel.add(licenseListPanel);这里报错 'undefined' 为空或不是对象。
求大侠解决！！！！