Panel height gets buggy on restore after it has been maximized. Please help!

[tslatt]

I am having an issue with the height of panels that are maximized/restored in the portal layout.

I am using the portal layout. My panels do not have a fixed height. Their height is 'auto'. When I maximize a panel in the portal, I make it full screen and hide all of the other panels. I give the user 2 ways to restore the portal to its previous state: (1) click the restore icon on the panel itself, and (2) click a link on the page that says "restore portal state". Clicking either one does the following actions:

- sets the 'maximized' property to false for the maximized panel
- re-shows all the items that were hidden
- calls the portal resize action so that the widths/heights are restored
- sets the previously maximized panel's height to 'auto' (otherwise it doesn't reset to auto like it should with the resize action)

Both options to restore the portal seem to work correctly. Everything goes back to where it should be, has the correct widths/heights, and the 'restore' icon on the previously maximized panel switches back to a 'maximize' icon.

However, if option (2) was used -- the 'restore' link -- when I click on any panel in the portal, the previously maximized panel's height increases. If I click again, it grows more, and so on and so on.

How can I stop the previously maximized panel's height from doing this? Any help would be greatly appreciated.

My functions are below:

Code:

//a currently maximized widget (there can be only one)
var wMaximized = "none";
//end a currently maximized widget (there can be only one)

//add events to all widgets
$(".easyui-panel").each(function(index) {//for all widgets
  $(this).panel({//for this widget

  	onMaximize: function() {//do this on widget maximize
  		maximizePortalWidget($(this)); //maximize chosen widget and hide others
  	},//end on widget maximize

  	onRestore: function() {//do this on widget restore (unmaximized)
  		restorePortalWidgets(); //restore portal to pre-maximized state
  	}//end on widget restore (unmaximized)

  });//end for this widget
});//end for all widgets
//end add events to all widgets

//maximize a widget by making it the only visible widget in a 1-col portal
function maximizePortalWidget(pobj) {
	//get id of the widget
	var wID = $(pobj).attr("id");
	//set the global variable
	wMaximized = wID;
	//get which column this widget is in
	var cID = 0;
	if ($(pobj).parent().parent().hasClass("colC")) { cID = 2; } //col C
	if ($(pobj).parent().parent().hasClass("colB")) { cID = 1; } //col B
	if ($(pobj).parent().parent().hasClass("colA")) { cID = 0; } //col A
	//on maximize
	//give all widgets & columns a class called 'minimized' that hides them
	$(".portal-panel").addClass("minimized");			//hide widgets
	$(".portal-column-td").addClass("minimized");	//hide columns
	//remove that class from this widget & column and add maximized class
	$("#" + wID).parent().removeClass("minimized").addClass("maximizedW");	//show this widget, mark it as maximized
	$(".portal-column-td").eq(cID).removeClass("minimized").addClass("maximizedC");	//show this column, mark it as maximized
	//calculate full-size widths for widget & column
	var pageWidth = $(".page-width").width();	//get user's chosen page width: "98%" or "960px"
	var fullWidthPortalColumn, fullWidthWidgetHeader, fullWidthWidgetBody, CalcNum;
	CalcNum = pageWidth - 23;	//col width = width of the page minus the padding around the portal
	fullWidthPortalColumn = "" + CalcNum + "px";	//column width
	CalcNum = CalcNum - 2; 		//widget body = col width - widget border
	fullWidthWidgetBody 	= "" + CalcNum + "px";
	CalcNum = CalcNum - 10;		//widget header = widget body width - header padding
	fullWidthWidgetHeader = "" + CalcNum + "px";
	//set full-size widths on widget & column
	$(".maximizedC .portal-column").css("width", fullWidthPortalColumn);	//column div
	$(".maximizedW").css("width", fullWidthPortalColumn); 								//widget div
	$(".maximizedW .panel-header").css("width", fullWidthWidgetHeader);		//widget header
	$(".maximizedW .panel-body").css("width", fullWidthWidgetBody); 			//widget body
	//maintain auto height (undo easyUI bug that alters the widget's height)
	$(".maximizedW .panel-body").css("height", "auto"); 			//widget body
	//disable dragging on this panel, so it doesn't get dragged to a hidden column
	$("#" + wID).panel('panel').draggable('disable');
	//adjust the links in the top bar, since portal options aren't allowed while a widget is maximized
	$("#portal-options").addClass("minimized"); //hide the portal options link
	$("#restore-portal").removeClass("minimized"); //show the restore portal link
}//end maximize a widget

