camel0104
camel0104
2010-09-26 17:03

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

  • ext
  • javascript

先看下图:

[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条回答

为你推荐