saas-platform/frontend/saas-web/app/view/main/MainController.js

/**
 * 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
                });
            }
        }
    },
});