PDA

View Full Version : LayoutDialog content disappearing



tpattison
26 Apr 2007, 8:52 AM
I am working on a site for our local Service Dog club. The main body is a BorderLayout with LayoutDialogs called on button clicks. The LayoutDialogs are shown perfectly. My problem comes when I click through all the tabs on each LayoutDialog. Eventually one of the following things happen, either the content disappears and isn't shown where it was before, tabs that have no content have the content from the first tab, or content from the first tab is dispalyed below existing content.

What's weird is that it's the content of the first tab that's propagated when this problem occurs.

I've searched through the forums and haven't found anything that comes close to this issue. It happens in IE6, IE7, and FF2.

Here is my JS code:

Homepage = function(){
var myEventDialog, myContactDialog, myInfoDialog, myGalleryDialog;
var eventButton, memberButton, contactButton, infoButton, galleryButton;

return {
init : function(){
var loading = Ext.get('loading');
var mask = Ext.get('loading-mask');
mask.setOpacity(.8);
mask.shift({
xy:loading.getXY(),
width:loading.getWidth(),
height:loading.getHeight(),
remove:true,
duration:1,
opacity:.3,
easing:'bounceOut',
callback : function(){
loading.fadeOut({duration:.2,remove:true});
}
});

// Define and instantiate BorderLayout object
var layout = new Ext.BorderLayout(document.body, {
north: {
split:false,
initialSize: 130
},
south: {
split:false,
initialSize: 30
},
center: {
autoScroll: true
}
});
layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('header', {fitToFrame:true}));
layout.add('south', new Ext.ContentPanel('footer', {fitToFrame:true}));
layout.add('center', new Ext.ContentPanel('content'));
layout.endUpdate();

// Instantiate the QuickTips object
Ext.QuickTips.init();

var buttonEL2= Ext.get('event_nav');
eventButton = new Ext.Button(buttonEL2, {
text: 'Events',
icon: 'images/evolution-calendar.jpg',
tooltip: 'Training Schedule, Trials & Events',
cls: 'mybutton-text-icon'
});

eventButton.on('click', this.showEventDialog, this);

var buttonEL3= Ext.get('members_nav');
memberButton = new Ext.Button(buttonEL3, {
text: 'Members',
icon: 'images/password.jpg',
tooltip: 'Club Member Area',
cls: 'mybutton-text-icon'
});

var buttonEL4= Ext.get('contact_nav');
contactButton = new Ext.Button(buttonEL4, {
text: 'About SDGA',
icon: 'images/kuser.jpg',
tooltip: 'About Us, Contact Us, Directions',
cls: 'mybutton-text-icon'
});

contactButton.on('click', this.showContactDialog, this);

var buttonEL5= Ext.get('information_nav');
infoButton = new Ext.Button(buttonEL5, {
text: 'Information',
icon: 'images/klipper.jpg',
tooltip: 'Club Information, Membership Information, Documents & Forms, Links',
cls: 'mybutton-text-icon'
});

infoButton.on('click', this.showInfoDialog, this);

var buttonEL6= Ext.get('gallery_nav');
galleryButton = new Ext.Button(buttonEL6, {
text: 'Gallery',
icon: 'images/background.jpg',
tooltip: 'Photo & Video Gallery',
cls: 'mybutton-text-icon'
});

galleryButton.on('click', this.showGalleryDialog, this);
},

loadDoc : function(url){
Ext.get('content').dom.src = url;
},

showEventDialog : function (){
if(!myEventDialog){ // lazy initialize the eventDialog and only create it once
myEventDialog = new Ext.LayoutDialog("event-dlg", {
modal:true,
collapsible:false,
width:720,
height:500,
shadow:true,
minWidth:400,
minHeight:300,
proxyDrag: true,
center: {
autoScroll:true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: true
}
});
myEventDialog.addKeyListener(27, myEventDialog.hide, myEventDialog);
myEventDialog.addButton('Close', myEventDialog.hide, myEventDialog);

var layout = myEventDialog.getLayout();
layout.beginUpdate();
layout.add('center', new Ext.ContentPanel('center', {
title: 'Training Schedule',
url: {
url: 'training_sched.html',
scripts: true
},
loadOnce: true
}));
layout.add('center', new Ext.ContentPanel(Ext.id(), {
autoCreate:true,
title: 'Trials and Events',
background:true,
url: {
url: 'trials_events.html',
scripts: true
},
loadOnce: true
}));
layout.endUpdate();
}
myEventDialog.show(eventButton.dom);
},

showContactDialog : function (){
if(!myContactDialog){ // lazy initialize the contactDialog and only create it once
myContactDialog= new Ext.LayoutDialog("contact-dlg", {
modal:true,
collapsible:false,
width:720,
height:500,
shadow:true,
minWidth:400,
minHeight:300,
proxyDrag: true,
center: {
autoScroll:true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: true
}
});
myContactDialog.addKeyListener(27, myContactDialog.hide, myContactDialog);
myContactDialog.addButton('Close', myContactDialog.hide, myContactDialog);

var layout = myContactDialog.getLayout();
layout.beginUpdate();
layout.add('center', new Ext.ContentPanel('center', {
title: 'About Us',
url: {
url: 'about.html',
scripts: true
},
loadOnce: true
}));
layout.add('center', new Ext.ContentPanel(Ext.id(), {
autoCreate:true,
title: 'Contact Us',
background:true,
url: {
url: 'contact.html',
scripts: true
},
loadOnce: true
}));
layout.add('center', new Ext.ContentPanel(Ext.id(), {
autoCreate:true,
title: 'Directions',
background:true,
url: {
url: 'directions2.html',
scripts: true
},
loadOnce: true
}));
layout.endUpdate();
}
myContactDialog.show(contactButton.dom);
},

showInfoDialog : function (){
if(!myInfoDialog){ // lazy initialize the infoDialog and only create it once
myInfoDialog= new Ext.LayoutDialog("info-dlg", {
modal:true,
collapsible:false,
width:720,
height:500,
shadow:true,
minWidth:400,
minHeight:300,
proxyDrag: true,
center: {
autoScroll:true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: true
}
});
myInfoDialog.addKeyListener(27, myInfoDialog.hide, myInfoDialog);
myInfoDialog.addButton('Close', myInfoDialog.hide, myInfoDialog);

var layout = myInfoDialog.getLayout();
layout.beginUpdate();
layout.add('center', new Ext.ContentPanel('center', {
title: 'Club Information',
url: {
url: 'club_info.html',
scripts: true
},
loadOnce: true
}));
layout.add('center', new Ext.ContentPanel(Ext.id(), {
autoCreate:true, title: 'Membership Information', background:true}));
layout.add('center', new Ext.ContentPanel(Ext.id(), {
autoCreate:true, title: 'Documentation & Forms', background:true}));
layout.add('center', new Ext.ContentPanel(Ext.id(), {
autoCreate:true,
title: 'Links',
background:true,
url: {
url: 'links.html',
scripts: true
},
loadOnce: true
}));
layout.endUpdate();
}
myInfoDialog.show(infoButton.dom);
},

showGalleryDialog : function (){
if(!myGalleryDialog){ // lazy initialize the infoDialog and only create it once
myGalleryDialog= new Ext.LayoutDialog("gallery-dlg", {
modal:true,
collapsible:false,
width:720,
height:500,
shadow:true,
minWidth:400,
minHeight:300,
proxyDrag: true,
center: {
autoScroll:true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: true
}
});
myGalleryDialog.addKeyListener(27, myGalleryDialog.hide, myGalleryDialog);
myGalleryDialog.addButton('Close', myGalleryDialog.hide, myGalleryDialog);

var layout = myGalleryDialog.getLayout();
layout.beginUpdate();
layout.add('center', new Ext.ContentPanel('center', {
title: 'Gallery 1',
url: {
url: 'gallery_1.html',
scripts: true
},
loadOnce: true
}));
//layout.add('center', new Ext.ContentPanel(Ext.id(), {
// autoCreate:true, title: 'Gallery 2', background:true}));
layout.endUpdate();
}
myGalleryDialog.show(galleryButton.dom);
}
};

}();
Ext.onReady(Homepage.init, Homepage, true);