//restore the state of the portal to what it was before the widget was maximized
function restorePortalWidgets() {
	//on restore
	var wasMaximized = wMaximized; //save which widget was maximized
	$("#" + wMaximized).panel({ maximized: false });//unmaximize that widget
	//ensable dragging on the previously maximized panel
	$("#" + wMaximized).panel('panel').draggable('enable');
	//set the global variable
	wMaximized = "none";
	//remove the class 'minimized' & 'maximizedW' from all widgets
	$(".portal-panel").removeClass("minimized");
	$(".portal-panel").removeClass("maximizedW");
	//remove the class 'minimized' & 'maximizedC' from all columns
	$(".portal-column-td").removeClass("minimized");
	$(".portal-column-td").removeClass("maximizedC");
	//then resize the portal to reset the column/widget widths
	$('.aportal').each(function() {//for each portal
  	$(this).portal('resize', { width: "100%", height: "100%" }); //resize the portal
  	//note: this doesn't really do anything unless the page width is % instead of px
	});//end for each portal
	$("#" + wasMaximized).css("height", "auto" );//fix that widget's height (easyui bug)
	$("#portal-options").removeClass("minimized"); //show the portal options link
	$("#restore-portal").addClass("minimized"); //hide the restore portal link
}//end restore the portal state

//when the user clicks 'Restore Portal Widgets', which is only visible when a widget is maximized
$("#restore-portal").click(function(){//when 'Save and Log Off' is clicked
	restorePortalWidgets(); //restore the portal state
});//end when 'Save and Log Off' is clicked

[stworthy]

Another way is to maximize the portal panel directly. Below is some test code:

Code:

var container;	// the portal container
container = $('#pp');
var panels = $("#pp").portal('getPanels',0);
for(var i=0; i<panels.length; i++){
	panels[i].panel('options').onMaximize = function(){
		maximizePortalWidget($(this)); //maximize chosen widget
	};
	panels[i].panel('options').onRestore = function(){
		restorePortalWidgets($(this));	//restore portal to pre-maximized state
	}
}

function maximizePortalWidget(pobj){
	pobj.css('background-color','#fff');
	container.css('overflow','hidden');
	var p = pobj.panel('panel');	// get the outer panel object
	// insert a stub object that will remember the panel position
	$('<div class="portal-stub"></div>').css('display','none').insertAfter(p);
	p.appendTo(container).css({
		position:'absolute',
		width:container.width(),
		height:container.height()
	});
	p.draggable('disable');	// disable the draggable feature
	pobj.panel('resize');
}
function restorePortalWidgets(pobj){
	container.css('overflow','auto');
	var stub = $('#pp').find('div.portal-stub');
	var p = pobj.panel('panel');
	p.css('position','');	// restore the old position style
	p.insertAfter(stub);
	p.draggable('enable');	// enable the draggable feature
	stub.remove();
	pobj.panel('resize');
}

[tslatt]

Thank you for the reply. However, it didn't work as expected, or quite how I need it to. Here's what happened:

On Maximize:

Using your code, the maximized panel filled the width and height of the portal as expected, and because it was absolutely positioned, it covered up the other panels, so you couldn't see them. However, it didn't retain the margins I have on panels, so it expanded too big. Also, I'd rather have the height set to 'auto' so the panel doesn't get stretched taller than necessary. My portal may potentially be very tall and it just looks funny having a maximized panel stretched 10x longer than it needs to be, just so that it will hide the other panels. Also, if I resize my browser, the width of the maximized panel did not resize with it, as it did in my implementation.

On Restore:

The restored panel did shrink back down to its original width and height, which is good, but it did not return to its original position. No matter where the panel was originally within the portal, on restore it positioned itself below all of the other panels, aligned to the left side of the portal, and without its margins, that placed it farther left than the other panels. Also, the secondary link mentioned in my original post, did not function at all with this code.

I have attached an image showing the results.



I really appreciate your help on this, and your alternate solution. I think I'd like to stay with my original solution, however, and just find a way to fix the height bug on restore.

Also, I've been working on this and have noticed another odd behavior. In addition to the height bug that was making the restored panel grow in height on every click of any panel, I'm having a width issue. For some panels, when I maximize them, even though their maximized width can fit within the space without a horizontal scrollbar, it adds one anyway. Then, when I restore that panel, the panel returns to its previous width, but the content inside it stays stretched out at the maximized width.

