extjs 动态加载的树结点,如何实现点击这个树结点出现相应的js页面?急!急!

时间:2021-10-28 19:54:23
 
extjs 动态加载的树结点,如何实现点击这个树结点出现相应的js页面?急!急! 
如图,左边是extjs 动态加载的树结点,如何实现点击这个树结点出现相应的js页面。点击节点一,将节点一的id取出传入到js页面,js页面动态加载数据,然后将js页面中的gridPanel放到上图的右边panel中. extjs 动态加载的树结点,如何实现点击这个树结点出现相应的js页面?急!急!
图中动态树的生成代码

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,


运行结果如下图: extjs 动态加载的树结点,如何实现点击这个树结点出现相应的js页面?急!急!
数据能显示但一直在loading……,点击

#2


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

#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,


运行结果如下图: extjs 动态加载的树结点,如何实现点击这个树结点出现相应的js页面?急!急!
数据能显示但一直在loading……,点击

#2


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