Open Dialog makes nestedlayout disappear

[dsorre]

Hi guys!

I love what you've done with the EXT JS library!

I'm currently working on a problem that has me scratching my head for a while now and I'd like to ask for help and see if anybody has encountered this before or knows what I'm doing wrong...

The following is my code that creates a dialog box, and if I call it from a grid there is no problem at all, but on a different page I'm calling the same function (showDialog) and this is where my nestedlayout disappears.


var OptionWindowLayout = function(){
// everything in this space is private and only accessible in the HelloWorld block

// define some private variables
var dialog;

// return a public interface
return {
init : function(){


},

showDialog : function(Title, Asset_ID){
if(dialog == null){ // lazy initialize the dialog and only create it once
dialog = new Ext.LayoutDialog("OptionWindow", {
autoCreate: true,
modal:true,
width:400,
height:300,
shadow:true,
minWidth:300,
minHeight:300,
proxyDrag: true,
resizable: false,
west: {
split:true,
initialSize: 225,
minSize: 200,
maxSize: 250,
titlebar: true,
collapsible: true,
animate: true
},
center: {
autoScroll:false
}
});
dialog.addKeyListener(27, dialog.hide, dialog);
}
var layout = dialog.getLayout();
layout.beginUpdate();
layout.add('west', new Ext.ContentPanel('west', {title: 'Preview', fitToFrame:true}));
var innerLayout = new Ext.BorderLayout('center', {
center: {
minSize:150,
initialSize: 300,
maxSize: 350,
titlebar: true,
collapsible: false,
animate: true
},
south: {
titlebar: false,
collapsible: false,
animate: true,
initialSize: 100,
maxSize: 200,
minSize: 100
}
});
innerLayout.add('center', new Ext.ContentPanel('AssetDetails',{title:'File Info', fitToFrame:true}));
innerLayout.add('south', new Ext.ContentPanel('ActionIcons',{fitToFrame:true}));
layout.add('center', new Ext.NestedLayoutPanel(innerLayout,{fitToFrame:true}));
layout.endUpdate();

var previewcontent = Ext.get('west');
previewcontent.load({
url: ['/Circuits/Search/dsp_AssetPreview.cfm'],
params: 'Asset_ID='+Asset_ID,
text: 'Generating Preview...',
discardUrl:true
});
previewcontent.show();

var assetdetails = Ext.get('AssetDetails');
assetdetails.load({
url: ['/Templates/dsp_CartIcons.cfm'],
text: 'Retrieving File Information',
discardUrl:true
});
assetdetails.show();

var actionicons = Ext.get('ActionIcons');
actionicons.load({
url: ['/Common/ColdFusion/dsp_OptionsWindowIcons.cfm'],
params: 'Asset_ID='+Asset_ID,
text: '',
discardUrl:true
});
actionicons.show();

dialog.setTitle(Title);
dialog.show();
}
};
}();


I'm using the following layout on the page in question and am wondering why it would make my left nested layout disappear...


BrandMainLayout = function(){
var layout;
return {
init : function(){
layout = new Ext.BorderLayout('container', {
west: {
split:true,
initialSize: 275,
minSize: 200,
maxSize: 450,
titlebar: true,
collapsible: true,
animate: true
},
center: {
split: true,
titlebar: true,
autoScroll:true
}
});

layout.beginUpdate();
layout.add('center', new Ext.ContentPanel('content', {title: 'Files', fitToFrame:true, closable: false}));
var innerLayout = new Ext.BorderLayout('west', {
center: {
split: true,
autoScroll:true,
minSize:200,
initialSize: 325,
maxSize: 450
},
south: {
split:true,
autoScroll:true,
titlebar: true,
collapsible: true,
animate: true,
initialSize: 200,
maxSize: 350,
minSize: 150
}
});
innerLayout.add('center', new Ext.ContentPanel('FolderBrowser',{fitToFrame:true}));

var CartLayout = new Ext.BorderLayout('Cart', {
center: {
initialSize: 250,
titlebar: false,
collapsible: false,
autoScroll:true
},
south: {
initialSize: 45,
titlebar: false,
autoScroll:false
}
});
CartLayout.add('center', new Ext.ContentPanel('CartNorth',{fitToFrame:true}));
CartLayout.add('south', new Ext.ContentPanel('CartCenter',{fitToFrame:true}));
innerLayout.add('south', new Ext.NestedLayoutPanel(CartLayout,{title: 'Download List',fitToFrame:true}));
layout.add('west', new Ext.NestedLayoutPanel(innerLayout,{title: 'File Folders',fitToFrame:true}));
layout.endUpdate();
},

UpdateCart : function() {
var cartcontent = Ext.get('CartDisplay');
cartcontent.load({
url: ['/Circuits/Catalog/dsp_ViewCart.cfm'],
text: 'Retrieving Download List...',
discardUrl:true
});
cartcontent.show();

var carticons = Ext.get('CartIcons');
carticons.load({
url: ['/Templates/dsp_CartIcons.cfm'],
text: '',
discardUrl:true
});
carticons.show();
}
};

}();


Any help would be greatly appreciated... keep in mind that I'm a first time Javascript and Ajax user so I may be doing lots of things wrong :)

[dsorre]

If anybody was wondering I finally figured it out... I'd slap myself if it wouldn't hurt :)

The innerlayout div of my page layout had the same id as the innerlayout div of my layoutdialog, so my ext.get call referenced the wrong div and screwed up everything.

At least I learned my lesson.