Home > Others

A demo of homepage layout written by extjs

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

 

There is a csdn users want a extjs layout effect, the original post in: http://topic.csdn.net/u/20090316/15/5c3ded22-1903-488c-ac87-0ae72fe0722c.html;
I wrote a demo for him;

 

I made the following improvements:
1. Split the JS file to facilitate reading and management. I split the JS file into North according to layout. JS, West. JS, south. JS, index. JS. Each JS is constructed as an object in the corresponding region.
2 Layout corresponds to each region, and the objects contained in each region are defined to facilitate operations.
The time is too small, so I only use one icon, But I defined it in the style. The landlord only needs to add some styles and change the iconcls attribute of the object.
The nine panel owners in the central area can also define them for display, which is better.

 

Note: many people ask me for a file in private. Generally, two or three people send this file every week. Now I package it on cnblogs. You can download it:

Http://files.cnblogs.com/sunxing007/work.zip

There are instruction files to teach you how to put the files. If you think it is good, don't forget to come back and try again. I sent emails to many people, but none of the people who received my files returned me even thank you. Ah!

Preview as follows:

Index.html:

<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en">
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> welcome to the xxxx Integrated System </title>
<LINK rel = "stylesheet" type = "text/CSS" href = "ext/resources/CSS/ext-all.css"/>
 
<! -- Begin system JS -->
<SCRIPT type = "text/JavaScript" src = "ext/adapter/EXT/ext-base.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "ext/ ext-all.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "ext/source/locale/ext-lang-zh_CN.js"> </SCRIPT>
<! -- End system JS -->

<! -- Begin user defined JS -->

<SCRIPT type = "text/JavaScript" src = "south. js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "north. js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "index. js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "West. js"> </SCRIPT>
<! -- End user defined JS -->
 
<Style type = "text/CSS">
HTML, body {
Font-family: verdana, Arial, Helvetica, sans-serif;
Font-size: 11pt;
Margin: 0;
Padding: 0;
Border: 0 none;
Overflow: hidden;
Height: 100%;
}
P {
Margin: 5px;
}
. Settings {
Background-image: URL (images/folder_wrench.png );
}
. Nav {
Background-image: URL (images/folder_go.png );
}
. Tabs {
Background-image: URL (images/gears.gif )! Important;
}
. File-upload {
Border-color: # 4ca0ff;
Background-color: # eae8ff;
Border-style: solid;
Border-width: 1px;
Height: 18px;
}
. Div-search-company {
Padding: 5px 5px 5px 5px;
/* Height: 100px ;*/
/* Border: solid red 1px ;*/
}
. Folder. X-tree-node-Icon {
Background: transparent URL (EXT/resources/images/default/tree/folder.gif );
}
. X-tree-node-expanded. X-tree-node-Icon {
Background: transparent URL (EXT/resources/images/default/tree/folder-open.gif );
}
. Search {
Background-image: URL (images/rss_go.png )! Important;
}
</Style>
<SCRIPT type = "text/JavaScript">

</SCRIPT>
</Head>
<Body>
<Div id = "North">
</Div>
<Div>
<Br>
<Div id = "center1" style = "padding-top: 20px"> </div>
</Div>
<Div id = "props-panel" style = "width: 200px; Height: 200px; overflow: hidden;">
</Div>
<Div id = "South">
</Div>

</Body>
</Html>


Index. JS:

 

 

 

 

 

 

VaR southregion = {
Region: 'south ',
Xtype: 'panel ',
Split: false,
Height: 30,
Collapsible: True,
HTML: 'ddddd ',
Margins: '0 0 0 0 ',
Bbar :[
New Ext. toolbar. textitem ('toolbar '),
{Xtype: "tbfill "},
New Ext. toolbar. textitem ('xxxx provincial tax bureau comprehensive platform '),
{Xtype: 'tbparamator '},
New Ext. toolbar. textitem ('technical support <a href = http://www.163.com> XXXX Information Technology Co., Ltd. </a> '),
{Pressed: false, text: 'Contact Us ', iconcls: 'tabs '}
]
 
};

North. JS:

 

 

 

 

 