Here is the code for the main page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />
<title>Service Dogs of Georgia - We Train Assests, Not Liabilities</title>
<script type="text/javascript" src="includes/yui-utilities.js"></script>
<script type="text/javascript" src="includes/ext-yui-adapter.js"></script>
<script type="text/javascript" src="includes/ext-all.js"></script>
<script type="text/javascript" src="includes/homepage.js"></script>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<link rel="stylesheet" type="text/css" href="css/ytheme-gray.css" />
<link href="css/sdaofga_main.css" rel="stylesheet" type="text/css" />
</head>
<body scroll="no" id="Homepage">
<div id="loading-mask" style="width:100%;height:100%;background:#999999;position:absolute;z-index:20000;left:0;top:0;"> </div>
<div id="loading">
<div class="loading-indicator"><img src="images/default/grid/loading.gif" style="width:16px;height:16px;" align="absmiddle"> Loading Service Dogs of GA...</div>
</div>
<div id="container">
<div class="x-layout-inactive-content" id="header">
<table width="100%" border="0" id="header_table">
<tr>
<td><img src="images/SDAofGA_Logo2_gray.jpg" alt="Service Dogs of Georgia" width="374" height="118" border="0" /></td>
<td valign="bottom" align="right"><table border="0" id="header_nav">
<tr>
<td valign="bottom" width="60px"><div id="contact_nav"></div></td>
<td valign="bottom" width="60px"><div id="information_nav"></div></td>
<td valign="bottom" width="60px"><div id="event_nav"></div></td>
<td valign="bottom" width="60px"><div id="gallery_nav"></div></td>
<td valign="bottom" width="60px"><div id="members_nav"></div></td>
</tr>
</table></td>
</tr>
</table>
</div>
<div class="x-layout-inactive-content" id="content">
<div id="homepage_content" style="width:650px; margin-left:auto; margin-right:auto;">
<p>&nbsp;</p>
<table align="center" width="640px" border="0" id="content_table">
<tr>
<td><p>Service Dogs of GA is a member of the Service Dogs of America. Service Dogs of America is affiliated to the United Kennel Club and will be responsible for conducting trials and events for this new program. </p>
<p>&nbsp;</p>
<p>The program offers a wide variety of training titles which include the following:</p>
<p>&nbsp;</p>
<p> 1. Six obedience titles.<br />
2. Four Protection titles for family and personal protection & breed evaluation.<br />
3. Two police patrol dog titles.<br />
4. Four Search & Rescue titles.<br />
5. Multiple levels of tracking and detection titles.<br />
6. Different types of Assistant titles.<br />
7. Titles designed to evaluate breeding potential. </p>
<p>&nbsp;</p>
<p>SDA TITLES APPEAR IN YOUR DOG'S UKC PEDIGREE</p>
<p>&nbsp;</p>
<p>Service Dogs of America is dedicated to developing, preserving and using a canine's natural instincts, intelligence and tractability to perform meaningful, utilitarian tasks for humankind. The organization is comprised of individual members and affiliated local dog training clubs. Its goal is to use proven common sense methods for training both canine and handler while maximizing the social, family orientation and sport aspects of activities centered on dog training and breeding evaluation.</p>
<p>&nbsp;</p>
</td>
</tr>
</table>
</div>
</div>
<div class="x-layout-inactive-content" id="footer">
<p>&nbsp;</p>
<div align="center"> &copy; 2007 Service Dogs of Georgia </div>
</div>
</div>
<div id="event-dlg" style="visibility:hidden;">
<div class="x-dlg-hd">Service Dogs of GA - Events</div>
<div class="x-dlg-bd">
<div id="center" class="x-layout-inactive-content" style="padding:10px;"></div>
</div>
</div>
<div id="contact-dlg" style="visibility:hidden;">
<div class="x-dlg-hd">Service Dogs of GA - About SDGA</div>
<div class="x-dlg-bd">
<div id="center" class="x-layout-inactive-content" style="padding:10px;"></div>
</div>
</div>
<div id="info-dlg" style="visibility:hidden;">
<div class="x-dlg-hd">Service Dogs of GA - Information & Documentation</div>
<div class="x-dlg-bd">
<div id="center" class="x-layout-inactive-content" style="padding:10px;"></div>
</div>
</div>
<div id="gallery-dlg" style="visibility:hidden;">
<div class="x-dlg-hd">Service Dogs of GA - Photo & Video Gallery</div>
<div class="x-dlg-bd">
<div id="center" class="x-layout-inactive-content" style="padding:10px;"></div>
</div>
</div>
</body>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />
</head>
</html>