Do you have any idea what could be causing these width/height issues? And how can I set the width and height to auto? I am using the following code, but given the results, I was wondering if I am doing it wrong:

$("#thispanelsid").css("height", "auto" );

I am really thankful for any help anyone can provide!

[tslatt]

I fixed the problem with the ever-expanding panel height when a maximized panel is restored by a link rather than the button on the panel itself. My link was doing this:

Code:

$("#restore-portal").click(function(){
    restorePortalWidgets();
});

When it should have done this:

Code:

$("#restore-portal").click(function(){
    $("#" + wMaximized).panel('restore');
});

restorePortalWidgets() would set maximized to false, but that wasn't enough, the 'restore' action had to be called.



I am still working on figuring out why the content widths aren't correct on maximized/restored panels.

[tslatt]

I think I have it working now. My solution is below:

Code:

//a currently maximized widget (there can be only one)
var wMaximized = "none";
//end a currently maximized widget (there can be only one)

//add events to all widgets
$(".easyui-panel").each(function(index) {//for all widgets
  $(this).panel({//for this widget
  	onMaximize: function() {//do this on widget maximize
  		maximizePortalWidget($(this)); //maximize chosen widget and hide others
  	},//end on widget maximize
  	onRestore: function() {//do this on widget restore (unmaximized)
  		restorePortalWidgets(); //restore portal to pre-maximized state
  	}//end on widget restore (unmaximized)
  });//end for this widget
});//end for all widgets
//end add events to all widgets

//when the user clicks 'Restore Portal Widgets', which is only visible when a widget is maximized
$("#restore-portal").click(function(){//when 'restore portal' is clicked
	$("#" + wMaximized).panel('restore'); //restore the maximized widget, which will then call restorePortalWidgets()
});//end when 'restore portal' is clicked

//maximize a widget by making it the only visible widget in a 1-col portal
function maximizePortalWidget(pobj) {
	//get id of the widget to maximize
	var wID = $(pobj).attr("id");
	//set the global variable to remember which widget is currently maximized
	wMaximized = wID;
	//get which column this widget is in
	var cID = 0;
	if ($(pobj).parent().parent().hasClass("colC")) { cID = 2; } //col C
	if ($(pobj).parent().parent().hasClass("colB")) { cID = 1; } //col B
	if ($(pobj).parent().parent().hasClass("colA")) { cID = 0; } //col A
	//give all widgets & columns a class called 'minimized' that hides them
	$(".portal-panel").addClass("minimized"); //hide widgets
	$(".portal-column-td").addClass("minimized"); //hide columns
	//remove that class from this widget & column and add 'maximized' class
	$("#" + wID).parent().removeClass("minimized").addClass("maximizedW"); //show this widget, mark it as maximized
	$(".portal-column-td").eq(cID).removeClass("minimized").addClass("maximizedC"); //show this column, mark it as maximized
	//calculate full-size widths for widget & column
	var pageWidth = $(".page-width").width(); //get the width of the page (the div the portal is nested in)
	var fullWidthPortalColumn, fullWidthWidgetHeader, fullWidthWidgetBody, CalcNum;
	CalcNum = pageWidth - 23;	//col width = width of the page minus the padding around the portal (10px padding on left + 13px padding on right)
	fullWidthPortalColumn = "" + CalcNum + "px"; //column width
	CalcNum = CalcNum - 2; //widget body = col width - widget border (1px border x 2)
	fullWidthWidgetBody 	= "" + CalcNum + "px";
	CalcNum = CalcNum - 10; //widget header = widget body width - header padding (5px padding x 2)
	fullWidthWidgetHeader = "" + CalcNum + "px";
	//set full-size widths on widget & column
	$(".maximizedC .portal-column").css("width", fullWidthPortalColumn); //column div width
	$(".maximizedW").css("width", fullWidthPortalColumn); //widget div width
	$(".maximizedW .panel-header").css("width", fullWidthWidgetHeader); //widget header width
	$(".maximizedW .panel-body").css("width", fullWidthWidgetBody); //widget body width
	//remove scrollbars that appear when not needed
	$(".maximizedW .panel-body").css("overflow", "hidden"); //widget body overflow 
	//maintain auto height (undo easyUI "feature" that increases the widget's height on maximize)
	$(".maximizedW .panel-body").css("height", "auto"); //widget body height
	//disable dragging on this panel, so it doesn't get dragged to a hidden column
	$("#" + wID).panel('panel').draggable('disable');
	//adjust the links in the top bar, since portal options aren't allowed while a widget is maximized
	$("#portal-options").addClass("minimized"); //hide the portal options link
	$("#restore-portal").removeClass("minimized"); //show the restore portal link
	//then resize the portal to adjust the column/widget widths (because accordian content appears cut off otherwise)
	$('.aportal').each(function() {//for each portal
  	$(this).portal('resize', { width: "100%", height: "100%" }); //resize the portal
	});//end for each portal
}//end maximize a widget