VaR northregion = new Ext. Panel ({
Region: 'north ',
Height: 60,
HTML: "<Div style = 'font-size: 15pt; '> XX platform collaborative Office System (here I put a DIV, edit this Div to achieve the expected effect) Bbar :[
{Pressed: false, text: 'administrative office ', iconcls: 'tabs', Handler: function () {alert ('reserved function ');}},
{Xtype: 'tbparamator '},
{Pressed: false, text: 'data', iconcls: 'tabs', Handler: function () {alert ('reserved function ');}},
{Xtype: 'tbparamator '},
{Pressed: false, text: 'customer management', iconcls: 'tabs', Handler: function () {alert ('reserved function ');}},
{Xtype: 'tbparamator '},
{Pressed: false, text: 'human resource management', iconcls: 'tabs', Handler: function () {alert ('reserved function ');}},
{Xtype: 'tbparamator '},
{Pressed: false, text: 'invoicing management', iconcls: 'tabs', Handler: function () {alert ('reserved function ');}},
{Xtype: 'tbparamator '},
{Pressed: false, text: 'customer management', iconcls: 'tabs', Handler: function () {alert ('reserved function ');}},
{Xtype: "tbfill "},
{Pressed: false, text: 'refresh', iconcls: 'tabs', Handler: function () {alert ('reserved function ');}},
{Pressed: false, text: 'help', iconcls: 'tabs', Handler: function () {alert ('reserved function ');}},
{Pressed: false, text: 'exited ', iconcls: 'tabs', Handler: function () {alert ('reserved function ');}},
{Xtype: "combo "}
]
});

 

 

 

/** Open the quick tips */
Ext. quicktips. INIT ();
Ext. Form. Field. Prototype. msgtarget = 'day ';

 

/** Redefine the blank image URL */
VaR ImagePath = 'ext/resources/images ';

Ext. blank_image_url = ImagePath + '/default/s.gif ';

VaR tools = [{
ID: 'gear ',
Handler: function (){
Ext. msg. Alert ('message', 'this function need to be modified .');
}
},{
ID: 'close ',
Handler: function (E, target, panel ){
Panel. ownerct. Remove (panel, true );
}
}];

VaR welcomepanel = new Ext. Panel ({
Title: 'Office desktop ',
Iconcls: 'tabs ',
Closable: false,
Layout: 'table ',
Layoutconfig: {columns: 3 },
Defaults: {frame: True, width: 300, height: 200 },
Items :[{
Title: 'suitable for Agent ',
Style: 'margin: 5px ;',
Tools: tools,
Iconcls: 'tabs'
},{
Title: 'memos ',
Tools: tools,
Style: 'margin: 5px ;',
Iconcls: 'tabs'
},{
Title: 'segment message ',
Style: 'margin: 5px ;',
Tools: tools,
Iconcls: 'tabs'
},{
Title: 'schedule ',
Style: 'margin: 5px ;',
Tools: tools,
Iconcls: 'tabs'
},{
Title: 'bulletins ',
Style: 'margin: 5px ;',
Tools: tools,
Iconcls: 'tabs'
},{
Title: 'common website ',
Style: 'margin: 5px ;',
Tools: tools,
Iconcls: 'tabs'
},{
Title: 'bbs ',
Style: 'margin: 5px ;',
Tools: tools,
Iconcls: 'tabs'
},{
Title: 'Forum 5 ',
Style: 'margin: 5px ;',
Tools: tools,
Iconcls: 'tabs'
},{
Title: 'Forum 5 ',
Style: 'margin: 5px ;',
Tools: tools,
Iconcls: 'tabs'
}]
});

/** Define the central area, the core area of the system, and all opened tabs will be displayed in this area */
VaR centerregion = new Ext. tabpanel ({
Region: 'center ',
Deferredrender: false,
Activetab: 0,
Enabletabscroll: True,
Listeners :{
Remove: function (TP, c ){
C. Hide ();
}
},
Autodestroy: false,
Items: [welcomepanel]
});

/** Here is the start of page display */
Ext. onready (function (){
/** Handle Chinese garbled characters in IE submitted data */
Ext. Lib. Ajax. defaultpostheader + = '; charset = UTF-8 ';

VaR viewport = new Ext. viewport ({
Layout: 'border ',
Items :[
/** North panel, defined in North. js */
Northregion,
/** South panel, defined in south. js */
Southregion,
/** West panel, defined in west. js */
Westregion,
/** Central panel ********************************/
Centerregion
]
});
 
});

West. JS:

 

 

 

 

Function testfunction (){
Alert ('this function need to be modified .');
}
/** Management Unit panel */
VaR managetree = new Ext. Tree. treepanel ({
Autoscroll: True,
Animate: false,
Enabledd: True,
Containerscroll: True,
Rootvisible: false,
Height: 350
});
/** Management Unit Root */
VaR manageroot = new Ext. Tree. treenode ({
ID: '0 ',
Text :'',
Leaf: false
});

/** Acquire the sub-tree root of breed management */
VaR sgpzrot = new Ext. Tree. treenode ({
ID: '01 ',
Text: 'managing purchased species ',
Leaf: false,
CLS: 'folder'
});

