PDA

View Full Version : Data missing from the dialog popups when multiple links are clicked



gupadhyayula
9 Aug 2011, 11:43 AM
I am pretty much new to Ext JS 1.x. I have the below code in my JSP.

<div id="be-dlg" style="visibility:hidden;">
<div class="x-dlg-bd">
<div id="center" class="x-layout-inactive-content" style="padding:10px">
</div>
</div>
</div>
<div id="beh-dlg" style="visibility:hidden;">
<div class="x-dlg-bd">
<div id="center" class="x-layout-inactive-content" style="padding:10px">
</div>
</div>
</div>


<a id="be_bc_8"
data="{be_oid:'123456'}" href="#">
123456
</a>

<a id="beh_bc_8"
data="{be_oid:'123456'}" href="#">
123456
</a>

The above two links are for showing parent table details & the corresponding child table details. When i click the first link, the data gets shown in the pop-up. When fin, I close the pop-up. When click the second link also, the data gets shown properly & i close it. But, when i come back to the parent link & click again the pop-up gets displayed. But, the data is missing. It is empty. I double checked by debugging the back end code. It is there before sending the response. So, something seems to be missing. I doubt the overlappping container names are probably causing this. I tried renaming differently, but of no use. Can anyone help?

Below is the script I am having issue with. I have highlighted the portion which i doubt.


Dialog1.js

var LayoutExample = function(){

var be_oid,dialog;

var toggleTheme = function(){
Ext.get(document.body, true).toggleClass('xtheme-gray');
};

return {
init : function(){

var eles = document.body.getElementsByTagName('a'), id;
for(var i=0; i<eles.length; i++) {
if(eles[i] != null) {
id = eles[i].getAttribute('id');
var _link = Ext.get(id);
if(id != null && id.length > 3 && id.substring(0,3) == 'be_') {
_link.on('click', this.showDialog, _link, true);
}
}
}
},

showDialog : function(){
if(!dialog){
dialog = new Ext.LayoutDialog("be-dlg", {
title:'Billing Event',
modal:true,
width:600,
height:400,
shadow:true,
minWidth:300,
minHeight:300,
proxyDrag: true,
center: {
autoScroll:true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: false
}
});
dialog.addKeyListener(27, dialog.hide, dialog);
//dialog.addButton('Submit', dialog.hide, dialog);
dialog.addButton('Close', dialog.hide, dialog);

var layout = dialog.getLayout();
layout.beginUpdate();
layout.add('center', new Ext.ContentPanel('center',
{
fitToFrame:true,
autoScroll:true
}));
layout.endUpdate();
}
var dataString = document.getElementById(this.id).getAttribute("data");
var dataObject = eval('(' + dataString + ')');
be_oid = dataObject.be_oid;
dialog.getLayout().findPanel('center').
load('getDetails.do?be_oid='+be_oid);
dialog.show(Ext.get(this.id));
}
};
}();

Ext.onReady(LayoutExample.init, LayoutExample, true);



Dialog2.js

var LayoutExample = function(){

var be_oid,dialog;

var toggleTheme = function(){
Ext.get(document.body, true).toggleClass('xtheme-gray');
};

return {
init : function(){

var eles = document.body.getElementsByTagName('a'), id;
for(var i=0; i<eles.length; i++) {
if(eles[i] != null) {
id = eles[i].getAttribute('id');
var _link = Ext.get(id);
if(id != null && id.length > 4 && id.substring(0,4) == 'beh_') {
_link.on('click', this.showDialog, _link, true);
}
}
}
},

showDialog : function(){
if(!dialog){
dialog = new Ext.LayoutDialog("beh-dlg", {
title:'Billing Event History',
modal:true,
width:1400,
height:400,
shadow:true,
minWidth:300,
minHeight:300,
proxyDrag: true,
center: {
autoScroll:true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: false
}
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Close', dialog.hide, dialog);

var layout = dialog.getLayout();
layout.beginUpdate();
layout.add('center', new Ext.ContentPanel('center',
{
fitToFrame:true,
autoScroll:true
}));
layout.endUpdate();
}
var dataString = document.getElementById(this.id).getAttribute("data");
var dataObject = eval('(' + dataString + ')');
be_oid = dataObject.be_oid;
dialog.getLayout().findPanel('center').
load('getHistoryDetails.do?be_oid='+be_oid);
dialog.show(Ext.get(this.id));
}
};
}();

Ext.onReady(LayoutExample.init, LayoutExample, true);

gupadhyayula
11 Aug 2011, 7:45 AM
I have been working on this issue for the past 2 days & found the issue. I didn't completely read the documentation before. Also, one of the examples shown online helped me. The current version of JSP is given below.

<div id="be-dlg" style="visibility:hidden;">
<div class="x-dlg-bd">
<div id="center" class="x-layout-inactive-content" style="padding:10px">
</div>
</div>
</div>
<div id="beh-dlg" style="visibility:hidden;">
<div class="x-dlg-bd">
<div id="center" class="x-layout-inactive-content" style="padding:10px">
</div>
</div>
</div>

Both the parent div's have same child div id. So, I changed the second one to this.
<div id="beh-dlg" style="visibility:hidden;">
<div class="x-dlg-bd">
<div id="behcenter" class="x-layout-inactive-content" style="padding:10px">
</div>
</div>
</div>

The current "Dialog2.js" is given below.

layout.add('center', new Ext.ContentPanel('center',
{
fitToFrame:true,
autoScroll:true
}));
layout.endUpdate();
}
var dataString = document.getElementById(this.id).getAttribute("data");
var dataObject = eval('(' + dataString + ')');
be_oid = dataObject.be_oid;
dialog.getLayout().findPanel('center').
load('getHistoryDetails.do?be_oid='+be_oid);



So, I changed this to the following.

layout.add('center', new Ext.ContentPanel('behcenter',
{
fitToFrame:true,
autoScroll:true
}));
layout.endUpdate();
}
var dataString = document.getElementById(this.id).getAttribute("data");
var dataObject = eval('(' + dataString + ')');
be_oid = dataObject.be_oid;
dialog.getLayout().findPanel('behcenter').
load('getHistoryDetails.do?be_oid='+be_oid);



That's it. It worked very nicely. I didn't quite understand the documentation initially. It said the first parameter is the container element for this panel.

Anyhow, thanks for viewing the post to help me out.