//restore the state of the portal to what it was before the widget was maximized
function restorePortalWidgets() {
	var wasMaximized = wMaximized; //save which widget was maximized
	$("#" + wMaximized).panel({ maximized: false }); //unmaximize that widget (reset its icon)
	//re-enable dragging on the previously maximized panel
	$("#" + wMaximized).panel('panel').draggable('enable');
	//set the global variable to remember which widget is currently maximized (none)
	wMaximized = "none";
	//undo adjustments we made to widths
	//no need to undo column width, resize will do that
	$(".maximizedW").css("width", "auto"); //widget div width
	$(".maximizedW .panel-header").css("width", "auto"); //widget header width
	$(".maximizedW .panel-body").css("width", "auto"); //widget body width
	//undo adjustment made to scrollbars
	$(".maximizedW .panel-body").css("overflow", "auto"); //widget body - reset scrollbars to appear as needed			
	//remove the class 'minimized' from the static widget area
	//$("#s1col").removeClass("minimized");
	//remove the class 'minimized' & 'maximizedW' from all widgets
	$(".portal-panel").removeClass("minimized");
	$(".portal-panel").removeClass("maximizedW");
	//remove the class 'minimized' & 'maximizedC' from all columns
	$(".portal-column-td").removeClass("minimized");
	$(".portal-column-td").removeClass("maximizedC");
	//then resize the portal to finish resetting the column/widget widths
	$('.aportal').each(function() {//for each portal
  	$(this).portal('resize', { width: "100%", height: "100%" }); //resize the portal
	});//end for each portal
	$("#" + wasMaximized).css("height", "auto" ); //fix that widget's height, otherwise it's taller than it should be
	$("#portal-options").removeClass("minimized");	//show the portal options link
	$("#restore-portal").addClass("minimized"); //hide the restore portal link
}//end restore the portal state

[alex.capurro]

Hi tslatt,

did you ever get this work correctly?

I believe im doing similar to you and i have managed to do all of the following very simply:

1. I load a list of 'panels' from the database using a rest service call that returns a json array of panels.
2. I loop through this list and populate a drop down with the available panels.
3. I then loop through another list that tells me the panels (including their state -collapsed or opened as well as their position and order) that each specific user has and i populate the portal dynamically assigning each panel its unique attributes including its id's.
4. User's can then add and remove panels from the portal view and save their portal layout.
5. I also noticed that when you close a panel, it does not actually get destroyed from the portal unless you specifically call the remove method for the portal.

There are only two things which i am having problems with.
1. I would love to have a maximise option for the panels. I have looked at your code but i cant see how/where you added the expand button to the panel. Where in the code did you do that and how do you assign that button the functions you created for maximise?

2. Have you noticed that when you drag a panel, if you move the mouse very quickly the mouse can leave the panel header which means that the panel stays halfway through a movement. Ok this is a little hard to explain..imagine you have two panels, one on top of the other. The one on top has a grid. If you start dragging the bottom one to position it on top of the first one, but move the mouse quickly, your mouse actually leaves the bottom panel's header and you end up on the grid (as in you lose focus of the bottom panel that you where moving), which means that the bottom panel stays half moved. Know what i mean? Have you seen this issue?

By the way, it seems like we are both working on similar portals, im happy to show you my solutions for saving/loading etc if you want. They appear to be much cleaner and simple than many solutions and suggestions that i have found on line.

[tslatt]

Alex.capurro,

Yes, I did get it working correctly. However, I am in the middle of redoing large portions of my portal, and I'm likely to make some changes to how I implemented maximizing/restoring. I decided to redo my portal so that I could make things more dynamic and because this has been a learning process for me and I've found better ways to implement some of the functionality.

To answer your questions:

1. Adding the maximize/restore button is one of the built-in function of the panels, like the close button. To get it to appear, you just have to set maximizable to true when creating the panel:

Code:

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

