你所在位置:首页Javascript开发 → 构造网站后台,我的EXT+EFS模式(一)

构造网站后台,我的EXT+EFS模式(一)

发布时间:2019-05-15

昨天开始编写网站后台,本打算使用EXTjs框架。下载的空隙无意中发现了EFS,EFS是在EXT的基础上二次开发的企业Frame框架,仔细研究了一下,此框架的好处是在将EXT提供的JS控件如treepanel、tabpanel等变为<p>标签形式使用,使EXT使用起来更加的简便。最重要的是页面更加直观,布局一目了然。而js代码又可以完美地支持EXT,可以很自然的获取页面上的标签控件对象,自如地修改其属性或者用js代码向页面添加控件。


以下是使用EXT+EFS的配置过程:

首先到 # 上下载相关文档和Demo

主要可使用的在线文档为:


1. 配置EFS环境:

1)在MyEclipse下新建一个web project。

2)将EFS Demo java 下的项目打开,我的路径为“Efs Demo Java\发布程序\efs”。将其下的js,css,images三个文件夹拷贝到我们项目的webroot文件夹下。

3)在webroot下新建一个页面,用以下代码做测试。

[html]
<HTML> 
<HEAD> 
<TITLE> layout 布局 左右 </TITLE> 
<META http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<link rel="stylesheet" type="text/css" href="../css/ext-all.css" /> 
<link rel="stylesheet" type="text/css" href="../css/efs-all.css" /> 
<script type="text/javascript" src="../js/loadmask.js"></script> 
<script type="text/javascript" src="../js/efs-all.js"></script> 
</HEAD> 
<BODY> 
 
<p region="west" width="200" split="true" collapsible="true" title="左边">West部分</p> 
<p region="center" border="true" title="中间布局">中间部分<BR><BR> 
  简单的p标签,即可快速构造该页面布局,不再需要繁杂的js代码 
</p> 
</BODY> 
</HTML> 
4)把项目部署到服务器上,在查看可见其效果。

2. 使用EFS事件

EFS事件的代码编写和EXT中的规则无异,两者可无缝衔接。

[html]
<p region="north" height="400" title="树状菜单" collapsible="true"> 
 
                <p xtype="treepanel" id="treep" name="name" width="218" 
                    height="380" onEfsClick="doTreeClick()"> 
                    <p id="root" text="rootNode" xtype="root" expanded="true" 
                        opurl="1.html"> 
                        <p text="" opurl="2.html"> 
                            <p text="node11"> 
                                <p text="node111" opurl="asdasd.html"></p> 
                            </p> 
                            <p text="node12" opurl="4.html"></p> 
                        </p> 
                        <p text="用户"> 
                            <p text="统计"></p> 
                            <p text="管理" opurl="user/user_search"></p> 
                        </p> 
                        <p text="模块"> 
                            <p text="node31" opurl="4.html"> 
                                <p text="node311" opurl="4.html"></p> 
                                <p text="node312" opurl="4.html"></p> 
                            </p> 
                            <p text="node32" opurl="4.html"></p> 
                        </p> 
                    </p> 
                    <p xtype="buttons"> 
                        <p text="展开所有" onEfsClick="eAll()"></p> 
                        <p text="收起所有" onEfsClick="cAll()"></p> 
                        <p text="添加Tab" onEfsClick="addTab('btn1')" id="btn1"></p> 
                    </p> 
                </p> 

以上代码编写的是一个静态树状结构。 p中含有xtype属性的,既是EFS提供的控件。p的其他属性均和ext相对应。可以大致从名字上了解作用。

[html]
<pre name="code" class="html" style="margin-top: 4px; margin-right: 0px; margin-bottom: 4px; margin-left: 0px; background-color: rgb(240, 240, 240); "><p xtype="treepanel" id="treep" name="name" width="218" height="380" onEfsClick="doTreeClick()"> 
如这句,onEfsClick即设置按动树状结构的其中任意一个节点会触发的事件。
[javascript]
     
function doTreeClick(node){ 
    alert(node.attributes.opurl); 
    var opurl = node.attributes.opurl; 
    if(typeof mainpanel == "undefined"){ 
                mainpanel = Efs.getExt("main"); 
        } 
        var n; 
        n = mainpanel.getComponent(opurl); 
        if(n) { 
            mainpanel.setActiveTab(n); 
            return; 
        } 
        n = mainpanel.add( { 
            id : opurl, 
            title : opurl, 
            html : '<iframe width=100% height=100% src=' + opurl + ' />', 
            //autoLoad : '', 
            closable : 'true' 
        }); 
        mainpanel.setActiveTab(n); 
   } 

这是自己编写的doTreeClick方法。它所做的事情是动态向mainpanel添加一个Tab页面。

值得注意的是Efs.getExt("main")这个方法,获得了页面上id为main的控件。


以下是初步对项目后台的布局,点击树状菜单的节点即向右边的面板中增加tab: 


 \


关于Efs还有很多东西仍未探索。这篇文章写于对EXT和EFS认识的第一天,只是我对Ext和Efs框架认识的开始,今晚继续加油~ 


摘自  kexinmei的专栏 
上一篇:jquery简短右键菜单例子(多浏览器兼容)
下一篇:jquery动态增删行插件