MaximizeTool Plugin for Panels - Ext.ux.MaximizeTool

[fangzhouxing]

jbum,can you provide the actual code?

By the way, anyone can explain to me what the variable newTools in following code means? (I think it is not necessary!)

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;
...

[moegal]

Hi,

This is really useful. Thanks!

How would I call the minimize function? I have a grid in the portlet and when I click on a row I need to do an action and minimize the max window.

I am calling the plugin like:

plugins : new Ext.ux.MaximizeTool()

Thanks, Marty

[euphORIA]

this plug-in has been very helpful. Many thanks!

Now I am trying to modify it a little bit to display some extra hidden columns in the maximized panel.

function handleMaximize(event, toolEl, panel){
        panel.originalOwnerCt = panel.ownerCt;
        panel.originalPosition = panel.ownerCt.items.indexOf(panel);
        panel.originalSize=panel.getSize();
        
        // Display hidden Columns
        var columns = panel.getColumnModel().getColumnsBy(function(c){
            return c.hidden;
        });
        
        for(var i=0, len=columns.length;i<len;i++) {
            columns[i].hidden = false;
        }
        
        panel.getView().fitColumns(false);
        panel.getView().updateAllColumnWidths();
        panel.doLayout();
        // End of modifications

        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);
    }; 

Unfortunately the panel does not seems to get refreshed (take the new columns into account) and the previously hidden columns are not visible because its width is 0 or close to it.

This is my panel grid code, which is inside a viewport with a fit layout:

// create the Grid
            var grid = new Ext.grid.GridPanel({
                store: pagingProxyStore, //2.3
                itemId: 'maxTable',
                columns: [
                    {id:'procId', header: "", width: 25, fixed: true, dataIndex: 'procId', renderer: renderSubtypeAndBasculement},
                    {header: "", width: 25, fixed: true, dataIndex: 'procId', renderer: renderClassIcon},
                    {header: "Auteur", width: 50, sortable: true, dataIndex: 'auteur'},
                    {header: "Référence Interne", width: 150, sortable: true, dataIndex: 'refDg'},
                    {header: "Réceptionnée le", width: 100, sortable: true, dataIndex: 'modifDate', renderer: Ext.util.Format.dateRenderer('d/m/Y')},
                    {header: "State", width: 100, sortable: true, dataIndex: 'state', hidden: true},
                    {header: "", width: 25, fixed: true, dataIndex: 'procId', renderer: renderPrintLink},
                    {header: "", width: 25, fixed: true, dataIndex: 'procId', renderer: renderUseLink}
                ],
                stripeRows: false,
                collapsible: true,
                autoHeight: true,
                iconCls: 'icon-page',
                border: false,
                plugins: [
                    new Ext.ux.MaximizeTool(),
                    new Ext.ux.grid.AutoSizeColumns()
                ],
                viewConfig: {
                    forceFit: true,
                    scrollOffset: 0,
                    getRowClass: function(record, index){
                        return (record.data.procType + '-row');
                    }
                },
                bbar: pagingToolBar
                
            }); 

I have been searching in the forums and trying different suggestions but I did not find a solution.

Please, help me. I am a newbie and still have a lot to learn

[moegal]

Anyone?

Thanks, Marty

Hi,

This is really useful. Thanks!

How would I call the minimize function? I have a grid in the portlet and when I click on a row I need to do an action and minimize the max window.

I am calling the plugin like:

plugins : new Ext.ux.MaximizeTool()

Thanks, Marty

[Chemist]

Did someone test this plugin on ExtJS 3.0?

[prakashpaudel]

Thanks Ram Krishna, It worked for me. I was doing maximizing in another way, but this is nice. I am switching to it. And thanks again.

[prakashpaudel]

Did someone test this plugin on ExtJS 3.0?

Worked for me on ExtJS 2.2 and 3.0

[praveendh]

In the below pulgin, when I minimize the panel , I also want to destroy the dummy panel component. I have added this line to minimize handler, this.dummyComponent.destroy();
But i still get an object in panel.dummyComponent when i try to maximize the panel for second time. is there any way i can get rid of this dummy component and recreate it everytime I maximize the panel.

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);
        }
        //alert(panel.dummyComponent);
        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);
        this.dummyComponent.destroy();
    }
    
    
};

[cassebn]

Has anyone had success with this UX in a tab panel? Out of the box implementation inserts a new blank tab on minimize instead of adding the maximized grid back into the tab it was originally contained in.

[RajaSelvaraj]

hi,

Panel maximize is working for me. but If I click the close button the panel . panel closed and the data are missing.

Thanks,
Raja S