Print Page - How to pass individual parameters to a function from a panel

Title: How to pass individual parameters to a function from a panel
Post by: alex.capurro on January 10, 2012, 04:02:56 AM

Hi guys,

Im adding panels onto my panel by looping through an array that i have that contains panel objects and i have a bit of code that does this inside the loop:

Quote

p.panel({
               title:widgetDetails.title,
               content:'<div style="padding:5px;" collapsible="true" id="'+widgetDetails.id+'"><iframe width="100%" height="100%" frameborder="0" src="widgets/'+widgetDetails.filename+'"></iframe></div>',
               height:widgetDetails.height,
               closable:true,
               collapsible:true,
               collapsed:widgetDetails.collapsed,
               maximizable:widgetDetails.maximizable,
               onMaximize:function(msg){
                  alert(widgetDetails.externalApp);
        }
            });

$('#pp').portal('add', {
               panel:p,
               columnIndex:widgetDetails.columnIndex
            });

This is all working fine, however where i have the onMaximize function, the parameter that i am passing in (widgetDetails.externalApp) is always equal to the last widget. So for example, if i have 3 widgets and the externalApp values are equal to 1, 2, 3 respectively then when ever i click on the maximize button on any of the panels i always see an alert saying '3'. What would i have to do so that if i click on the expand button on the first panel i see an alert saying '1' and an alert saying '2' if i expand the second panel etc?

I assumed that by doing the above code, i was assigning the maximise function to the panel currently found in the loop, instead it seems to be doing it for all panels. Is there a way around this?

Thanks

Title: Re: How to pass individual parameters to a function from a panel
Post by: tslatt on January 10, 2012, 07:57:16 AM

Although you are setting up the onMaximize event within a loop, the onMaximize event calls a standalone function. Treat everything between its { } brackets separately. When it accesses the value of widgetDetails.externalApp, it's getting what that equals at the moment the panel is maximized, not what it equaled while within the loop. That's why you only ever get the last value.

You can access the panel that is being maximized within the onMaximize function using $(this). For example, here's what I do to get the id of which panel is being maximized:

onMaximize event setup:

Code:

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

function called when maximized:

Code:

function maximizePortalWidget(pobj) {
   var wID = $(pobj).attr("id"); //get id of the widget to maximize
   ...
}

my panel setup where I give it an id:

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>

Title: Re: How to pass individual parameters to a function from a panel
Post by: alex.capurro on January 10, 2012, 09:16:22 AM

Thanks!!

As usual that did the trick :)

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: alex.capurro on January 10, 2012, 04:02:56 AM