ExtJS 4.2 Business Development (i) Homepage construction

This article starts to build a ExtJS 4.2 single page application, here first introduces the homepage construction, the content includes: Homepage structure explanation, the extension function and so on.

Directory

1. Home Page Structure description

2. Extended function

3. Online Demo Address

1. Home Page Structure Description 1.1 home page layout

The traditional ExtJS 4.2 application, the basic layout is as follows:

1.2 Home Page Layout analysis

Depending on the home page layout diagram above, you can convert the specific attempt structure:

Header: The name of the storage system, logo, user information and other content.

Menu: An area of menus that shows the business portal in tree form.

tab: The business area in which the business is embedded in the form of a tab page.

1.3 Home Page Layout code

Starting with ExtJS 4, the entry point for the application starts with the ext.application.

This method replaces the previous ext.onready () and adds some new features: Creating a viewport component, setting the name of the application, and so on.

API: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.app.Application

Ext.application ({name: ' Akapp ', launch:function () {//Set viewport ext.create (' Ext.container.Viewpor T ', {name: ' MainFrame ', layout: ' Border ', Items: [Ext.create (' Ext.panel.                     Panel ', {//Header width: ' 100% ', height:50, Bodyborder:false,                        Border:false, Region: ' North ', style: { Background: ' #739b2e '}, HTML: ' <div id= ' header_content ' >ExtJSDemo</div>                    '}), Ext.create (' Ext.tree.Panel ', {///Menu title: ' Directory ', ID: ' App_tree ', Rootvisible:false, Lines:false, split:true , Width: ' 20% ', Region: ' West ', root: {EX           Panded:true,             Children: [{text: ' Business ',                            Expanded:true, Children: []},                                {text: ' Demo ', expanded:true,                                    Children: [{text: ' Create component ', ID: ' Demo.createcomparep ', leaf:true},                            {text: ' Find component ', ID: ' Demo.querycomparep ', leaf:true},] }]}, listeners: {SEL Ect:function (Thisview, ThisControl) {if (thisControl.data.leaf) {//TODO: Point                (Click menu, Create Related Tab}}}), Ext.create (' Ext.tab.PanEl ', {//Tab ID: ' App_tabcontainer ', Region: ' Center ', Autoscrol                        L:true, defaults: {autoscroll:true, Bodypadding:4,    Closable:true//tab page Close Button}}); }});

　　

2. Extended function

Here is a description of the 2 common features of the home page:

1th : Click on the menu to load the business files dynamically.

The 2nd kind : Switch the Business tab page, modify the value of the page URL.

2.1 Click menu to load business files dynamically

Note : The entry for each business is on the leaf node of the ExtJS tree component, which only shows the home page function when the system was first loaded, and does not load any business code. Now ask to click on the node of the menu to show the business page.

Step : Click menu → load business files → show this business in the tab container

Code : Adding a Select event to the tree container

Ext.create (' Ext.tree.Panel ', {title: ' directory ', root: {expanded:true, children: [{ Text: ' Business ', expanded:true, children: [{text: ' Ship Management ', ID: ' SHIPMGR.SHIPM GrP ', Leaf:true},]}], listeners: {select:function (Thisview, Thiscontro                L) {if (thisControl.data.leaf) {var tabId = thisControl.data.id; 1. Set Default parameters for tab page var tabconfig = {closable:true, Title:thiscontrol                    . Data.text, Id:tabid, Bodyborder:false, Border:false,                Icon: ' Tab.png '};                2. Determine if this tab is already present and display var NewTab = ext.getcmp (' App_tabcontainer ') if present. Getcomponent (TABID); if (!newtab) {//2.1 load Business file var Tabpath = ' app. ' + tabId;//Interface RoadDiameter Eg:app. Shipmgr.shipmgrp Ext.syncrequire (Tabpath, function () {NewTab = Ext.create (tabi                        D, Tabconfig);                        EXT.GETCMP (' App_tabcontainer '). Add (NewTab);                    EXT.GETCMP (' App_tabcontainer '). SetActiveTab (NewTab);                }); } else {//2.2 already has the tab page for this business to set the active ext.getcmp (' App_tabcontainer ') directly. SetActiveTab (n                Ewtab); }            }        }    }  })

2.2 Switching of the Business tab page, modifying the value of the page URL

Description : This feature is primarily used to directly access specific business amounts based on the URL, but it is best to do so before access.

Step : New or toggle tab → Select the node of the menu → modify the page URL

code : Adding Tabchange Events in the tab container

Ext.create (' Ext.tab.Panel ', {    ID: ' App_tabcontainer ', Region    : ' Center ',    Autoscroll:true,    Listeners: {        tabchange:function (ThisControl, Newcard, Oldcard) {            var tabId = newcard.id;            1. Select the node of the menu            var nodes = ext.getcmp (' App_tree '). Store.getnodebyid (tabId);            if (node) {                ext.getcmp (' App_tree '). Getselectionmodel (). Select (node);            } else {                ext.getcmp (' App_tree ') . Getselectionmodel (). Select (0);            }                       2. Modify the URL            if (oldcard) {                history.pushstate (', ', ', Location.href.split (' # ') [0] + ' # ' + newcard.id);            }        }    }}),

3. Online Demo Address

Online address : http://www.akmsg.com/ExtJS/index.html

　　

================================== Series article ==========================================

This article: 7.5 ExtJS 4.2 Business Development (i) home building

Web Development Road Series articles

ExtJS 4.2 Business Development (i) Homepage construction