I can post up the code for each individual tab if needed but there are a lot of them.

galdaka
26 Apr 2007, 9:21 AM
I have a same problem in diferent context:

http://extjs.com/forum/showthread.php?p=25844#post25844

Any ideas?

tpattison
26 Apr 2007, 9:34 AM
Not really, I am stumped by this one. I've muddled though a few problems already and am really pleased with Jack & team's framework. I can't for the life of me figure out why the content on each of the first tabs disappears after cycling through all of the LayoutDialogs.

I know it has to be something either in my code or in the framework, I'm betting on my code.

Here are the steps to recreate the problem.

Open site. Click on first button in the header panel. LayoutDialog opens for that section. Click on each tab of dialog. Click the close button for the dialog. Repeat for each nav button in the header panel.

Once this is done go back and click any of the buttons again and then the content of the first tab has disappeared, or the first tab's content has been added to another tab in that dialog.

On a side note, how do I get the LayoutDialog to always default to opening the first tab and not the last tab viewed?

Tim

dfenwick
26 Apr 2007, 9:57 AM
<div id="event-dlg" style="visibility:hidden;">
<div class="x-dlg-hd">Service Dogs of GA - Events</div>
<div class="x-dlg-bd">
<div id="center" class="x-layout-inactive-content" style="padding:10px;"></div>
</div>
</div>
<div id="contact-dlg" style="visibility:hidden;">
<div class="x-dlg-hd">Service Dogs of GA - About SDGA</div>
<div class="x-dlg-bd">
<div id="center" class="x-layout-inactive-content" style="padding:10px;"></div>
</div>
</div>
<div id="info-dlg" style="visibility:hidden;">
<div class="x-dlg-hd">Service Dogs of GA - Information & Documentation</div>
<div class="x-dlg-bd">
<div id="center" class="x-layout-inactive-content" style="padding:10px;"></div>
</div>
</div>
<div id="gallery-dlg" style="visibility:hidden;">
<div class="x-dlg-hd">Service Dogs of GA - Photo & Video Gallery</div>
<div class="x-dlg-bd">
<div id="center" class="x-layout-inactive-content" style="padding:10px;"></div>
</div>
</div>


