Home > Developer > JavaScript
I started to write the website background yesterday. I plan to use the EXTjs framework. The gap between downloading source code has inadvertently discovered EFS. EFS is an enterprise Frame framework developed on the basis of EXT. After careful research, the advantage of this framework is that the JS controls provided by EXT, such as treepanel and tabpanel, are used in the form of <div> labels, making EXT easier to use. The most important thing is that the page is more intuitive and the layout is clear at a glance. Js Code perfectly supports EXT. It can naturally obtain tag control objects on the page, freely modify its attributes, or use js Code to add controls to the page.
The following describes how to configure EXT + EFS:
First download the relevant documentation and Demo on http://www.efsframe.cn/download.html #
Mainly available online documentation: http://www.efsframe.cn/docs/index.htm
1. Configure the EFS environment:
1) create a web project under MyEclipse.
2) Open the project under EFS Demo java. My path is "Efs Demo Java \ release program \ efs ". Copy the js, css, and images folders under it to the webroot folder of our project.
3) create a jsp page under webroot and use the following code for testing.
[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>
<Div region = "west" width = "200" split = "true" collapsible = "true" title = "Left"> West </div>
<Div region = "center" border = "true" title = "Intermediate layout"> intermediate part <BR>
A simple div tag allows you to quickly construct the page layout without complicated js Code.
</Div>
</BODY>
</HTML>
4) Deploy the project on the server and view the effect in the browser.
2. Use EFS events
The Code of EFS events is similar to the rules in EXT, and the two can be seamlessly connected.
[Html]
<Div region = "north" height = "400" title = "tree menu" collapsible = "true">
<Div xtype = "treepanel" id = "treep" name = "name" width = "218"
Height = "380" onEfsClick = "doTreeClick ()">
<Div id = "root" text = "rootNode" xtype = "root" expanded = "true"
Opurl = "1.html">
<Div text = "system" opurl = "2.html">
<Div text = "node11">
<Div text = "node111" opurl = "asdasd.html"> </div>
</Div>
<Div text = "node12" opurl = "4.html"> </div>
</Div>
<Div text = "user">
<Div text = "Statistics"> </div>
<Div text = "manage" opurl = "user/user_search"> </div>
</Div>
<Div text = "module">
<Div text = "node31" opurl = "4.html">
<Div text = "node311" opurl = "4.html"> </div>
<Div text = "node312" opurl = "4.html"> </div>
</Div>
<Div text = "node32" opurl = "4.html"> </div>
</Div>
</Div>
<Div xtype = "buttons">
<Div text = "show all" onEfsClick = "eAll ()"> </div>
<Div text = "hide all" onEfsClick = "cAll ()"> </div>
<Div text = "add Tab" onEfsClick = "addTab ('btn1 ')" id = "btn1"> </div>
</Div>
</Div>
The above code is written in a static tree structure. Div contains the xtype attribute, which is a control provided by EFS. Other div attributes correspond to ext. You can get a general understanding of the role from the name.
[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 ); "> <div xtype =" treepanel "id =" treep "name =" name "width =" 218 "height =" 380 "onEfsClick =" doTreeClick () ">
In this example, onEfsClick is an event that is triggered by setting any node in the pay-as-you-go tree structure.
[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 );
}
This is your own doTreeClick method. What it does is dynamically Add a Tab page to mainpanel.
It is worth noting that the Efs. getExt ("main") method obtains the control with the id of main on the page.
The following is a preliminary layout of the project background. Click the node in the tree menu to add a tab to the right panel:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
