1. #31
    Sencha User fangzhouxing's Avatar
    Join Date
    Mar 2007
    Posts
    466
    Vote Rating
    1
    fangzhouxing is on a distinguished road

      0  

    Default


    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!)

    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;
    ...
    Last edited by mystix; 23 Jul 2008 at 10:29 PM. Reason: post code in [code][/code] tags. refer to http://extjs.com/forum/misc.php?do=bbcode

  2. #32
    Sencha User
    Join Date
    Mar 2008
    Posts
    566
    Vote Rating
    0
    moegal is on a distinguished road

      0  

    Default


    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

  3. #33
    Ext User
    Join Date
    Jul 2009
    Posts
    8
    Vote Rating
    0
    euphORIA is on a distinguished road

      0  

    Default


    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.

    PHP Code:
    function handleMaximize(eventtoolElpanel){
            
    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=0len=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),
                    
    resizabletrue,
                    
    draggabletrue,
                    
    closabletrue,
                    
    closeAction'hide',
                    
    hideBorderstrue,
                    
    plaintrue,
                    
    layout'fit',
                    
    autoScrollfalse,
                    
    borderfalse,
                    
    bodyBorderfalse,
                    
    frametrue,
                    
    pinnedtrue,
                    
    bodyStyle'background-color: #ffffff;'
                
    };
                
    toolEl.window = new Ext.Window(defaultConfig);
                
    toolEl.window.on('hide'handleMinimizepanel);
            }
            if (!
    panel.dummyComponent) {
                var 
    dummyCompConfig = {
                    
    titlepanel.title,
                    
    widthpanel.getSize().width,
                    
    heightpanel.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.originalPositionpanel.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:

    PHP Code:
    // create the Grid
                
    var grid = new Ext.grid.GridPanel({
                    
    storepagingProxyStore//2.3
                    
    itemId'maxTable',
                    
    columns: [
                        {
    id:'procId'header""width25fixedtruedataIndex'procId'rendererrenderSubtypeAndBasculement},
                        {
    header""width25fixedtruedataIndex'procId'rendererrenderClassIcon},
                        {
    header"Auteur"width50sortabletruedataIndex'auteur'},
                        {
    header"Référence Interne"width150sortabletruedataIndex'refDg'},
                        {
    header"Réceptionnée le"width100sortabletruedataIndex'modifDate'rendererExt.util.Format.dateRenderer('d/m/Y')},
                        {
    header"State"width100sortabletruedataIndex'state'hiddentrue},
                        {
    header""width25fixedtruedataIndex'procId'rendererrenderPrintLink},
                        {
    header""width25fixedtruedataIndex'procId'rendererrenderUseLink}
                    ],
                    
    stripeRowsfalse,
                    
    collapsibletrue,
                    
    autoHeighttrue,
                    
    iconCls'icon-page',
                    
    borderfalse,
                    
    plugins: [
                        new 
    Ext.ux.MaximizeTool(),
                        new 
    Ext.ux.grid.AutoSizeColumns()
                    ],
                    
    viewConfig: {
                        
    forceFittrue,
                        
    scrollOffset0,
                        
    getRowClass: function(recordindex){
                            return (
    record.data.procType '-row');
                        }
                    },
                    
    bbarpagingToolBar
                    
                
    }); 

    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

  4. #34
    Sencha User
    Join Date
    Mar 2008
    Posts
    566
    Vote Rating
    0
    moegal is on a distinguished road

      0  

    Default


    Anyone?

    Thanks, Marty

    Quote Originally Posted by moegal View Post
    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

  5. #35
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Moscow
    Posts
    137
    Vote Rating
    0
    Chemist is on a distinguished road

      0  

    Default


    Did someone test this plugin on ExtJS 3.0?

  6. #36
    Ext JS Premium Member prakashpaudel's Avatar
    Join Date
    May 2009
    Location
    Kathmandu, Nepal
    Posts
    58
    Vote Rating
    0
    prakashpaudel is on a distinguished road

      0  

    Default


    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.

  7. #37
    Ext JS Premium Member prakashpaudel's Avatar
    Join Date
    May 2009
    Location
    Kathmandu, Nepal
    Posts
    58
    Vote Rating
    0
    prakashpaudel is on a distinguished road

      0  

    Default


    Quote Originally Posted by Chemist View Post
    Did someone test this plugin on ExtJS 3.0?
    Worked for me on ExtJS 2.2 and 3.0

  8. #38
    Ext User
    Join Date
    May 2009
    Posts
    5
    Vote Rating
    0
    praveendh is on a distinguished road

      0  

    Default destroy dummycomponent for panel

    destroy dummycomponent for panel


    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.
    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);
            }
            //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();
        }
        
        
    };
    Last edited by mystix; 5 Mar 2010 at 7:13 AM. Reason: POST CODE IN [code][/code] TAGS. see http://extjs.com/forum/misc.php?do=bbcode#code

  9. #39
    Touch Premium Member
    Join Date
    Apr 2007
    Posts
    24
    Vote Rating
    0
    cassebn is on a distinguished road

      0  

    Question Possible to use in TabPanel?

    Possible to use in TabPanel?


    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.

  10. #40
    Ext User
    Join Date
    May 2010
    Location
    INDIA
    Posts
    4
    Vote Rating
    0
    RajaSelvaraj is on a distinguished road

      0  

    Default Data missing when we close the panel

    Data missing when we close the panel


    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