Reusing the same IDs in the dom is a no-no. You need unique IDs for your center panels. :)

tpattison
26 Apr 2007, 10:04 AM
<div id="event-dlg" style="visibility:hidden;">
<div class="x-dlg-hd">Service Dogs of GA - Events</div>
<div class="x-dlg-bd">
<div id="center" class="x-layout-inactive-content" style="padding:10px;"></div>
</div>
</div>
<div id="contact-dlg" style="visibility:hidden;">
<div class="x-dlg-hd">Service Dogs of GA - About SDGA</div>
<div class="x-dlg-bd">
<div id="center" class="x-layout-inactive-content" style="padding:10px;"></div>
</div>
</div>
<div id="info-dlg" style="visibility:hidden;">
<div class="x-dlg-hd">Service Dogs of GA - Information & Documentation</div>
<div class="x-dlg-bd">
<div id="center" class="x-layout-inactive-content" style="padding:10px;"></div>
</div>
</div>
<div id="gallery-dlg" style="visibility:hidden;">
<div class="x-dlg-hd">Service Dogs of GA - Photo & Video Gallery</div>
<div class="x-dlg-bd">
<div id="center" class="x-layout-inactive-content" style="padding:10px;"></div>
</div>
</div>


Reusing the same IDs in the dom is a no-no. You need unique IDs for your center panels. :)

