[ExtJS5 Study Notes] In section 17th, the panel component of Extjs5 adds accodion to the folding navigation bar, And extjs5accodion

[ExtJS5 Study Notes] In section 17th, the panel component of Extjs5 adds accodion to the folding navigation bar, And extjs5accodion

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

Author: sushengmiyan

Certificate ------------------------------------------------------------------------------------------------------------------------------------

For a system, you usually need a navigation bar, tool bar, and other things. We can see that Ext has a layout window in the official example. It looks pretty good, so I learned how to add it to my previous extjs5 logon system. This looks like a system.

Let's take a look at the results of the official example. It looks very good:

Check the official 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: 'Layout Window with title <em>after</em> tools',                header: {                    titlePosition: 2,                    titleAlign: 'center'                },                closable: true,                closeAction: 'hide',                maximizable: true,                animateTarget: button,                width: 600,                minWidth: 350,                height: 350,                tools: [{type: 'pin'}],                layout: {                    type: 'border',                    padding: 5                },                items: [{                    region: 'west',                    title: 'Navigation',                    width: 200,                    split: true,                    collapsible: true,                    floatable: false                }, {                    region: 'center',                    xtype: 'tabpanel',                    items: [{                        // LTR even when example is RTL so that the code can be read                        rtl: false,                        title: 'Bogus Tab',                        html: '<p>Window configured with:</p><pre style="margin-left:20px"><code>header: {\n    titlePosition: 2,\n    titleAlign: "center"\n},\nmaximizable: true,\ntools: [{type: "pin"}],\nclosable: true</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 let's take a look at my final results:

Does it look similar to the official version? haha. This is just an imitation. I can know how to look at the official example. Now I feel like I can get started smoothly.

Haha.

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

1. the content of the added menu items is the student files and classroom files. This item is temporarily placed in the data under mainmodel, which is self-developed and can be directly fixed in items of panel, here we can get it dynamically.

/*** Main application view. author: sushengmiyan * blogs: http://blog.csdn.net/column/details/sushengextjs5.html */Ext. define ('oss. view. main. mainModel ', {extend: 'ext. app. viewModel ', alias: 'viewmodel. main ', // data in the ViewModel of the data module can be obtained from the specified current ViewModel where data: {name: 'osasystem', // The left menu is loaded with NavigationMenu: [{text: 'archive management', // The Name Of The menu item description: '', // the description of the menu item expanded: true, // whether to expand items: [{text: 'In the tree menu: 'Student archive', // The name module of the menu bar: 'studentarchives ', // The name of the corresponding module glyph: 0xf00b // The icon font of the menu bar}, {text: 'instructor archive', module: 'teacherarchives ', glyph: 0xf1a2}, {text: 'classroom resource', module: 'roomarchives', glyph: 0xf183}]}, {text: 'System settings', description: '', items: [{text: 'System parameters', module: 'syteminfo ', glyph: 0xf0f7}, {text: 'advanced settings ', module: 'hihersetting', glyph: 0xf02e}]}, // Add data, formulas and/or methods to support your view });

Create Left. js in the regions directory as follows:

Ext. define (// left navigation bar 'oss. 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, // when clicked, there is an animated action titleCollapse: true, enableSplitters: true, hideCollapseTool: true,}, viewModel: 'main', // you can obtain the data block initComponent: function () {this. items = []; var menus = this. getViewModel (). get ('navigationmenu '); for (var I in menus) {// first obtain the group display 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}; // lists the menu items in the group for (var j in group. items) {var menumodule = group. items [j]; leftpanel.doc kedItems [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 in items:

, {Xtype: 'mainleft', region: 'west', // width: 250, split: true} on the left panel}

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