1. #1
    Ext User
    Join Date
    Jan 2008
    Posts
    29
    Vote Rating
    2
    elopez2022 is on a distinguished road

      1  

    Thumbs up Maximize Portlets in Portal Example

    Maximize Portlets in Portal Example


    Below is my effort at maximizing the portlets in the portal example. My search of the forums only came up with the maximize plugin, http://extjs.com/forum/showthread.php?t=20662. While the plugin is great it spawned a new window. I wanted something that filled the center panel of the viewport. My workaround was to add a portal column that is hidden until needed. When a portlet is maximized, I add it to the hidden portal column, maximize the hidden portal column, make it visible and hide the original visible portal columns. I do the opposite when minimizing the maximized window. Below is the code. Just replace the code of the sample.js file in the portal example with the one below.

    The code has not been "streamlined" or "oop-fied" (Object Oriented Programming) so that everyone can understand and see the steps taken.

    All comments and feed is appreciated. I hope this helps some of you.

    Code:
    /*
     * Ext JS Library 2.1
     * Copyright(c) 2006-2008, Ext JS, LLC.
     * licensing@extjs.com
     * 
     * http://extjs.com/license
     */
    
    Ext.BLANK_IMAGE_URL = '../Ext/resources/images/default/s.gif';
    
    Ext.onReady(function(){
    
        Ext.QuickTips.init();
        
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    
        // create some portlet tools using built in Ext tool ids
        var tools = [{
            id:'refresh',
            qtip: 'Reload Panel',
            handler: function(e, target, panel){
                Ext.MessageBox.alert('Portal Example','You click the reload tool button!')
            }
        },{
            id:'minimize',
            hidden:true,
            qtip: 'Minimize Panel',
            handler: function(e, target, panel)
            {
                
                var panelCollection = Ext.getCmp("center-panel");
                var hiddenPanel = Ext.getCmp("center-panel-col0");   
                var index = 0;
                
                hiddenPanel.remove(panel,false);
                hiddenPanel.hide();
                
                panel.tools['toggle'].setVisible(true);
                panel.tools['maximize'].setVisible(true);
                panel.tools['minimize'].setVisible(false);
                panel.setSize(panel.originalSize);
                
                panel.originalOwnerCt.insert(panel.originalPosition, panel);
                panel.originalOwnerCt.doLayout();
                
                while(index < panelCollection.items.keys.length){
                    
                    if(panelCollection.items.keys[index] != hiddenPanel.id)
                    {
                        panelCollection.items.items[index].el.setDisplayed("inline");
                    }
                    
                    ++index;
                }
                
                panelCollection.doLayout();
            }
        },{
            id:'maximize',
            qtip: 'Maximize Panel',
            handler: function(e, target, panel)
            {
               
                panel.originalOwnerCt = panel.ownerCt;
                panel.originalPosition = panel.ownerCt.items.indexOf(panel);
                panel.originalSize=panel.getSize();
                
                var panelCollection = Ext.getCmp("center-panel");
                var hiddenPanel = Ext.getCmp("center-panel-col0");   
                var index = 0;
                
                while(index < panelCollection.items.keys.length){
                    
                    if(panelCollection.items.keys[index] != hiddenPanel.id)
                    {
                        panelCollection.items.items[index].el.setDisplayed("none");
                    }
                    
                    ++index;
                }
          
                panel.ownerCt.remove(panel,false);
                
                hiddenPanel.items.add(panel);
                hiddenPanel.setSize(hiddenPanel.ownerCt.getSize());
                hiddenPanel.doLayout();
                hiddenPanel.show();
                
                panel.tools['toggle'].setVisible(false);
                panel.tools['maximize'].setVisible(false);
                panel.tools['minimize'].setVisible(true);
                
                panel.setWidth(hiddenPanel.ownerCt.getInnerWidth());
                panel.setHeight(hiddenPanel.ownerCt.getInnerHeight());
    
                
                
            }
        }];
    
        var viewport = new Ext.Viewport({
            layout:'border',
            items:[{
                region:'west',
                id:'west-panel',
                title:'West',
                split:true,
                width: 300,
                minSize: 175,
                maxSize: 400,
                collapsible: true,
                margins:'35 0 5 5',
                cmargins:'35 5 5 5',
                layout:'accordion',
                layoutConfig:{
                    animate:true
                },
                items: [{
                    html: Ext.example.shortBogusMarkup,
                    title:'Navigation',
                    autoScroll:true,
                    border:false,
                    iconCls:'nav'
                },{
                    title:'Settings',
                    html: Ext.example.shortBogusMarkup,
                    border:false,
                    autoScroll:true,
                    iconCls:'settings'
                }]
            },{
                xtype:'portal',
                region:'center',
                margins:'35 5 5 0',
                id:'center-panel',
                listeners: {'resize': {fn: function() 
                    {
                       var tmpPanel = Ext.getCmp("center-panel-col0");
                       
                       if(tmpPanel.isVisible())
                        {
                            tmpPanel.setSize(tmpPanel.ownerCt.getSize());
                        }
                    },
                    scope: this
                    }},
                autoScroll:false,
                items:[{
                    columnWidth:0,
                    id:'center-panel-col0',
                    layout:'fit',
                    hidden:true
                    },{
                    columnWidth:.33,
                    id:'center-panel-col1',
                    style:'padding:10px 0 10px 10px',
                    items:[{
                        title: 'Grid in a Portlet',
                        layout:'fit',
                        tools: tools,
                        items: new SampleGrid([0, 2, 3])
                    },{
                        title: 'Another Panel 1',
                        tools: tools,
                        html: Ext.example.shortBogusMarkup
                    }
                    ]
                },{
                    columnWidth:.33,
                    id:'center-panel-col2',
                    style:'padding:10px 0 10px 10px',
                    items:[{
                        title: 'Panel 2',
                        tools: tools,
                        html: Ext.example.shortBogusMarkup
                    },{
                        title: 'Another Panel 2',
                        tools: tools,
                        html: Ext.example.shortBogusMarkup
                    }]
                },{
                    columnWidth:.33,
                    id:'center-panel-col3',
                    style:'padding:10px',
                    items:[{
                        title: 'Panel 3',
                        tools: tools,
                        html: Ext.example.shortBogusMarkup
                    },{
                        title: 'Another Panel 3',
                        tools: tools,
                        html: Ext.example.shortBogusMarkup
                    }]
                }]
            }]
        });
    });

  2. #2
    Sencha User
    Join Date
    Jun 2008
    Posts
    18
    Vote Rating
    0
    raphac is on a distinguished road

      0  

    Default


    Very good.
    But when minimized, the height painel size increases. (firefox3)

    Thanks.

  3. #3
    Ext User
    Join Date
    Jan 2008
    Posts
    29
    Vote Rating
    2
    elopez2022 is on a distinguished road

      1  

    Default


    raphac,

    I've tested it against ff3 and I don't have a problem. Can you include a screen shot?

    Thanks

  4. #4
    Sencha User
    Join Date
    Jun 2008
    Posts
    18
    Vote Rating
    0
    raphac is on a distinguished road

      0  

    Default


    Try expand and minimize many times.
    Follow image...
    Attached Images

  5. #5
    Ext User
    Join Date
    Jan 2008
    Posts
    29
    Vote Rating
    2
    elopez2022 is on a distinguished road

      0  

    Default


    raphac,

    I'm very sorry but I cannot duplicate your error. I have tried over and over and can't simulate the error. If anyone else is having a similar problem please post your experiences/solutions.

    Thanks

  6. #6
    Ext User
    Join Date
    Nov 2008
    Posts
    29
    Vote Rating
    0
    notdet is on a distinguished road

      0  

    Default Re:Maximize Portlets in Portal Example

    Re:Maximize Portlets in Portal Example


    I agree with raphac, my experience is same. When I click on Maximize and then minimize even for the first time, I see that the portlet or column item which I had maximized, its height is increased then what it was at the time of load. It has nothing to do with browser as it same in FF 3.03 and IE 7.057.

    In order to reproduce this, maximize and minimize the same Panel for few times or even couple of times and you can see the difference in the height.

    I am a new to ExtJs and first thing I had to do was the portal. So please let me know if there is anything I am missing.

    Thanks,

  7. #7
    Sencha User SachinJadhav's Avatar
    Join Date
    Jun 2008
    Posts
    43
    Vote Rating
    0
    SachinJadhav is on a distinguished road

      0  

    Question Portlet Loading problem

    Portlet Loading problem


    Hi,

    I am trying to rich set of libraries into application that would render SWF objects into a portlet for user up to best appearance.

    A small problem I am facing is When I add SWF object in MediaPanel and MediaPanel into portlet, everything goes fine but portlet loading.

    Porlets a re visible to end user but content are not. Besides that when I drag one of the portlets, this action makes everything within the portlet visible.

    Please find the attchment for more clearer view.

    Please let me know if is there any property to set so that portlet would render a data inside it on the load operation itself, in stead after interaction.



    Thanks and Regards,
    SachinJadhav.
    Attached Files

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

      0  

    Default


    elopez2022,thank you for sharing code.

    I have used your code in my project, but when I put the whole portal in one tabpanel, and maximize one of portlet, then switch to another tabpanel, the maximized portlet become invisible when I switch back.

  9. #9
    Ext JS Premium Member
    Join Date
    Oct 2007
    Posts
    2
    Vote Rating
    0
    FunkyMonkey is on a distinguished road

      0  

    Default solution(?)

    solution(?)


    Quote Originally Posted by elopez2022 View Post
    raphac,

    I'm very sorry but I cannot duplicate your error. I have tried over and over and can't simulate the error. If anyone else is having a similar problem please post your experiences/solutions.

    Thanks
    I was experiencing a similar problem. I made the following changes in the minimize/maximize handlers and the problem went away for me.

    After capturing the panel.getSize(), I also captured the panel's innerHeight.
    maximize:
    panel.originalHeight=panel.getInnerHeight();

    minimize:
    panel.setSize(panel.originalSize);
    panel.setHeight(panel.originalHeight);

  10. #10
    Ext User
    Join Date
    Mar 2009
    Posts
    1
    Vote Rating
    0
    bleakoasis is on a distinguished road

      0  

    Default


    Quote Originally Posted by elopez2022 View Post
    raphac,

    I'm very sorry but I cannot duplicate your error. I have tried over and over and can't simulate the error. If anyone else is having a similar problem please post your experiences/solutions.

    Thanks
    Maximize one of portlet then move it,you will see the result.
    Better to make the portlet draggable to false when maximized.