Thanks! Copy & pasting at 2AM is not always a good idea.

dfenwick
26 Apr 2007, 10:09 AM
On a side note, how do I get the LayoutDialog to always default to opening the first tab and not the last tab viewed?

Tim

Forgot to answer this part. When adding your ContentPanel objects to your region, set the ContentPanel configuration option background: true. That tells the layout manager not to activate the panel when adding it.

tpattison
26 Apr 2007, 10:11 AM
Forgot to answer this part. When adding your ContentPanel objects to your region, set the ContentPanel configuration option background: true. That tells the layout manager not to activate the panel when adding it.

That works the first time the dialog is opened. What about the subsequent times? If I open the dialog a second (or third, etc.) time then it opens to the last opened tab on that dialog.

tpattison
26 Apr 2007, 10:19 AM
Reusing the same IDs in the dom is a no-no. You need unique IDs for your center panels. :)

Fixing this issue solved the disappearing content problem it seems! Thanks dfenwick, I really appreciate the help. =D>

Now if I can just get the LayoutDialog to default to the first tab every time it is opened.

dfenwick
26 Apr 2007, 10:28 AM
That works the first time the dialog is opened. What about the subsequent times? If I open the dialog a second (or third, etc.) time then it opens to the last opened tab on that dialog.

That's standard behavior. It leaves the dialog in the state it was when it was closed. To reset it to the first page, you need to hook the 'show' event for the dialog and reset the page to the first page. You'll need to know the ID for that primary page. Example (on creation of each of your dialogs):


layout.on('show', function(dialog) {
dialog.getLayout().showPanel('eventd-center');
});

This code is untested, but it gets the point across. :)

tpattison
26 Apr 2007, 10:43 AM
That's standard behavior. It leaves the dialog in the state it was when it was closed. To reset it to the first page, you need to hook the 'show' event for the dialog and reset the page to the first page. You'll need to know the ID for that primary page. Example (on creation of each of your dialogs):


layout.on('show', function(dialog) {
dialog.getLayout().showPanel('eventd-center');
});

This code is untested, but it gets the point across. :)

dfenwick,

I guess I'm just not getting it. Here's what I've got and it still doesn't work.


showContactDialog : function (){
if(!myContactDialog){ // lazy initialize the contactDialog and only create it once
myContactDialog= new Ext.LayoutDialog("contact-dlg", {
modal:true,
collapsible:false,
width:720,
height:500,
shadow:true,
minWidth:400,
minHeight:300,
proxyDrag: true,
center: {
autoScroll:true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: true
}
});
myContactDialog.addKeyListener(27, myContactDialog.hide, myContactDialog);
myContactDialog.addButton('Close', myContactDialog.hide, myContactDialog);

var layout = myContactDialog.getLayout();
layout.beginUpdate();
layout.add('center', new Ext.ContentPanel('contact-dlg-center', {
title: 'About Us',
url: {
url: 'about.html',
scripts: true
},
loadOnce: true
}));
layout.add('center', new Ext.ContentPanel(Ext.id(), {
autoCreate:true,
title: 'Contact Us',
background:true,
url: {
url: 'contact.html',
scripts: true
},
loadOnce: true
}));
layout.add('center', new Ext.ContentPanel(Ext.id(), {
autoCreate:true,
title: 'Directions',
background:true,
url: {
url: 'directions2.html',
scripts: true
},
loadOnce: true
}));
layout.on('show', function(dialog) {
dialog.getLayout().showPanel('contact-dlg-center');
});
layout.endUpdate();
}
myContactDialog.show(contactButton.dom);
},

galdaka
26 Apr 2007, 11:00 AM
Not solved my problem:

http://extjs.com/forum/showthread.php?p=25844#post25844

If the region is collapsed or expanded the content see OK.

When I click in the titlebar (not in button) and the region expand with animation the content dissapears when the region is totally expanded.

Backgound: true config option in contentpanel not solved my problem.

Any ideas?

dfenwick
26 Apr 2007, 11:06 AM
dfenwick,