Use onMaximize and onRestore as shown in the above post to assign functions to the maximize/restore button.

2. I have not noticed the behavior you describe. I tried dragging the panels quickly, but was unable to replicate the effect. If you haven't already, I suggest upgrading to the latest version of easyUI and the latest version of the portal extension. Maybe it will help.

I would absolutely love to see your portal solution. Since I am redoing mine, I'm not very far along in my code yet, but I would be willing to share in kind.

[alex.capurro]

Hi tslatt,

sorry for the late reply, I was away during the holidays. In the end I have decided not to maximise the panels. Although i was able to get the maximise icons to appear (thanks for your help!!) the code for actually maximising them seems far more messy and complex than the benefits im actually going to get from maximising a panel. So i have decided to go for more of a google dashboard look and feel.

Basically what i do is the following:

1. First of all my backend sends me 3 lists, one of them is the list of panels (i call them widgets by the way) that the user has saved on the portal, this list contains all the widget details (name, id, position in the portal, columnId if they are collapsed or not..), then the second list contains the list of widgets that are available to the user. Basically this list is used to populate a drop down that i have so the user can add more widgets to the portal. This list does not contain the widgets contained in the first list obviously. Finally the third list contains the full list of available widgets, this list i simply use as reference to make sure i never lose track of all the widgets available.

2. I then loop through the first list and populate the portal with the widgets saved by the user doing something like this:

//here we loop through the list of saved widgets for the user and display them on the portal
         for (var i=0; i<mySavedWidgets.length; i++) {
            widgetDetails = mySavedWidgets;
            var p = $('<div/>').appendTo('body');
            p.panel({
               title:widgetDetails.title,
               content:'<div style="padding:5px;" collapsible="true" id="'+widgetDetails.id+'">YOUR CONTENT HERE</div>',
               height:widgetDetails.height,
               closable:true,
               collapsible:true,
               collapsed:widgetDetails.collapsed
            });
            $('#pp').portal('add', {
               panel:p,
               columnIndex:widgetDetails.columnIndex
            });
         }
         $('#pp').portal('resize');

As you can see my array contains a list of widget objects that contain all the details i need. These objects are persisted in my DB. After i do that i then populate the drop down list in the same way.

3. Once the user changes the position of the widgets, collapses some of them, adds/removes etc he can save the new layout. The save function looks something like this:

for (var x=0; x<3; x++) {
         //loop through the columns first
         var widgetsInColumn = $("#pp").portal('getPanels',x);
         
         for (var i=0; i<widgetsInColumn.length; i++) {
            var widgetDetails = new Object();
            panel:p = widgetsInColumn;
            if (p != null && p != "") {
               //first try and get the id from the top
               var widgetId = p.context.id;
            
               if (widgetId == "" || widgetId == "undefined") {
                  //if its null, then get it from the inner context
                  widgetId = p.context.lastChild.id;
               }
               //now lets see if the widget was collapsed
               var collapsed = 0;
               if (p.context.style.display == "none") {
                  //the widget was collapsed
                  collapsed = 1;
               }
               
               widgetDetails.id = widgetId;
               widgetDetails.position = i;
               widgetDetails.collapsed = collapsed;
               widgetDetails.columnIndex = x;
               
               myWidgets.push(widgetDetails);
            }
         }
      }

Pretty simple really.

And finally, when the user adds a new widget form the widget drop down i basically use the same method of adding a widget as the first example above, but i first calculate which is the column with the least widgets. Once i know the answer i place the widget in the correct column (the one with the least widgets already). This is very simple and all you have to do is loop through each column and count the number of widgets using the portal('getPanels') method.

I hope this helps. All thats missing is the calls to and from the back end (im using JAVA, but that should not matter since the portal javascript code should be the same regardless of your backend).

Let me know if you do manage to find a simple and clean solution for the maximise and minimise problem. Until then im going to ignore that functionality as i dont see a real benefit when compared to the amount of work arounds required.

By the way, on the Jeasy site the documentation for the portal layout extension is very very limited, did you find documentation somewhere else?

[tslatt]

That is almost completely different from how I am doing things. Much simpler, too, although most of the complexity in my code comes from the fact that I have an unlimited number of portals that are dynamically added to the page, each in their own tab. There are 13 types of portals, where for 10 of them, only one is allowed on the page at a time, but for the other 3 types of portals, any number of them can be added. By 'type' of portal, I mean that each type of portal has a specific set of panels it's allowed to have. For the 3 types of portals that I allow multiples of, although each instance of that type of portal has the same set of panels in it, those panels show different information, based on an id that's sent. Those panels basically show a particular person's information, for the person whose id is sent in. For the other 10 types of portals, the content is always the same, so there's no reason to let the user open multiple instances of those. Make sense?

