Results 1 to 2 of 2

Thread: Data missing from the dialog popups when multiple links are clicked

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    3
    Vote Rating
    0
      0  

    Default Data missing from the dialog popups when multiple links are clicked

    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);

  2. #2
    Sencha User
    Join Date
    Aug 2011
    Posts
    3
    Vote Rating
    0
      0  

    Default Issue found & fixed

    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •