/** * This class is the controller for the main view for the application. It is specified as * the "controller" of the Main view class. */ Ext.define('saas.view.main.MainController', { extend: 'Ext.app.ViewController', alias: 'controller.main', onNavigationTreeSelectionChange: function (tree, node) { if (node && node.get('viewType')) { this.setActiveTab(node.get('id'), node.get('viewType'), node.get('text')); } }, setActiveTab: function(id, type, title) { var me = this, refs = me.getReferences(), mainTab = refs.mainTabPanel, // existingItem = mainTab.child(type), existingItem = mainTab.down('[id=' + id + ']'), newView; lastView = mainTab.getActiveTab(); if (!existingItem) { newView = me.createTab({ type: type, title: title, id: id }); } if (!newView || !newView.isWindow) { // !newView means we have an existing view, but if the newView isWindow // we don't add it to the card layout. if (existingItem) { // We don't have a newView, so activate the existing view. if (existingItem !== lastView) { mainTab.setActiveTab(existingItem); } newView = existingItem; } else { // newView is set (did not exist already), so add it and make it the // activeItem. Ext.suspendLayouts(); mainTab.setActiveTab(mainTab.add(newView)); Ext.resumeLayouts(true); } } if (newView.isFocusable(true)) { newView.focus(); } }, createTab: function(tabConfig) { var me = this, type = tabConfig.type; if(type == 'grid') { return me.createGrid(tabConfig); }else if(type == 'form') { return me.createForm(tabConfig); }else { var { id, title } = tabConfig; return Ext.create('Ext.panel.Panel', { id, title, html: '无效类型' }); } }, createGrid: function(tabConfig) { var me = this; var { id, title } = tabConfig; var grid = Ext.create('saas.view.core.grid.Panel', { id, title }); return grid; }, createForm: function(tabConfig) { var me = this; var { id, title } = tabConfig; var form = Ext.create('saas.view.core.form.Panel', { id, title }); return form; }, onToggleNavigationSize: function () { var me = this, refs = me.getReferences(), navigationList = refs.navigationTreeList, wrapContainer = refs.mainContainerWrap, collapsing = !navigationList.getMicro(), new_width = collapsing ? 64 : 250; if (Ext.isIE9m || !Ext.os.is.Desktop) { Ext.suspendLayouts(); refs.mainLogo.setWidth(new_width); navigationList.setWidth(new_width); navigationList.setMicro(collapsing); Ext.resumeLayouts(); // do not flush the layout here... // No animation for IE9 or lower... wrapContainer.layout.animatePolicy = wrapContainer.layout.animate = null; wrapContainer.updateLayout(); // ... since this will flush them } else { if (!collapsing) { // If we are leaving micro mode (expanding), we do that first so that the // text of the items in the navlist will be revealed by the animation. navigationList.setMicro(false); } navigationList.canMeasure = false; // Start this layout first since it does not require a layout refs.mainLogo.animate({dynamic: true, to: {width: new_width}}); // Directly adjust the width config and then run the main wrap container layout // as the root layout (it and its chidren). This will cause the adjusted size to // be flushed to the element and animate to that new size. navigationList.width = new_width; wrapContainer.updateLayout({isRoot: true}); navigationList.el.addCls('nav-tree-animating'); // We need to switch to micro mode on the navlist *after* the animation (this // allows the "sweep" to leave the item text in place until it is no longer // visible. if (collapsing) { navigationList.on({ afterlayoutanimation: function () { navigationList.setMicro(true); navigationList.el.removeCls('nav-tree-animating'); navigationList.canMeasure = true; }, single: true }); } } }, });