Instead of your 3 lists for one portal, I just have one object for each portal that contains all of the panels and their details. The object contains the list of all possible panels for that portal.

My object: (not the real data yet, and only has 3 portals, not all 13 yet...)

Code:

var wCurrent = {//this is an object containing saved portal properties
  "testAPortal":{ //id of this types of portal
    "w001":{"wclosed":false,"wcollapsed":true,"pcol":0},//panel id, whether closed, whether collapsed, which column
    "w002":{"wclosed":false,"wcollapsed":true,"pcol":1},
    "w003":{"wclosed":false,"wcollapsed":true,"pcol":2}
  },//panels are listed in the order they are on the page, to maintain the order within columns
  "testBPortal":{
    "w004":{"wclosed":false,"wcollapsed":true,"pcol":0},
    "w005":{"wclosed":false,"wcollapsed":true,"pcol":1},
    "w006":{"wclosed":false,"wcollapsed":true,"pcol":2}
  },
  "testCPortal":{
    "w010":{"wclosed":false,"wcollapsed":true,"pcol":0},
    "w011":{"wclosed":false,"wcollapsed":true,"pcol":1},
    "w012":{"wclosed":false,"wcollapsed":true,"pcol":2}
  }
}

I handle whether the user is allowed to see certain panels separately. Instead of loading the panels dynamically onto the page and then inserting them into the portal like you do, I have the panels statically loaded into a staging div (hidden) and then I insert them into the portal if they exist. I have asp code around each panel within the staging div that includes the panel there only if the user is allowed to have them. That way, if that panel is forbidden, it doesn't exist and doesn't get added to the portal.

Code:

<div class="staging"><!-- begin panels staging area -->
  <% if true then %>
    <div id="w004" class="easyui-panel pdiv" title="Test 4" collapsible="true" closable="true" maximizable="true" closed="true" collapsed="true" href="test-ajax.asp"></div>
  <% end if %>
  <% if true then %>
    <div id="w005" class="easyui-panel pdiv" title="Test 5" collapsible="true" closable="true" maximizable="true" closed="true" collapsed="true" href="test-namepoc.asp"></div>
  <% end if %>
  <% if true then %>
    <div id="w006" class="easyui-panel pdiv" title="Test 6" collapsible="true" closable="true" maximizable="true" closed="true" collapsed="true" href="test-namerefreshpoc.asp" tools="#w006tools"></div>
    <div id="w006tools"><a href="#" class="icon-refresh" onclick="javascript:$('#w006').panel('refresh', 'test-namerefreshpoc.asp');"></a></div>
  <% end if %>
</div><!-- end staging area -->

On letting the user add more panels to the portal, if any of the available panels are currently closed, I include a (+) button in the menu. The user can click that to show a form. The form contains a list of all closed panels, and they click which ones they want to add. Submitting the form opens those panels. Instead of having two lists like you do, I just have a 'closed' variable in my one list that makes the distinction between what's currently shown vs what's available.

My solution for saving the panels is to have a 'default configuration' (the object shown above). For each 'type' of portal, the user can click 'save' and it will save that portal's current configuration (column, open/closed, collapsed/expanded, ...) as the default configuration. Next time the user logs in, or next time they load a portal of that type, its panels will be initially arranged in the saved default configuration. If they make adjustments to the configuration, but don't click save, those adjustments are lost.


To answer your question, the only documentation I found is here: http://www.jeasyui.com/extension/portal.php

Although, since the jquery for the portal isn't obscured like the rest of easyUI, just reading the code is good place to go to try to understand it better.

[alex.capurro]

Makes sense. The only real difference is that im dealing with lists that already contain and are sorted specific to each user on the client side, where are you seem to be doing that logic on the server side with ASP. Same thing really only im using JAVA instead. I do use ASP for other projects though, quite like it

Yes you are right, everything i have learnt has been from looking at the code since the documentation is really null

I'm still having the problem that i mentioned in another thread though, where if i drag a panel very quickly my mouse looses focus of the panel im dragging and it ends up on another panel..very annoying. I wonder if its a MAC issue though (since im currently coding on a MAC), will have to test on a PC.