I guess I'm just not getting it. Here's what I've got and it still doesn't work.

You're reusing the layout parameter throughout the creation of your dialogs. As such, when you hang the listen on the 'show' event, you're passing the wrong element ID to that listen. You need to add the listen right after each of the dialog creations in order to maintain the layout variable, and that variable needs to remain in scope.

You're close, just get the layout variable under control and put your event listeners in the right place.

tpattison
26 Apr 2007, 11:48 AM
You're reusing the layout parameter throughout the creation of your dialogs. As such, when you hang the listen on the 'show' event, you're passing the wrong element ID to that listen. You need to add the listen right after each of the dialog creations in order to maintain the layout variable, and that variable needs to remain in scope.

You're close, just get the layout variable under control and put your event listeners in the right place.

dfenwick,

Thanks for the assistance! I've changed the layout variable names to all be distinct but I am still having issues as to where to place the event listener. Could you post some pseudo code so I can get the idea. Being a friggin newbie at this sucks.

galdaka
26 Apr 2007, 12:03 PM
Not solved for me:

http://extjs.com/forum/showthread.php?p=26272#post26272

Thanks in advance

dfenwick
26 Apr 2007, 12:04 PM
Not solved for me:

http://extjs.com/forum/showthread.php?p=26272#post26272

Thanks in advance

Galdaka, can we just move your discussion to your thread please? It's getting all muddy in here. :)

galdaka
26 Apr 2007, 12:05 PM
Sorry.

Thanks

dfenwick
26 Apr 2007, 12:08 PM
Here's your code with the updates I recommended in 1 section:


var layout = myEventDialog.getLayout();
layout.beginUpdate();
layout.add('center', new Ext.ContentPanel('center', {
title: 'Training Schedule',
url: {
url: 'training_sched.html',
scripts: true
},
loadOnce: true
}));
layout.add('center', new Ext.ContentPanel(Ext.id(), {
autoCreate:true,
title: 'Trials and Events',
background:true,
url: {
url: 'trials_events.html',
scripts: true
},
loadOnce: true
}));
layout.endUpdate();
layout.on('show', function(dialog) {
dialog.getLayout().showPanel('contact-dlg-center');
});


You repeat that code for each of your dialogs, replacing the id with the appropriate center panel id for the specific dialog.

tpattison
26 Apr 2007, 12:13 PM
Thanks dfenwick! That's one of the combinations I tried but it doesn't work. It still shows the last tab displayed when I reopen the layoutdialog. Oh well. Any other ideas?

dfenwick
26 Apr 2007, 12:39 PM
Thanks dfenwick! That's one of the combinations I tried but it doesn't work. It still shows the last tab displayed when I reopen the layoutdialog. Oh well. Any other ideas?

My bad. You need to listen for the show event for the dialog. Sample code:


var layout = myEventDialog.getLayout();
layout.beginUpdate();
layout.add('center', new Ext.ContentPanel('center', {
title: 'Training Schedule',
url: {
url: 'training_sched.html',
scripts: true
},
loadOnce: true
}));
layout.add('center', new Ext.ContentPanel(Ext.id(), {
autoCreate:true,
title: 'Trials and Events',
background:true,
url: {
url: 'trials_events.html',
scripts: true
},
loadOnce: true
}));
layout.endUpdate();
myContactDialog.on('show', function(dialog) {
dialog.getLayout().showPanel('contact-dlg-center');
});

You could probably try to hook the 'beforeshow' event as well and test that out. That might reduce and noticeable flicker by flipping to the right tab before actually showing the dialog. You'll have to test it though, as there may be side effects.

tpattison
26 Apr 2007, 12:44 PM
My bad. You need to listen for the show event for the dialog.

You could probably try to hook the 'beforeshow' event as well and test that out. That might reduce and noticeable flicker by flipping to the right tab before actually showing the dialog. You'll have to test it though, as there may be side effects.

Yes! That worked perfectly. Thanks dfenwick! I'll mess around with the beforeshow event later. For now this gets where I need to go. I should have caught the dialog vs. layout issue.

Thanks,
Tim