Sgpzrot. appendchild (New Ext. Tree. treenode ({
ID: '001 ',
Text: 'breed list ',
Leaf: True,
Href: "javascript: testfunction ();"
}));

Sgpzrot. appendchild (New Ext. Tree. treenode ({
ID: '002 ',
Text: 'add breed ',
Leaf: True,
Href: 'javascript: testfunction ();'
}));

Manageroot. appendchild (sgproot );

/** <Reserved backup code> */
Manageroot. appendchild (New Ext. Tree. treenode ({
ID: '11 ',
Text: 'upload xml ',
Leaf: True,
Href: 'javascript: testfunction ();'
}));

Manageroot. appendchild (New Ext. Tree. treenode ({
ID: '21 ',
Text: 'purchase information ',
Leaf: True,
Href: 'javascript: testfunction ();'
}));

/** Company Information Management root */
VaR managecompanyroot = new Ext. Tree. treenode ({
ID: '03 ',
Text: 'managing company information ',
Leaf: false,
CLS: 'folder'
});

Managecompanyroot. appendchild (New Ext. Tree. treenode ({
ID: '031 ',
Text: 'query company information ',
Leaf: True,
Href: 'javascript: testfunction ();'
}));

Managecompanyroot. appendchild (New Ext. Tree. treenode ({
ID: '032 ',
Text: 'add company ',
Leaf: True,
Href: 'javascript: testfunction ();'
}));

Manageroot. appendchild (managecompanyroot );

Managetree. setrootnode (manageroot );

VaR msgtree = new Ext. Tree. treepanel ({
Title: 'unread information ',
Iconcls: 'tabs ',
Autoscroll: True,
Animate: false,
Enabledd: True,
Containerscroll: True,
Rootvisible: false,
Height: 300
});
VaR msgroot = new Ext. Tree. treenode ({
ID: '0 ',
Text :'',
Leaf: false
});
Msgroot. appendchild (New Ext. Tree. treenode ({
ID: '11 ',
Text: 'agent process ',
Leaf: True,
Href: 'javascript: gotouploadxml ();'
}));
Msgroot. appendchild (New Ext. Tree. treenode ({
ID: '11 ',
Text: 'unread message ',
Leaf: True,
Href: 'javascript: gotouploadxml ();'
}));
Msgroot. appendchild (New Ext. Tree. treenode ({
ID: '11 ',
Text: 'daily calendar ',
Leaf: True,
Href: 'javascript: gotouploadxml ();'
}));
Msgtree. setrootnode (msgroot );

// Define and construct the Western Panel
VaR westregion = {
Region: 'west ',
ID: 'West-panel ',
Iconcls: 'tabs ',
Title: 'customer management ',
Split: True,
Width: 200,
Minsize: 175,
Maxsize: 400,
Collapsible: True,
Margins: '0 0 5 ',
Layout: 'column ',
Layoutconfig :{
Animate: True
},
Items :[
{

Items: managetree
},
{
Items: msgtree
}

// Managetree
]
};

 

-------------- Begin layout. js plugin ------------------------------------------------------------------------------------------------

// This example shows how to use the border layout to divide an area into the upper and lower parts.

Ext. onready (function (){
Ext. state. Manager. setprovider (New Ext. state. cookieprovider ());
VaR button = ext. Get ('show-BTN ');
Button. On ('click', function (){
// Tabs for the center
VaR tabs = new Ext. tabpanel ({
// If you use border layout, you must set region for the child element to determine their respective locations.
Region: 'center ',
Margins: '3 3 3 0 ',
Activetab: 0,
Defaults :{
Autoscroll: True
},
Items :[{
Title: 'bogus tab ',
HTML: Ext. example. bogusmarkup
},{
Title: 'Another tab ',
HTML: Ext. example. bogusmarkup
},{
Title: 'closable tab ',
HTML: Ext. example. bogusmarkup,
Closable: True
}]
});

// Panel for the West
VaR nav = new Ext. Panel ({
Title: 'navigation ',
// If you use border layout, you must set region for the child element to determine their respective locations.
Region: 'north ',
Split: True,
Height: 200,
Collapsible: True,
Margins: '3 0 3 3 ',
Cmargins: '3 3 3 3'
});

VaR win = new Ext. Window ({
Title: 'layout Window ',
Closable: True,
Width: 600,
Height: 650,
Plain: True,
// Configure the border Layout
Layout: 'border ',
Items: [Nav, tabs]
});

Win. Show (button );
});
// Ext. state. Manager. Set ('mykey1', 'This is my key ');
// Alert (ext. state. Manager. Get ('mykey1', 'norecord '));
});

-------------- End layout. js restart --------------------------------------------------------------------------------------------------

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More