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

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