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
    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 christov31 View Post
    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.
    What do you have in your tools ? Do you have a tool with the id maximize in it ? Good point though I did not test it with any additional tools but if you look at my screen shots I did have multiple portlets each with that plugin. I think, there may be some conflict in my code with an existing set of tools. I will verify and get back.

    Good catch though.
    Ramki

  8. #8
    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 christov31 View Post
    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.

    This is the issue: You are using an external tools array for the use across all the portlets. when the first tools plugin is initiated for the first container, it adds the tool to the container. I have fixed the code of the plugin to prevent repitition of the tool
    (I added the following lines to the init)

    Code:
            for(var i=0, len=ct.tools.length;i<len;i++) {
                if (ct.tools[i].id=='maximize') return;
            }

    This will prevent multiple occurances of the tool. But to prevent this from coming on the panel that you don't need the maximize tool, you will need to assign a fresh array and not the same tools object. Hope that helps.
    Ramki

  9. #9
    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 rkrishna_1975 View Post
    This is the issue: You are using an external tools array for the use across all the portlets. when the first tools plugin is initiated for the first container, it adds the tool to the container. I have fixed the code of the plugin to prevent repitition of the tool
    (I added the following lines to the init)

    Code:
            for(var i=0, len=ct.tools.length;i<len;i++) {
                if (ct.tools[i].id=='maximize') return;
            }
    This will prevent multiple occurances of the tool. But to prevent this from coming on the panel that you don't need the maximize tool, you will need to assign a fresh array and not the same tools object. Hope that helps.
    Forget that I have now added 2 more lines to the code above that to take a fresh copy of the array. Now you will need to do nothing to your code. Just copy the lates (I have edited the code on the first Post itself).

    Good luck and thanks.
    Ramki
    Ramki

  10. #10
    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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar