Using the ExtJS component to implement Top-left-main layouts and increase incident response

Every time in the graduation defense meeting, see the same professional students as long as the XXX management system, is the interface shown, it seems that the layout is still very popular (steal laughter). Next come to our point, in the Web project either front-end or background management more common layout is top-left-main. ：

In the ordinary contact, also saw a lot of similar front-end framework, such as smartadmin,bootstrap-admin, today I will introduce a more concise way to BUILD.

Project Source Address: Https://github.com/zhangxy1035/extjs

Reference: Http://extjs-doc-cn.github.io/ext4api/#!/api

Project Showcase:

The category layout of the interface in this project is done using the ExtJS panel, the main code is as Follows:

1     //Top of2     varToppanel = Ext.create ('Ext.panel.Panel',{3Region' north',///Specify top Direction4Borderfalse,5Height the,6Contentel:'Top',//you need to receive it with an ID in your Web page7Margins'0 0 0 0'8});

In itself, the left panel that you see is actually the tree mentioned in extjs, and next, we will talk about how to build this Tree.

The official code is as Follows:

1 varstore = Ext.create ('Ext.data.TreeStore', {2 Root: {3Expandedtrue,4 Children: [5{text:"Detention", Leaf:true },6{text:"Homework", expanded:true, Children: [7{text:" book Report", Leaf:true },8{text:"Alegrbra", Leaf:true}9             ] },Ten{text:"Buy lottery Tickets", Leaf:true } one         ] a     } - }); -  theExt.create ('Ext.tree.Panel', { -Title'simple Tree', -Width $, -Height max, + store:store, -Rootvisible:false, + renderTo:Ext.getBody () a});

In fact, in the above code, the main is to create a tree data source, and then loaded into the panel, in the delivery to the page display.

In this project, however, due to specific requirements, two leaves on a tree are shown, and a function is added to the jump of two Leaves. The specific code is as Follows:

1Ext.onready (function(){2     //Top of3     varToppanel = ext.create (' Ext.panel.Panel '),{4Region: ' North ',///specify Top Direction5Borderfalse,6Height:80,7Contentel: ' Top ',//you need to receive it with an ID in your Web page8Margins: ' 0 0 0 0 '9     });Ten      one     //Middle a     varCenterpanel = ext.create (' Ext.tab.Panel '),{ -Region: ' Center ', -Contentel: ' Contentiframe ', theId: ' MainContent ', -Items:[{title: ' Home '}] -     }); -      +     //Create a model -Ext.define (' Menu '), { +Extend: ' Ext.data.Model ', a fields : [ at{name: ' text ', type: ' string '}, -{name: ' url ', type: ' string '} -         ] -     }); -      -     //Create data (tree data) in     varInfo1 = { -Text: ' Information 1 ', toLeaftrue, +Url: '.. /src/test1.html ' -     }; the     varInfo2 = { *Text: ' Information 2 ', $Leaftrue,Panax NotoginsengUrl: '.. /src/test2.html ' -     }; the      +     //Create a data source a     varMenustore = ext.create (' Ext.data.TreeStore '),{ theModel: ' Menu ', + proxy:{ -Type: ' Memory ', $ data:[info1,info2] $         }, - root:{ -Text: ' Home ', theLeaffalse, -ExpandedtrueWuyi         } the     }); -      wu     //Create a tree menu -     varMenutree = ext.create (' Ext.tree.Panel '),{ aboutBorderfalse, $ store:menustore, -Hreftarget: ' MainContent ', -Usearrows:false, - listeners:{ aItemclick:function(view,rec,item,index,e) { +                 if(rec.get (' Leaf '))) { theChangepage (rec.get (' URL '), rec.get (' text '))); -                 } $             } the         } the     }); the      the     //Toggle Content -     functionchangepage (url,title) { in         varindex =centerPanel.items.length; the         //tab No more than 2 the         if(index==2) { about             //Index starting from 0 theCenterpanel.remove (1); the         } the         //Dynamically add Tab +         varTabPage =Centerpanel.add ({ - title:title, theClosable:trueBayi         }); the         //set to display the current tab the Centerpanel.setactivetab (tabPage); -Ext.getdom (' contentiframe '). src=url; -     } the      the     // the      the     //left -     varWestpanel = ext.create (' Ext.panel.Panel '),{ theRegion: ' West ', theLayout: ' accordion ', thewidth:200,94Title: ' menu options ', theCollapsible:true, theMargins: ' 0 5px 0 0 ', the items:[menutree]98     }); about      -     //show it through Viewport.101Ext.create (' Ext.container.Viewport ',{102Layout: ' border ',103 items:[toppanel,centerpanel,westpanel]104     }); the     106     107});

View Code

next, refer to the Page:

1 <div id= "top" >2     3 </div>4 <iframe id=" contentiframe "name=" Contentiframe "style=" height:100%;width:100% "frameborder=" 0 "></iframe>

The page on the leaf node can be written on its own, the project is completed, and some of the more detailed points are not proposed, such as the need to introduce extjs. We can look at the source code again https://github.com/zhangxy1035/extjs. Then build your own Project.

Using the ExtJS component to implement Top-left-main layouts and increase incident response