Print Page - Portal Panel on top of other programmatically created panel

Title: Portal Panel on top of other programmatically created panel
Post by: Alfred 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.

Title: Re: Portal Panel on top of other programmatically created panel
Post by: stworthy 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.

Title: Re: Portal Panel on top of other programmatically created panel
Post by: Alfred 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.

Title: Re: Portal Panel on top of other programmatically created panel
Post by: stworthy 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');

Title: Re: Portal Panel on top of other programmatically created panel
Post by: Alfred on December 04, 2017, 02:14:01 AM

Thank you very much. This works perfectly.

Title: Re: Portal Panel on top of other programmatically created panel
Post by: Alfred 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

EasyUI Forum

General Category => General Discussion => Topic started by: Alfred on November 28, 2017, 06:45:15 AM