camel0104 2010-09-26 17:03
浏览 345
已采纳

Extjs中实现类似iframe功能的问题

先看下图:

[img]http://dl.iteye.com/upload/attachment/316926/6eafef61-19f7-3e41-b86b-00b1ddabc127.jpg[/img]

[color=darkred][b]问题描述:[/b][/color]

[b]一.就是实现left菜单栏中不同模块对应的URL在center中展示
二.在网上看过很多关于Extjs与iframe的帖子:miframe.js这个似乎性能比较好(没办法对这一块不熟悉,望不吝指教),因此望给出结合miframe.js这个实现的实例[/b]

附上,我测试代码:
Ext.onReady(function() {
var contextPath = '/TestExt/';

        var topPanel = new Ext.Panel({
            region : 'north',
            height : 60,
            collapsible : false

// bodyStyle : 'background-image:url(' + contextPath +
// '/images/longbar.jpg);background-repeat:repeat;'
});

        var footPanel = new Ext.Panel({
                    region : 'south',
                    height : 20,
                    collapsible : false
                });

        var tbPanel = new Ext.TabPanel({
                    region : 'center',
                    plugins : new Ext.ux.TabCloseMenu(),
                    enableTabScroll : true,
                    activeTab : 0,
                    items : [{
                        title : ' 欢迎页面 ',
                        closable : false
                            // ,
                            // html : "<iframe src='"
                            // + contextPath
                            // + "/view/security/jsp/welcome.jsp' width =
                            // '100%' height = '100%' marginwidth=0
                            // marginheight=0 hspace=0 frameborder ='0'
                            // ></iframe>"
                        }]
                });

        // 生成菜单树
        var tree = new Ext.tree.TreePanel({
                    el : 'menu_tree',
                    rootVisible : true, // 隐藏根节点
                    // loader:new
                    loader : new Ext.tree.TreeLoader({
                                dataUrl : encodeURI('/TestExt/menu.do')
                            }),
                    region : 'west',
                    title : '菜单栏',
                    width : 180,
                    split : true,
                    minSize : 160,
                    maxSize : 220,
                    collapsible : true,
                    layout : 'fit'
                });

        // AsyncTreeNode 会延迟加载没有展开的节点 认为凡是leaf不为true的都要延迟加载
        var root = new Ext.tree.AsyncTreeNode({
                    text : '功能模块',
                    draggable : false,// false表示这个节点将不能被拖拽
                    // 树的根节点的ID设置成0有个好处就是初始化树的时候默认先加载父亲节点为0的孩子结点
                    id : '-1'
                });

        tree.setRootNode(root);

// tree.on('click',function(node,event){
// alert(node.id);
// });
root.expand();

        var viewport = new Ext.Viewport({
                    enableTabScroll : true,
                    layout : "border",
                    autoScroll : true,
                    items : [topPanel, tree, tbPanel,footPanel]
                });
    });

[color=darkred][b]注:[/b][/color]
千万别吝惜您代码,谢谢!

  • 写回答

1条回答 默认 最新

  • fireinjava 2010-09-26 21:39
    关注

    以前写的一个供你参考:
    实例化一个TabPanelInstance,然后在左树的node的Click事件中调用这个实例化对象tabpanel.addTab(...);

    [code="java"]
    TabPanelInstance = function() {
    var _this = this;
    _this.tabs = new Ext.TabPanel({
    activeTab : 0,
    border : false,
    enableTabScroll : true,
    region : 'center',
    defaults : {
    autoScroll : true
    },
    listeners :{'tabchange':function(){
    //if(_this.tabs.getActiveTab().title=='主页')
    }
    }
    });

    _this.addTab = function(title, url, id, closable,path) {
        if (document.getElementById(id + 'panel')) {
            _this.tabs.setActiveTab(id + 'panel');
            return;
        }
    
        var label = new Ext.form.Label({
            text : '所在位置:'+path
        });
        _this.tabs.add({
                    id : id + 'panel',
                    title : title,
                    iconCls : 'tabs',
                    tbar : [label],
                    contentEl : Ext.DomHelper.append(document.body, {
                                tag : 'iframe',
                                id : id,
                                style : "border 0px none;scrollbar:true",
                                src : url,
                                height : "100%",
                                width : "100%"
                            }),
                    closable : closable
                }).show();
    }
    
    _this.closeActiveTab = function(message) {
        if (null != message && "" != message) {
            Ext.Msg.show({
                        title : '处理结果信息',
                        msg : message,
                        buttons : Ext.MessageBox.OK,
                        fn : Ext.emptyFn,
                        icon : 'ext-mb-info',
                        fn : function() {
                            _this.tabs.remove(_this.tabs.getActiveTab());
                        }
                    });
        }else{
            _this.tabs.remove(_this.tabs.getActiveTab());
        }
    }
    

    }
    [/code]

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥30 软件自定义无线电该怎样使用
  • ¥15 R语言mediation包做中介分析,直接效应和间接效应都很小,为什么?
  • ¥15 Jenkins+k8s部署slave节点offline
  • ¥15 微信小游戏反编译后,出现找不到分包的情况
  • ¥15 如何实现从tello无人机上获取实时传输的视频流,然后将获取的视频通过yolov5进行检测
  • ¥15 WPF使用Canvas绘制矢量图问题
  • ¥15 用三极管设计一个单管共射放大电路
  • ¥15 孟德尔随机化r语言运行问题
  • ¥15 pyinstaller编译的时候出现No module named 'imp'
  • ¥15 nirs_kit中打码怎么看(打码文件是csv格式)