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
/*
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