[ExtJS5 Study notes] 17th section EXTJS5 Panel component added accodion becomes collapsed navigation bar

Source: Internet
Author: User

This address: http://blog.csdn.net/sushengmiyan/article/details/39102335

Official Example: Http://dev.sencha.com/ext/5.0.1/examples/window/layout.html?theme=neptune

This article Sushengmiyan

--------------------------------------------------------------------------------------------------------------- ---------------------

To make a system, the general need to have navigation bar ah, the tool bar ah these things. See the EXT official example has a window of the Layout window, looked at the effect looks pretty good, learning the next, added to the extjs5 I did before the login system. It looks like it's a system.

Look at the effect of the official example first, looks very good yo:


Look at the official code:

Code Address: Http://dev.sencha.com/ext/5.0.1/examples/window/layout.js

Code content:

Ext.require ([' ext.tab.* ', ' ext.window.* ', ' ext.tip.* ', ' Ext.layout.container.Border ']);    Ext.onready (function () {var win, Button = Ext.get (' show-btn '); Button.on (' click ', function () {if (!win) {win = Ext.create (' Widget.window ', {title: ' La                    Yout Window with title <em>after</em> Tools ', header: {Titleposition:2,                 Titlealign: ' Center '}, Closable:true, closeaction: ' Hide ', Maximizable:true, Animatetarget:button, width:600, Minwidt h:350, height:350, tools: [{type: ' pin '}], layout: {Typ                    E: ' Border ', padding:5}, items: [{region: ' West ', Title: ' Navigation ', width:200, SPLIt:true, Collapsible:true, floatable:false}, { Region: ' Center ', xtype: ' TabPanel ', items: [{//LTR even W hen example is RTL "So" the code can be read Rtl:false, title: ' Bogus Ta B ', HTML: ' <p>window configured With:</p><pre style= ' margin-left:20px ' &GT;&LT;CODE&G T;header: {\ titleposition:2,\n titlealign: ' Center ' \n},\nmaximizable:true,\ntools: [{type: ' Pin '}],\nclosable:t                        Rue</code></pre> '}, {title: ' Another Tab ', HTML: ' Hello World 2 '}, {title: ' closable Tab ', HTML: '        Hello World 3 ', Closable:true}]}); } button.dom.disabled = True            if (win.isvisible ()) {win.hide (this, function () {button.dom.disabled = false;        });            } else {win.show (this, function () {button.dom.disabled = false;        }); }    });});
Now take a look at my final results:

It looks like the official one, haha. This is the imitation, you can know how to look at the official example, the feeling is coming, you can start the appearance of the smooth.

Ha ha.

See what needs to be done to achieve the above effect!

1. Add the contents of the menu item, that is, student files, classroom files, which we temporarily put in the Mainmodel under the data inside, this self-made, can be directly in the panel of the items can be killed is also possible, here to dynamically get a bit.

/** * Application main view. Author:sushengmiyan *blog:http://blog.csdn.net/column/details/sushengextjs5.html */Ext.define (' OaSystem.view.main.MainModel ', {    extend: ' Ext.app.ViewModel ',    alias: ' Viewmodel.main ',//Data module  Data in ViewModel can be obtained in the location of the specified current ViewModel:    {        name: ' Oasystem ',//loading Navigationmenu on the left menu: [{text: ' File Management ',// The name of the menu item Description: ',//Description of the menu item expanded:true,//whether to expand items in the Tree menu: [{text: ' Student profile ',//menu bar Name module: ' Studentarchives ', The name of the corresponding module glyph:0xf00b//menu bar icon font},{text: ' Teacher file ', module: ' Teacherarchives ', Glyph:0xf1a2},{text: ' Classroom Resources ', module: ' R Oomarchives ', Glyph:0xf183}]},{text: ' System settings ', Description: ', items: [{text: ' System parameters ', module: ' Syteminfo ', glyph:0x F0F7}, {text: ' Advanced Settings ', module: ' Highersetting ', glyph:0xf02e}]}]},      //Add data, formulas and/or methods to support your view});
The new left.js content in the regions directory is as follows:

Ext.define (//left navigation bar ' OaSystem.view.main.region.Left ', {extend: ' Ext.panel.Panel ', alias: ' Widget.mainleft ', title : ' Folding menu ', GLYPH:0XF0C9, Split:true,collapsible:true,floatable:false, tools: [{type: ' Pin '}],header: {titleposition : 2,titlealign: ' Center '},maximizable:true,layout: {type: ' accordion ', animate:true,//animation action when clicked Titlecollapse:true , Enablesplitters:true, Hidecollapsetool:true,}, ViewModel: ' main ',//specified to obtain Mainmodel data block initcomponent:function  () {this.items = [];  var menus = This.getviewmodel (). Get (' Navigationmenu ');  for (var i in menus) {//First Get group show var group = menus[i]; var Leftpanel = {menuaccordion:true, xtype: ' Panel ', Title:group.text, bodystyle: {padding: ' 10px '}, layout : ' Fit ', Dockeditems: [{dock: ' Left ', xtype: ' Toolbar ', items: []}], glyph:group.glyph};//Traverse Group menu item for (var  J in Group.items) {var menumodule = group.items[j]; Leftpanel.dockeditems[0].items.push ({text:menumodule.text, glyph:menumodUle.glyph, Handler: ' Onmainmenuclick '});  } this.items.push (Leftpanel);  } this.callparent (arguments); },    });
Introduce this unit in Main.js:

uses:[' OaSystem.view.main.region.Top ', ' oaSystem.view.main.region.Bottom ', ' oaSystem.view.main.region.Left ',

Add this folding navigation to items:

, {     xtype: ' Mainleft ', Region     : ' West ',//left panel     width:250,     split:true            }

OK, finished. Now we can have a folding navigation.





[ExtJS5 Study notes] 17th section EXTJS5 Panel component added accodion becomes collapsed navigation bar

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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