EasyUI Forum
March 28, 2024, 09:59:39 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Portal Panel on top of other programmatically created panel  (Read 7008 times)
Alfred
Full Member
***
Posts: 134


-Licensed User-


View Profile
« on: November 28, 2017, 06:45:15 AM »

I have the following code to create panel on the fly. Now I want to create panels on top of others. The following code replaces the existing panel.

Code:
<script type="text/javascript">
$(function(){
   $('#pp').portal({
border:false,
fit:true
    });
addpanel('dashboard', 'DASHBOARD');
});
function addpanel(link, title){
op = true;
remove();
var p = $('<div id="pgrid"><div/>').appendTo('body');
if(link=='dashboard'){ // Dashboard will not be closable
      op = false;
}else{
    op= true;
}
p.panel({
title:title,
                href: 'views/'+link+'.php',
height:'750',
closable:op,
maximizable:true,
onClose:function(){
if(link!='dashboard'){
add('dashboard', 'DASHBOARD');
}
},
onMaximize: function(){
   var opts = $(this).panel('options');
   var p = $(this).panel('panel');
   opts.fit = false;
   opts.stub = $('<div></div>').insertAfter(p);
   p.appendTo('body').css('position','').addClass('max');
$(this).panel('resize', {
width: $(window).width(),
height: $(window).height()
  });
},
onRestore: function(){
   var opts = $(this).panel('options');
   var p = $(this).panel('panel');
   p.insertAfter(opts.stub).removeClass('max');
   opts.stub.remove();
   p.parent().removeClass('panel-noscroll');
}
    });
   $('#pp').portal('add', {
panel:p,
columnIndex:1
   });
   $('#pp').portal('resize');
}
function remove(){
$('#pp').portal('remove',$('#pgrid'));
$('#pp').portal('resize');
}
</script>
<div id="pp" region="center">
<div style="width:15%; padding: 2px;">
<div title="User Profile" iconCls="icon-man" align="center"
                   closable="false" style="padding:4px;" href="navigation/profile.php">
                 </div>
</div>
<div style="width:85%; padding: 2px;">
<div id="pgrid" closable="true" maximizable="true"></div>
</div>
</div>
When I add a panel using
Code:
addpanel('link', 'Linkname')
, it remove the panel using the
Code:
remove()
function. But instead of removing the panel I want to add the panel on top of the existing one. So I removed the
Code:
remove()
function. But the
Code:
remove
function appends the panel below the existing one. I want the new panel to be on top of the existing with the same position but higher z-index while the existing panel will be disabled until the top one is closed. Your help will be highly appreciated.
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 on: November 29, 2017, 05:00:12 PM »

A possible way to solve this issue may be to hide the previous panel instead of placing a panel on the existing panel. When add a new panel, find the previous panel and hide it.
Logged
Alfred
Full Member
***
Posts: 134


-Licensed User-


View Profile
« Reply #2 on: November 29, 2017, 09:43:40 PM »

Thanks stworthy,

That is what I am thinking now. You enlightened it. But as completely a newbie, I have no idea. Actually I was thinking about minimizing the panel once the new panel is added and open the minimized panel once the current panel is closed. I wonder if you could give me a sample code to work on; like hiding the previous panel once a panel is added and open the hidden panel when the current panel is closed. Thank you.
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #3 on: November 30, 2017, 06:12:13 PM »

Here is the simple code that shows how to hide the previous panel when open a new panel.
Code:
$('#pp').portal('add', {
panel:p,
columnIndex:1
});

$.extend(p.panel('options'), {
onOpen: function(){
var prevPanel = $(this).parent().prev().children('.panel-body');
prevPanel.panel('close');
},
onClose: function(){
var panels = $('#pp').portal('getPanels', 1);
if ($(panels[panels.length-1])[0] == this){
    var prevPanel = $(this).parent().prev();
prevPanel.children('.panel-body').panel('open');
$(this).panel('destroy');
}
}
});
p.panel('open');
Logged
Alfred
Full Member
***
Posts: 134


-Licensed User-


View Profile
« Reply #4 on: December 04, 2017, 02:14:01 AM »

Thank you very much. This works perfectly.
Logged
Alfred
Full Member
***
Posts: 134


-Licensed User-


View Profile
« Reply #5 on: December 05, 2017, 01:08:49 AM »

It works perfectly well until I faced this problem. If we reopen the panel which is previously hidden from the function mentioned below here, there is a problem in the content. It appends the content. I want to use the function add(link,title); to open the panel. If the panel I am trying to open using the function is already existed (hidden or open), I want to show it if it is hidden and do nothing if it is open.
Code:
add(link, title){
  //other code
};

This is what I tried which appends the content:

Code:
if(p.panel('exists', title)){
            p.panel('select', title);
        }else{
            p.panel('open');   
        }

Your support is amazing. Please help me.

Thanks
« Last Edit: December 05, 2017, 01:17:47 AM by dove » Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!