Threaded View

  1. #1
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    23
    Vote Rating
    1
    rkrishna_1975 is on a distinguished road

      1  

    Default MaximizeTool Plugin for Panels - Ext.ux.MaximizeTool

    MaximizeTool Plugin for Panels - Ext.ux.MaximizeTool


    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:
    Code:
    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:

    Code:
    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'
            }
        ]
    });
    Attached Images
    Last edited by rkrishna_1975; 14 Dec 2007 at 1:36 PM. Reason: Fixing a bug.
    Ramki