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...)
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.
<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.phpAlthough, 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.
