how to add maximise icon and functionality to a panel (portal)

[alex.capurro]

Hi guys,

I have seen a couple of posts about adding a maximise functionality to a panel in the portal layout. I have seen sample code and i understand it however what i cant get my head around is how do you actually go about adding the maximise icon to the panel in the first place? and how do you assign the maximise functionality to the icon?

Thanks in advanced!

[alex.capurro]

Actually i now know how to do this, just by adding:

_{tools: [{ 
                   iconCls:'icon-add', 
                   handler:function(){alert('new')} 
                 }]}

to the panel object.

[tslatt]

To get the icon to appear, set maximizable to true when creating your panel:

<div id="w001" class="easyui-panel pdiv" title="Test 1" collapsible="true" closable="true" maximizable="true" closed="true" collapsed="true" href="test-ajax-id.asp"></div>

That will show the maximize icon at first, and when the panel is maximized, the icon changes to the restore icon.

To assign actions to the maximize/restore events, do this:

//add events to all panels (these are events on the individual panels, not the portal itself)
$(".easyui-panel").each(function(index) {//for all panels
  $(this).panel({//for this panel
   
    onLoad: function() {//do this when a panel's href is loaded (ajax)
      //your actions here...
    },//end on panel ajax load

    onClose: function() {//do this on panel close
      //your actions here...
    },//end on panel close

    onCollapse: function() {//do this on panel expand
      //your actions here...
    },//end on panel collapse

    onExpand: function() {//do this on panel expand
      //your actions here...
    },//end on panel expand

    onMaximize: function() {//do this on panel maximize
      //your actions here...
    },//end on panel maximize

    onRestore: function() {//do this on panel restore (unmaximized)
      //your actions here...
    },//end on panel restore (unmaximized)

    onResize: function(width, height) {//do this on panel move/resize
      //your actions here...
    }//end on panel move/resize

  });//end for this panel
});//end for all panels
//end add events to all panels

[alex.capurro]

Hi tslatt,

Thanks for clearing that up for me i got it working now.

I have another doubt though, if i want to add another icon to the tool bar of the panel (such as a refresh button) i know that i can do something like this when im looping through my list of panels:

tools: [{ 
                   iconCls:'icon-add', 
                   handler:function(){someFunciton(panel.id)} 
                 }]

However, as with the problem before, how could i pass in the current panel id into the function? Because with the example you mention i understand that you are looping through all of the inbuilt functions of the panel, but this is a new method that i would be adding, so how do i make sure that im passing the unique panel id into the function?

[alex.capurro]

I have tried doing this:

$(function(){
         $('#pp').portal({
            border:false,
            fit:true
         });
         add();
         
         var panels = $("#pp").portal('getPanels');
            for(var i=0; i<panels.length; i++){
                panels.panel('options').onClose = function(){
                    removeWidget($(this)); //closed widget
                };
                panels.panel('options').onMaximize = function() {
                   expandWidget($(this));
                };
                panels.panel({tools: [{ 
                      iconCls:'icon-reload', 
                      handler:function(){
                         widgetRefresh($(this));
                         } 
                    }]});
            }
      });

Which works in the sense that it adds the icon and method to all the panels (i call them widgets) on my page, however $(this) is not the panel object, for some reason its referring to the 'icon-reload' class, where as on the other two functions above (onClose and onMaximise) it is referring to the panel object.

Any ideas?

[alex.capurro]

Actually, i have also noticed, that if i do that, the panel is no longer movable!? when i add an icon like that i can no longer drag the panel..

Basically all i want to do is add a refresh button to my panels so that it's contents can be refreshed.

Any ideas?

[tslatt]

I don't create my panels/widgets dynamically like you do, but here's my method for adding a refresh button. When I add the panel to the page, I also add the 'tools' div and set its action in an onclick instead of within the main jquery script. That way I can specify which panel id to refresh:

Code:

<div id="w020<%=DCode%>" class="easyui-panel pdiv" title="Test 20" collapsible="true" closable="true" maximizable="true" closed="true" collapsed="true" href="test-ajax-id.asp?id=<%=DCode%>" tools="#w020tools<%=DCode%>"></div>
<div id="w020tools<%=DCode%>"><a href="#" class="icon-refresh" onclick="javascript:$('#w020<%=DCode%>').panel('refresh', 'test-ajax-id.asp?id=<%=DCode%>');"></a></div>

I also had a problem where dragging suddenly stopped, after I upgraded to the latest version of easyUI. I don't know if my problem was caused by the same reason as yours. My problem was because I had upgraded the .js file, but forgot to include the latest updates to the css. After modifying the css to the latest version, dragging worked again.

[alex.capurro]

Hi tslatt,

thanks for the quick response, its good to know that there are active people on this forum

I literally just finished implementing the same solution as you suggested just before you replied! Its the only way i could get it to work because im adding the panels dynamically. Weird how the panels stop moving though if i do it the other way considering i have all of the latest code and css..well i think i do anyways!

Do you remember i posted a while back that when i move the panels the mouse loses focus? Well i have established that this only happens if i move the panels whilst they are opened (as in not collapsed) and only if they have big data in them, such as a datagrid or graph etc.

If the panels are collapsed i dont have this problem at all..im guessing its something to do with the contents. Do you think there is something i can do so that when i start moving a panel it automatically collapses? that way the panel being moved would always be collapsed and i would avoid the mouse pointer issue. I tried doing something with the onMove function (i.e. onMove = function() {     panel.collapsed = true };) but didn't seem to do anything..

[tslatt]

Setting collapsed to true won't actually collapse the panel. That's only used when first creating the panel. You'll need to do this to collapse an already existing panel:

$(this).panel("collapse");

or

$('#yourpanelid').panel("collapse");

I tried putting this in the onMove event and nothing happened, however. So, I tried putting alert("hi") in the onMove event, and that also didn't do anything. I think there may be a bug there... I don't think the onMove is firing at all!

[alex.capurro]

yeah my thoughts exactly, because i also tried putting an alert but it did nothing... Its the only way i can think of for collapsing the panel when someone starts moving them..

[tslatt]

I posted about the onMove not working in the bug reports forum. What we really need though, in addition to onMove actually working, is an onBeforeMove event. onMove is supposed to fire after the move, so it could not be used to collapse the panels before moving, but could be used to re-expand them after the move.

There might also be some way to use onBeforeDrag and onStopDrag to collapse/expand the panels when moving, but I'm not sure how just yet.

Let me know if you find another solution. I'm still working on the portal functionality, so I haven't added real data to my panels yet. I'm sure once I do, I'll have the same focus issue, as some of my panels will be holding a lot of data.

[tslatt]

stworthy posted a fix to the onMove problem in this post:

http://www.jeasyui.com/forum/index.php?topic=270.0

It also includes a fix for the focus issue, but I haven't been able to test to see if that worked or not, since I'm not far enough along on my portal yet to have large amounts of data in my panels. Could you let me know if it works for you?

[alex.capurro]

Hey tslatt, I just tried the solution that was posted in the other thread for moving the panels and it works perfectly!

Literally i just pasted the solution that was suggested in the thread without changing anything and it works right out of the box so to speak

Basically now when i move a panel the contents gets hidden (just like on google dashboard) so it means that you are not moving heavy contents around. And now the problems i had is gone.

See my two screenshots where you can see the panel being moved and then placed.