MaximizeTool Plugin for Panels - Ext.ux.MaximizeTool

[rkrishna_1975]

I was needing a way to expand the view of a panel when the user wanted to see more. There is always the way of resizable but, when I had the portal layout, this was even more imperative. After some thoughts, i built a maximize tool plugin that can be added to any panel and the maximize behaviour will act. Try it and let me know what you think.

Code for the plugin:

Ext.ux.MaximizeTool = function() {
    this.init= function(ct) {
        var maximizeTool = {
            id: 'maximize', 
            handler: handleMaximize, 
            scope: ct, 
            qtip: 'Maximize'
        }; 
        ct.tools = ct.tools || [];
        var newTools = ct.tools.slice();
        ct.tools =newTools;
        for(var i=0, len=ct.tools.length;i<len;i++) {
            if (ct.tools[i].id=='maximize') return;
        }
        ct.tools[ct.tools.length] = maximizeTool;
    };

    function handleMaximize(event, toolEl, panel){
        panel.originalOwnerCt = panel.ownerCt;
        panel.originalPosition = panel.ownerCt.items.indexOf(panel);
        panel.originalSize=panel.getSize();

        if (!toolEl.window) {
            var defaultConfig = {
                id: (panel.getId() + '-MAX'),
                width: (Ext.getBody().getSize().width - 100),
                height: (Ext.getBody().getSize().height - 100),
                resizable: true,
                draggable: true,
                closable: true,
                closeAction: 'hide',
                hideBorders: true,
                plain: true,
                layout: 'fit',
                autoScroll: false,
                border: false,
                bodyBorder: false,
                frame: true,
                pinned: true,
                bodyStyle: 'background-color: #ffffff;'
            };
            toolEl.window = new Ext.Window(defaultConfig);
            toolEl.window.on('hide', handleMinimize, panel);
        }
        if (!panel.dummyComponent) {
            var dummyCompConfig = {
                title: panel.title,
                width: panel.getSize().width,
                height: panel.getSize().height,
                html: '&nbsp;'
            };
            panel.dummyComponent = new Ext.Panel(dummyCompConfig);
        }
        
        toolEl.window.add(panel);
        if (panel.tools['toggle']) panel.tools['toggle'].setVisible(false);
        panel.tools['maximize'].setVisible(false);

        panel.originalOwnerCt.insert(panel.originalPosition, panel.dummyComponent);
        panel.originalOwnerCt.doLayout();
        panel.dummyComponent.setSize(panel.originalSize);
        panel.dummyComponent.setVisible(true);
        panel.dummyComponent.getEl().mask('This is maximized.');
        toolEl.window.show(this);
    };
    
    function handleMinimize(window) {
        this.dummyComponent.getEl().unmask();
        this.dummyComponent.setVisible(false);
        this.originalOwnerCt.insert(this.originalPosition, this);
        this.originalOwnerCt.doLayout(); 
        this.setSize(this.originalSize);
        this.tools['maximize'].setVisible(true);
        if (this.tools['toggle']) this.tools['toggle'].setVisible(true);
    }
    
    
};

Sample code for the implementation:

var portalViewPort = new Ext.Viewport({
    layout:'border',
    hideBorders: true,
    items:[ 
        {
            region: 'north',
            height: 68,
            split: false,
            border: false,
            bodyBorder: false,
            autoLoad: {url: "header.my", nocache: true, scripts: true},
            margins: {left: 0, top: 0, right: 0, bottom: 0}
        }, {
            region:'center',
            autoScroll: true,
            border: false,
            bodyBorder: false,
            bodyStyle: 'padding-left: 50px; padding-top:10px; padding-right: 50px;background-color: #ffffff;',
            items: {
                        title: 'My testing Panel',
                        layout: 'fit',
                        width: 400,
                        height: 200,
                        plugins: new Ext.ux.MaximizeTool(),
                        html: '<p>Some content here</p>'
                    }
        }, {
            region:'south',
            split: false,
            height: 25,
            border: false,
            bodyBorder: false,
            autoLoad: {url: "footer.my", nocache: true},
            margins:'0 0 0 0'
        }
    ]
});