Hybrid 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

  2. #2
    franckxx
    Guest

    Default


    Thx for this cool plug !

    Have you got a demo site to see in action ?

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

      0  

    Default


    Sorry I don't but I will add a couple of screen shots to the post.
    Ramki

  4. #4
    franckxx
    Guest

    Default


    whoua it's look very cool...

    I'm sorry for that but : have you got a full sample code.. i've tested but it don't maximize. i've juste paste your code in a Js file. i see panel and icon for maximize but nothing appears.
    i've in Firebug :
    uncaught exception: [Exception... "Component returned failure code: 0x80520012 (NS_ERROR_FILE_NOT_FOUND) [nsIXMLHttpRequest.send]" nsresult: "0x80520012 (NS_ERROR_FILE_NOT_FOUND)" location: "JS frame :: javascript: eval(__firebugTemp__); :: anonymous :: line 1" data: no]

    Sorry i'm Newb... but I'm very interested for test this great Plug !

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

      0  

    Default


    Quote Originally Posted by franckxx View Post
    whoua it's look very cool...

    I'm sorry for that but : have you got a full sample code.. i've tested but it don't maximize. i've juste paste your code in a Js file. i see panel and icon for maximize but nothing appears.
    i've in Firebug :
    Code:
    uncaught exception: [Exception... "Component returned failure code: 0x80520012 (NS_ERROR_FILE_NOT_FOUND) [nsIXMLHttpRequest.send]" nsresult: "0x80520012 (NS_ERROR_FILE_NOT_FOUND)" location: "JS frame :: javascript: eval(__firebugTemp__); :: anonymous :: line 1" data: no]
    Sorry i'm Newb... but I'm very interested for test this great Plug !
    I will try to get to host it some where for people to see.
    Ramki

  6. #6
    Ext User
    Join Date
    Sep 2007
    Posts
    7
    Vote Rating
    0
    christov31 is on a distinguished road

      0  

    Default


    Good work!

    I have installed your plugin and it works on my IE6 and Firefox browsers with my portal implementation.

    I have noticed a small problem: when i had the following code
    Code:
    plugins: new Ext.ux.MaximizeTool(),
    to more than one item (portlet) of the portal, when constructing the viewport, the plugin is loaded more than one time, with an duplicated icon on each portlet (see attachment PNG), including the portlet whithout the plugins line.

    My code:
    Code:
    {
    		            xtype:'portal',
    		            title: 'Home',
    		            id:'panel_home',
    		            //region:'center',
    		            margins:'35 5 5 0',
    		            items:[{
    		                columnWidth:.33,
    		                id:'column1',
    		                style:'padding:10px 0 10px 10px',
    		                items:[{
    		                	id:'portlet1',
    		                    title: 'News',
    		                    tools: tools,
    	                        plugins: new Ext.ux.MaximizeTool(),
    		                    html: MyConstants.shortBogusMarkup
    		                },
    		                {
    		                	id:'portlet2',
    		                    title: 'Another Panel 3',
    		                    tools: tools,
    	                        plugins: new Ext.ux.MaximizeTool(),
    		                    html: MyConstants.shortBogusMarkup
    		                }
    		                ]
    		            },{
    		                columnWidth:.33,
    		                id:'column2',
    		                style:'padding:10px 0 10px 10px',
    		                items:[
    		                {
    		                	id:'portlet3',
    	                        title: 'Aircrafts',
    	                        tools: tools,
    	                        items: new HibernateGridPanel([0,1,2,3,4,5,6])
    		                },{
    		                	id:'Alfresco Repository',
    		                    title: 'Alfresco Repository',
    		                    tools: tools,
    		                    maximizable: true,
    		                    html: '<iframe frameborder="0" height="100%" width="100%" src="'+MyConstants.ALFRESCO_SERVER_URL+'"/>'
    		                    //html: '<script>javascript:location.href="'+MyConstants.ALFRESCO_SERVER_URL+'n/browse/workspace/SpacesStore/dd2e13fb-a314-11dc-ad7d-8f6697c6e4dd"</script>'
    		                }]
    		            },{
    		                columnWidth:.33,
    		                id:'column3',
    		                style:'padding:10px 0 10px 10px',
    		                items:[{
    		                    title: 'Search',
    	                        tools: tools,
        	                    items: searchForm,
    		                	id:'portlet5'
    		                },
    		                {
    		                	id:'portlet6',
    		                    title: 'Personal Schedule',
    		                    layout:'fit',
    		                    tools: tools,
    		                    items: new SampleGrid([0, 2, 3])
    		                }
                        	]
    		            }
    Regards,

    Christophe
    Attached Images

  7. #7
    franckxx
    Guest

    Default


    Quote Originally Posted by rkrishna_1975 View Post
    I will try to get to host it some where for people to see.
    Cool Thx !! I'm pressed to see in action

  8. #8
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,166
    Vote Rating
    -1
    galdaka is an unknown quantity at this point

      0  

    Default


    Quote Originally Posted by rkrishna_1975 View Post
    I will try to get to host it some where for people to see.

    http://www.freehostia.com/

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

      0  

    Default


    hi, rkrishna_1975,thank you for sharing this great code!

    I have added following code to prevent closing portlet when maximized:

    if (panel.tools['close'])
    panel.tools['close'].setVisible(false);

  10. #10
    Ext JS Premium Member prakashpaudel's Avatar
    Join Date
    May 2009
    Location
    Kathmandu, Nepal
    Posts
    59
    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.