PDA

View Full Version : re-do layoutDialog after creation



PurpleNurple
2 Feb 2007, 8:00 PM
Hi, how does one modify a layout after it has been created and outside of the layoutDialog object? what i mean is i have defined a layoutDialog on my main page like so:



/*
objLayoutDialog is the main layout dialog object
*/
var objLayoutDialog = function(){

var dialog, showBtn;

// return a public interface
return {
init : function(){
var dlgEl = getEl('mkpDialog');
document.body.insertBefore(dlgEl.dom, document.body.firstChild);
},

showDialog : function(elm){
if(!dialog){ // lazy initialize the dialog and only create it once

showBtn = getEl(elm);
dialog = new YAHOO.ext.LayoutDialog("mkpDialog", {
modal:true,
width:600,
height:400,
shadow:true,
minWidth:300,
minHeight:300,
west: {
split:true,
initialSize: 150,
minSize: 100,
maxSize: 250,
titlebar: true,
collapsible: true,
animate: true
},
center: {
autoScroll:true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: true
}
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Close', dialog.hide, dialog);

var layout = dialog.getLayout();
dialog.beginUpdate();
layout.add('west', new YAHOO.ext.ContentPanel('west', {title: 'Menu'}));
layout.add('center', new YAHOO.ext.ContentPanel('center', {title: 'Content'}));
layout.add('center', new YAHOO.ext.ContentPanel('center2', {title: 'Content2', closable: true}));
dialog.endUpdate();
}
dialog.show(showBtn.dom);
}
};
}();

YAHOO.ext.EventManager.onDocumentReady(objLayoutDialog.init, objLayoutDialog, true);


the goal is to have this just be a blank placeholder dialog element

then i have a page which comes in via ajax and needs to alter the layout before changing it (i know this is not right, but i don't see any examples covering this and i am still too much of a noob to get this from the docs, it's just not making sense to me




<script language="javascript">
layout = objLayoutDialog.getLayout();
objLayoutDialog.beginUpdate();
layout.add('center', new YAHOO.ext.ContentPanel('center2', {title: 'Content2'}));
objLayoutDialog.endUpdate();
</script>

<input type="button" id="show-dialog-btn" value="Show Dialog" onClick="objLayoutDialog.showDialog(this.id)" />


how do i get the layout object on my second page for modifying it? ( in this example i just want to add another tab, but i might want to re-draw the whole thing depending on the content i'm bringing back

namespace
5 Feb 2007, 7:00 AM
Are you trying to execute javascript from an XHR call? If so, that won't work.
You'll need to eval() the javascript you slurp in through XHR or have that script on your calling page.

Other than that, your object was (seemingly) global in scope so it should be available throughout that page.

Animal
5 Feb 2007, 7:09 AM
The UpdateManager evals scripts for you if you ask it to. See documentation.

You should use DialogManager to get access to your LayoutDialog, and get the layout from that.