Loading ...
Sorry, an error occurred while loading the content.

Treeview in Layout in Panel

Expand Messages
  • dvaughan63
    I have a dynamic built treeview in a layout contained in a floating panel. When the treeview in the left panel of the layout is expanded beyond the size of the
    Message 1 of 3 , Mar 3, 2010
    • 0 Attachment
      I have a dynamic built treeview in a layout contained in a floating panel. When the treeview in the left panel of the layout is expanded beyond the size of the panel, the scrollbar will be displayed as expected. When attempting to move the scrollbar down, the whole panel will be dragged instead (Actually works fine in IE 7/8, but not in Firefox 3+). Using the mousewheel will move the scrollbar and left treeview down correctly. Does anyone know why this might be happening?

      Sample code

      function x3Layout(divid,treeid) {

      var _I = this;

      var Dom = YAHOO.util.Dom,
      Event = YAHOO.util.Event,
      layout = null,
      cal = null,
      editor = null,
      conn = null
      dateSelected = null,
      editorData = {},
      panel_xy = [YAHOO.X3Explorer.PanelLeft, YAHOO.X3Explorer.PanelTop],
      title = '',
      bottommessage = '',
      treecallback = null;

      var d = new Date();
      var responseHtml = $.ajax({
      url: "wc.dll?X3~emproc~modcall~&mod=X3EXPLORER&PR=1&METH=ExplorerPanelUpdate&LASTPANEL=" + treeid + "&TIMESTAMP=" + d,
      async: false
      }).responseText;

      this.selectedx3id = null;

      this.setContent = function(content){
      if (content){ YAHOO.util.Dom.get('treecontent').innerHTML = content; }
      }

      createTreeView = function(){
      if (treeid){
      var comptree = new x3DataTree('treediv',treeid,treecallback);
      comptree.onTreeLabelClick.subscribe(function(type,args) {
      _I.selectedx3id = args[0].x3id;
      });
      }
      }
      createPanel = function(){
      var mypanel = new YAHOO.widget.Panel(divid, {
      width: YAHOO.X3Explorer.PanelWidth + 'px',
      height: YAHOO.X3Explorer.PanelHeight + 'px',
      underlay: 'shadow',
      autofillheight: 'body',
      close: false,
      xy: panel_xy
      });
      mypanel.setHeader('Data Explorer');
      mypanel.setBody('<div id="layout"><div id="jqnavbar" style="width:100%;text-align:left;"></div></div>');
      mypanel.beforeRenderEvent.subscribe(function() {
      Event.onAvailable('layout', function() {
      layout = new YAHOO.widget.Layout('layout', {
      height: (mypanel.body.offsetHeight - 40),
      units: [
      { position: 'top', height: 25, header: title, gutter: '2', useShim: true },
      { position: 'left', width: 205, resize: true, body: 'Loading Content', gutter: '0 5 0 2', scroll: true, minWidth: 150, maxWidth: 500, useShim: true },
      { position: 'bottom', height: 25, id: 'status', gutter: '2', useShim: true },
      { position: 'center', body: '', gutter: '0 2 0 0', scroll: true, useShim: true }
      ]
      });

      //Options panel
      var openOptionsPan = function(optreeid,op) {
      $("#optionsPaneljQuery").html('Please select an option from below.');
      $("#optionsPaneljQuery").dialog({
      autoOpen: false,
      modal: true,
      resizable: false,
      title: "Options",
      buttons: {'Configure Levels': function() {
      $("#classBuiltPanel").remove();
      $("body").append('<div id="classBuiltPanel"></div>');
      doRenderSort(optreeid);
      },
      'Detail Setup': function() {
      $("#classBuiltPanel").remove();
      $("body").append('<div id="classBuiltPanel"></div>');
      doRenderDetail(optreeid);
      }
      }
      });
      $("#optionsPaneljQuery").dialog(op);
      }

      layout.on('render', function() {
      var c = layout.getUnitByPosition('center');
      c.set('body','<div id="treecontent"><center> </center></div>');
      var l = layout.getUnitByPosition('left');
      l.set('body','<div id="treewrapper"><div id="treediv"> </div></div>');
      var b = layout.getUnitByPosition('bottom');
      b.set('body','<div id="treemessage">'+bottommessage+'</div>');
      var el = document.createElement('div');
      l.body.appendChild(el);
      var aPanels = YAHOO.X3Explorer.ActivePanels.split(",");
      var cNavText = ''
      var xPanel=0
      for (xPanel=0;xPanel<aPanels.length;xPanel=xPanel+2) {
      cNavText += '<button class="ui-state-default ui-corner-all jqTreeButt x3_titlebar" id="' + aPanels[xPanel] + '">' + aPanels[xPanel+1] + '</button> '
      }
      cNavText += ' <button class="ui-state-default ui-corner-all" id="jqOptions">' + YAHOO.X3Explorer.OptionsLabel + '</button>'
      $("#jqnavbar").html(cNavText);
      });
      layout.render();
      /*$("#jqRefresh").click(function(){
      loadlayout(treeid);
      });*/
      $("div#jqnavbar button#"+treeid).removeClass("x3_titlebar").addClass("themed_bg");
      // $("div#jqnavbar button#jqOptions").css({'background' : 'lightgreen'})
      $(".jqTreeButt").click(function(){
      loadlayout($(this).attr("id"));
      });
      $("#jqOptions").click(function(){
      $("#optionsPaneljQuery").dialog("destroy");
      openOptionsPan(treeid,'open');
      });
      Event.onAvailable('treediv', createTreeView);
      });
      });
      mypanel.hideEvent.subscribe(function() {
      Dom.setStyle('x3layoutbuttons','visibility','hidden');
      });
      mypanel.render(document.body);

      dragdrop = new YAHOO.util.DD(divid + "_c");
      dragdrop.endDrag = function(ev) {
      var tar = YAHOO.util.Event.getTarget(ev),
      xy = YAHOO.util.Dom.getXY(tar),
      d = new Date();
      var panelTop = xy[1];
      var panelLeft = xy[0];
      YAHOO.X3Explorer.PanelTop = panelTop;
      YAHOO.X3Explorer.PanelLeft = panelLeft;
      var responseHtml = $.ajax({
      url: "wc.dll?X3~emproc~modcall~&mod=X3EXPLORER&PR=1&METH=ExplorerPanelUpdate&TOP=" + panelTop + "&LEFT=" + panelLeft + "&TIMESTAMP=" + d,
      async: false
      }).responseText;
      };

      resize = new YAHOO.util.Resize(divid, {
      handles: ['br'],
      autoRatio: true,
      status: false,
      proxy: true,
      minWidth: YAHOO.X3Explorer.MinPanelWidth,
      minHeight: YAHOO.X3Explorer.MinPanelHeight
      });
      resize.on('resize', function(args) {
      var d = new Date();
      var panelHeight = args.height,
      panelWidth = args.width,
      panelTop = args.top,
      panelLeft = args.left,
      hpadding = 40,
      wpadding = 20;
      //Hack to trick IE into behaving
      Dom.setStyle('layout', 'display', 'none');
      this.cfg.setProperty("height", panelHeight + 'px');
      layout.set('height', this.body.offsetHeight - hpadding);
      layout.set('width', this.body.offsetWidth - wpadding);
      //Hack to trick IE into behaving
      Dom.setStyle('layout', 'display', 'block');
      layout.resize();
      YAHOO.X3Explorer.PanelWidth = panelWidth;
      YAHOO.X3Explorer.PanelHeight = panelHeight;
      YAHOO.X3Explorer.PanelTop = panelTop;
      YAHOO.X3Explorer.PanelLeft = panelLeft;
      resize_iframe();
      var responseHtml = $.ajax({
      url: "wc.dll?X3~emproc~modcall~&mod=X3EXPLORER&PR=1&METH=ExplorerPanelUpdate&HEIGHT=" + panelHeight + "&WIDTH=" + panelWidth + "&TOP=" + panelTop + "&LEFT=" + panelLeft + "&TIMESTAMP=" + d,
      async: false
      }).responseText;
      }, mypanel, true);
      }
      // we will make a call to the server using JSDA to fetch the data back.
      var oConfig = YAHOO.X3DA.newConfig();
      oConfig.queryName = 'getUserPref';
      oConfig.addParameters("lcUserID","SYSTEM");
      oConfig.addParameters("lcPrefID",treeid);

      var callback = {
      success:function(oResponse){
      var prefObject = $.json.decode(oResponse.responseText);
      var mytree = $.json.decode(prefObject.data[0].mlongpref);
      // title = mytree.title;
      bottommessage = mytree.bottommessage;
      title = mytree.title;
      treecallback = mytree.urllink;
      createPanel();
      },
      failure:function(oResponse){
      alert('Failure to load Panel Layout Preferences');
      //title = 'Unknown';
      },
      cache:false
      };
      YAHOO.X3DA.executeQueryByName(callback,oConfig);
      }
    • John Green
      Thouhgts from a friend,,, Looks like the Floating panel is intercepting the events instead of the scrollbar. Can the floating panel be placed/wrapped inside
      Message 2 of 3 , Mar 3, 2010
      • 0 Attachment
        Thouhgts from a friend,,,

        Looks like the Floating panel is intercepting the events instead of the
        scrollbar.

        Can the floating panel be placed/wrapped inside another DIV with proper padding
        and let the outer div display scrollbar.
        Thanks and Regards,


        > I have a dynamic built treeview in a layout contained in a floating panel. When the treeview in the left panel of the layout is expanded beyond the size of the panel, the scrollbar will be displayed as expected. When attempting to move the scrollbar down, the whole panel will be dragged instead (Actually works fine in IE 7/8, but not in Firefox 3+). Using the mousewheel will move the scrollbar and left treeview down correctly. Does anyone know why this might be happening?
        >
        > Sample code
        >
        > function x3Layout(divid,treeid) {
        >
        > var _I = this;
        >
        > var Dom = YAHOO.util.Dom,
        > Event = YAHOO.util.Event,
        > layout = null,
        > cal = null,
        > editor = null,
        > conn = null
        > dateSelected = null,
        > editorData = {},
        > panel_xy = [YAHOO.X3Explorer.PanelLeft, YAHOO.X3Explorer.PanelTop],
        > title = '',
        > bottommessage = '',
        > treecallback = null;
        >
        > var d = new Date();
        > var responseHtml = $.ajax({
        > url: "wc.dll?X3~emproc~modcall~&mod=X3EXPLORER&PR=1&METH=ExplorerPanelUpdate&LASTPANEL=" + treeid + "&TIMESTAMP=" + d,
        > async: false
        > }).responseText;
        >
        > this.selectedx3id = null;
        >
        > this.setContent = function(content){
        > if (content){ YAHOO.util.Dom.get('treecontent').innerHTML = content; }
        > }
        >
        > createTreeView = function(){
        > if (treeid){
        > var comptree = new x3DataTree('treediv',treeid,treecallback);
        > comptree.onTreeLabelClick.subscribe(function(type,args) {
        > _I.selectedx3id = args[0].x3id;
        > });
        > }
        > }
        > createPanel = function(){
        > var mypanel = new YAHOO.widget.Panel(divid, {
        > width: YAHOO.X3Explorer.PanelWidth + 'px',
        > height: YAHOO.X3Explorer.PanelHeight + 'px',
        > underlay: 'shadow',
        > autofillheight: 'body',
        > close: false,
        > xy: panel_xy
        > });
        > mypanel.setHeader('Data Explorer');
        > mypanel.setBody('<div id="layout"><div id="jqnavbar" style="width:100%;text-align:left;"></div></div>');
        > mypanel.beforeRenderEvent.subscribe(function() {
        > Event.onAvailable('layout', function() {
        > layout = new YAHOO.widget.Layout('layout', {
        > height: (mypanel.body.offsetHeight - 40),
        > units: [
        > { position: 'top', height: 25, header: title, gutter: '2', useShim: true },
        > { position: 'left', width: 205, resize: true, body: 'Loading Content', gutter: '0 5 0 2', scroll: true, minWidth: 150, maxWidth: 500, useShim: true },
        > { position: 'bottom', height: 25, id: 'status', gutter: '2', useShim: true },
        > { position: 'center', body: '', gutter: '0 2 0 0', scroll: true, useShim: true }
        > ]
        > });
        >
        > //Options panel
        > var openOptionsPan = function(optreeid,op) {
        > $("#optionsPaneljQuery").html('Please select an option from below.');
        > $("#optionsPaneljQuery").dialog({
        > autoOpen: false,
        > modal: true,
        > resizable: false,
        > title: "Options",
        > buttons: {'Configure Levels': function() {
        > $("#classBuiltPanel").remove();
        > $("body").append('<div id="classBuiltPanel"></div>');
        > doRenderSort(optreeid);
        > },
        > 'Detail Setup': function() {
        > $("#classBuiltPanel").remove();
        > $("body").append('<div id="classBuiltPanel"></div>');
        > doRenderDetail(optreeid);
        > }
        > }
        > });
        > $("#optionsPaneljQuery").dialog(op);
        > }
        >
        > layout.on('render', function() {
        > var c = layout.getUnitByPosition('center');
        > c.set('body','<div id="treecontent"><center> </center></div>');
        > var l = layout.getUnitByPosition('left');
        > l.set('body','<div id="treewrapper"><div id="treediv"> </div></div>');
        > var b = layout.getUnitByPosition('bottom');
        > b.set('body','<div id="treemessage">'+bottommessage+'</div>');
        > var el = document.createElement('div');
        > l.body.appendChild(el);
        > var aPanels = YAHOO.X3Explorer.ActivePanels.split(",");
        > var cNavText = ''
        > var xPanel=0
        > for (xPanel=0;xPanel<aPanels.length;xPanel=xPanel+2) {
        > cNavText += '<button class="ui-state-default ui-corner-all jqTreeButt x3_titlebar" id="' + aPanels[xPanel] + '">' + aPanels[xPanel+1] + '</button> '
        > }
        > cNavText += ' <button class="ui-state-default ui-corner-all" id="jqOptions">' + YAHOO.X3Explorer.OptionsLabel + '</button>'
        > $("#jqnavbar").html(cNavText);
        > });
        > layout.render();
        > /*$("#jqRefresh").click(function(){
        > loadlayout(treeid);
        > });*/
        > $("div#jqnavbar button#"+treeid).removeClass("x3_titlebar").addClass("themed_bg");
        > // $("div#jqnavbar button#jqOptions").css({'background' : 'lightgreen'})
        > $(".jqTreeButt").click(function(){
        > loadlayout($(this).attr("id"));
        > });
        > $("#jqOptions").click(function(){
        > $("#optionsPaneljQuery").dialog("destroy");
        > openOptionsPan(treeid,'open');
        > });
        > Event.onAvailable('treediv', createTreeView);
        > });
        > });
        > mypanel.hideEvent.subscribe(function() {
        > Dom.setStyle('x3layoutbuttons','visibility','hidden');
        > });
        > mypanel.render(document.body);
        >
        > dragdrop = new YAHOO.util.DD(divid + "_c");
        > dragdrop.endDrag = function(ev) {
        > var tar = YAHOO.util.Event.getTarget(ev),
        > xy = YAHOO.util.Dom.getXY(tar),
        > d = new Date();
        > var panelTop = xy[1];
        > var panelLeft = xy[0];
        > YAHOO.X3Explorer.PanelTop = panelTop;
        > YAHOO.X3Explorer.PanelLeft = panelLeft;
        > var responseHtml = $.ajax({
        > url: "wc.dll?X3~emproc~modcall~&mod=X3EXPLORER&PR=1&METH=ExplorerPanelUpdate&TOP=" + panelTop + "&LEFT=" + panelLeft + "&TIMESTAMP=" + d,
        > async: false
        > }).responseText;
        > };
        >
        > resize = new YAHOO.util.Resize(divid, {
        > handles: ['br'],
        > autoRatio: true,
        > status: false,
        > proxy: true,
        > minWidth: YAHOO.X3Explorer.MinPanelWidth,
        > minHeight: YAHOO.X3Explorer.MinPanelHeight
        > });
        > resize.on('resize', function(args) {
        > var d = new Date();
        > var panelHeight = args.height,
        > panelWidth = args.width,
        > panelTop = args.top,
        > panelLeft = args.left,
        > hpadding = 40,
        > wpadding = 20;
        > //Hack to trick IE into behaving
        > Dom.setStyle('layout', 'display', 'none');
        > this.cfg.setProperty("height", panelHeight + 'px');
        > layout.set('height', this.body.offsetHeight - hpadding);
        > layout.set('width', this.body.offsetWidth - wpadding);
        > //Hack to trick IE into behaving
        > Dom.setStyle('layout', 'display', 'block');
        > layout.resize();
        > YAHOO.X3Explorer.PanelWidth = panelWidth;
        > YAHOO.X3Explorer.PanelHeight = panelHeight;
        > YAHOO.X3Explorer.PanelTop = panelTop;
        > YAHOO.X3Explorer.PanelLeft = panelLeft;
        > resize_iframe();
        > var responseHtml = $.ajax({
        > url: "wc.dll?X3~emproc~modcall~&mod=X3EXPLORER&PR=1&METH=ExplorerPanelUpdate&HEIGHT=" + panelHeight + "&WIDTH=" + panelWidth + "&TOP=" + panelTop + "&LEFT=" + panelLeft + "&TIMESTAMP=" + d,
        > async: false
        > }).responseText;
        > }, mypanel, true);
        > }
        > // we will make a call to the server using JSDA to fetch the data back.
        > var oConfig = YAHOO.X3DA.newConfig();
        > oConfig.queryName = 'getUserPref';
        > oConfig.addParameters("lcUserID","SYSTEM");
        > oConfig.addParameters("lcPrefID",treeid);
        >
        > var callback = {
        > success:function(oResponse){
        > var prefObject = $.json.decode(oResponse.responseText);
        > var mytree = $.json.decode(prefObject.data[0].mlongpref);
        > // title = mytree.title;
        > bottommessage = mytree.bottommessage;
        > title = mytree.title;
        > treecallback = mytree.urllink;
        > createPanel();
        > },
        > failure:function(oResponse){
        > alert('Failure to load Panel Layout Preferences');
        > //title = 'Unknown';
        > },
        > cache:false
        > };
        > YAHOO.X3DA.executeQueryByName(callback,oConfig);
        > }
        >
        >
        >
      • dvaughan63
        Thanks for suggestions, I decided it would simpler to take out the panel and anchor in the layout in a standard div. Actually fits the application better this
        Message 3 of 3 , Mar 8, 2010
        • 0 Attachment
          Thanks for suggestions, I decided it would simpler to take out the panel and anchor in the layout in a standard div. Actually fits the application better this way.

          David Vaughan


          --- In ydn-javascript@yahoogroups.com, John Green <john.green@...> wrote:
          >
          > Thouhgts from a friend,,,
          >
          > Looks like the Floating panel is intercepting the events instead of the
          > scrollbar.
          >
          > Can the floating panel be placed/wrapped inside another DIV with proper padding
          > and let the outer div display scrollbar.
          > Thanks and Regards,
          >
          >
          > > I have a dynamic built treeview in a layout contained in a floating panel. When the treeview in the left panel of the layout is expanded beyond the size of the panel, the scrollbar will be displayed as expected. When attempting to move the scrollbar down, the whole panel will be dragged instead (Actually works fine in IE 7/8, but not in Firefox 3+). Using the mousewheel will move the scrollbar and left treeview down correctly. Does anyone know why this might be happening?
          > >
          > > Sample code
          > >
          > > function x3Layout(divid,treeid) {
          > >
          > > var _I = this;
          > >
          > > var Dom = YAHOO.util.Dom,
          > > Event = YAHOO.util.Event,
          > > layout = null,
          > > cal = null,
          > > editor = null,
          > > conn = null
          > > dateSelected = null,
          > > editorData = {},
          > > panel_xy = [YAHOO.X3Explorer.PanelLeft, YAHOO.X3Explorer.PanelTop],
          > > title = '',
          > > bottommessage = '',
          > > treecallback = null;
          > >
          > > var d = new Date();
          > > var responseHtml = $.ajax({
          > > url: "wc.dll?X3~emproc~modcall~&mod=X3EXPLORER&PR=1&METH=ExplorerPanelUpdate&LASTPANEL=" + treeid + "&TIMESTAMP=" + d,
          > > async: false
          > > }).responseText;
          > >
          > > this.selectedx3id = null;
          > >
          > > this.setContent = function(content){
          > > if (content){ YAHOO.util.Dom.get('treecontent').innerHTML = content; }
          > > }
          > >
          > > createTreeView = function(){
          > > if (treeid){
          > > var comptree = new x3DataTree('treediv',treeid,treecallback);
          > > comptree.onTreeLabelClick.subscribe(function(type,args) {
          > > _I.selectedx3id = args[0].x3id;
          > > });
          > > }
          > > }
          > > createPanel = function(){
          > > var mypanel = new YAHOO.widget.Panel(divid, {
          > > width: YAHOO.X3Explorer.PanelWidth + 'px',
          > > height: YAHOO.X3Explorer.PanelHeight + 'px',
          > > underlay: 'shadow',
          > > autofillheight: 'body',
          > > close: false,
          > > xy: panel_xy
          > > });
          > > mypanel.setHeader('Data Explorer');
          > > mypanel.setBody('<div id="layout"><div id="jqnavbar" style="width:100%;text-align:left;"></div></div>');
          > > mypanel.beforeRenderEvent.subscribe(function() {
          > > Event.onAvailable('layout', function() {
          > > layout = new YAHOO.widget.Layout('layout', {
          > > height: (mypanel.body.offsetHeight - 40),
          > > units: [
          > > { position: 'top', height: 25, header: title, gutter: '2', useShim: true },
          > > { position: 'left', width: 205, resize: true, body: 'Loading Content', gutter: '0 5 0 2', scroll: true, minWidth: 150, maxWidth: 500, useShim: true },
          > > { position: 'bottom', height: 25, id: 'status', gutter: '2', useShim: true },
          > > { position: 'center', body: '', gutter: '0 2 0 0', scroll: true, useShim: true }
          > > ]
          > > });
          > >
          > > //Options panel
          > > var openOptionsPan = function(optreeid,op) {
          > > $("#optionsPaneljQuery").html('Please select an option from below.');
          > > $("#optionsPaneljQuery").dialog({
          > > autoOpen: false,
          > > modal: true,
          > > resizable: false,
          > > title: "Options",
          > > buttons: {'Configure Levels': function() {
          > > $("#classBuiltPanel").remove();
          > > $("body").append('<div id="classBuiltPanel"></div>');
          > > doRenderSort(optreeid);
          > > },
          > > 'Detail Setup': function() {
          > > $("#classBuiltPanel").remove();
          > > $("body").append('<div id="classBuiltPanel"></div>');
          > > doRenderDetail(optreeid);
          > > }
          > > }
          > > });
          > > $("#optionsPaneljQuery").dialog(op);
          > > }
          > >
          > > layout.on('render', function() {
          > > var c = layout.getUnitByPosition('center');
          > > c.set('body','<div id="treecontent"><center> </center></div>');
          > > var l = layout.getUnitByPosition('left');
          > > l.set('body','<div id="treewrapper"><div id="treediv"> </div></div>');
          > > var b = layout.getUnitByPosition('bottom');
          > > b.set('body','<div id="treemessage">'+bottommessage+'</div>');
          > > var el = document.createElement('div');
          > > l.body.appendChild(el);
          > > var aPanels = YAHOO.X3Explorer.ActivePanels.split(",");
          > > var cNavText = ''
          > > var xPanel=0
          > > for (xPanel=0;xPanel<aPanels.length;xPanel=xPanel+2) {
          > > cNavText += '<button class="ui-state-default ui-corner-all jqTreeButt x3_titlebar" id="' + aPanels[xPanel] + '">' + aPanels[xPanel+1] + '</button> '
          > > }
          > > cNavText += ' <button class="ui-state-default ui-corner-all" id="jqOptions">' + YAHOO.X3Explorer.OptionsLabel + '</button>'
          > > $("#jqnavbar").html(cNavText);
          > > });
          > > layout.render();
          > > /*$("#jqRefresh").click(function(){
          > > loadlayout(treeid);
          > > });*/
          > > $("div#jqnavbar button#"+treeid).removeClass("x3_titlebar").addClass("themed_bg");
          > > // $("div#jqnavbar button#jqOptions").css({'background' : 'lightgreen'})
          > > $(".jqTreeButt").click(function(){
          > > loadlayout($(this).attr("id"));
          > > });
          > > $("#jqOptions").click(function(){
          > > $("#optionsPaneljQuery").dialog("destroy");
          > > openOptionsPan(treeid,'open');
          > > });
          > > Event.onAvailable('treediv', createTreeView);
          > > });
          > > });
          > > mypanel.hideEvent.subscribe(function() {
          > > Dom.setStyle('x3layoutbuttons','visibility','hidden');
          > > });
          > > mypanel.render(document.body);
          > >
          > > dragdrop = new YAHOO.util.DD(divid + "_c");
          > > dragdrop.endDrag = function(ev) {
          > > var tar = YAHOO.util.Event.getTarget(ev),
          > > xy = YAHOO.util.Dom.getXY(tar),
          > > d = new Date();
          > > var panelTop = xy[1];
          > > var panelLeft = xy[0];
          > > YAHOO.X3Explorer.PanelTop = panelTop;
          > > YAHOO.X3Explorer.PanelLeft = panelLeft;
          > > var responseHtml = $.ajax({
          > > url: "wc.dll?X3~emproc~modcall~&mod=X3EXPLORER&PR=1&METH=ExplorerPanelUpdate&TOP=" + panelTop + "&LEFT=" + panelLeft + "&TIMESTAMP=" + d,
          > > async: false
          > > }).responseText;
          > > };
          > >
          > > resize = new YAHOO.util.Resize(divid, {
          > > handles: ['br'],
          > > autoRatio: true,
          > > status: false,
          > > proxy: true,
          > > minWidth: YAHOO.X3Explorer.MinPanelWidth,
          > > minHeight: YAHOO.X3Explorer.MinPanelHeight
          > > });
          > > resize.on('resize', function(args) {
          > > var d = new Date();
          > > var panelHeight = args.height,
          > > panelWidth = args.width,
          > > panelTop = args.top,
          > > panelLeft = args.left,
          > > hpadding = 40,
          > > wpadding = 20;
          > > //Hack to trick IE into behaving
          > > Dom.setStyle('layout', 'display', 'none');
          > > this.cfg.setProperty("height", panelHeight + 'px');
          > > layout.set('height', this.body.offsetHeight - hpadding);
          > > layout.set('width', this.body.offsetWidth - wpadding);
          > > //Hack to trick IE into behaving
          > > Dom.setStyle('layout', 'display', 'block');
          > > layout.resize();
          > > YAHOO.X3Explorer.PanelWidth = panelWidth;
          > > YAHOO.X3Explorer.PanelHeight = panelHeight;
          > > YAHOO.X3Explorer.PanelTop = panelTop;
          > > YAHOO.X3Explorer.PanelLeft = panelLeft;
          > > resize_iframe();
          > > var responseHtml = $.ajax({
          > > url: "wc.dll?X3~emproc~modcall~&mod=X3EXPLORER&PR=1&METH=ExplorerPanelUpdate&HEIGHT=" + panelHeight + "&WIDTH=" + panelWidth + "&TOP=" + panelTop + "&LEFT=" + panelLeft + "&TIMESTAMP=" + d,
          > > async: false
          > > }).responseText;
          > > }, mypanel, true);
          > > }
          > > // we will make a call to the server using JSDA to fetch the data back.
          > > var oConfig = YAHOO.X3DA.newConfig();
          > > oConfig.queryName = 'getUserPref';
          > > oConfig.addParameters("lcUserID","SYSTEM");
          > > oConfig.addParameters("lcPrefID",treeid);
          > >
          > > var callback = {
          > > success:function(oResponse){
          > > var prefObject = $.json.decode(oResponse.responseText);
          > > var mytree = $.json.decode(prefObject.data[0].mlongpref);
          > > // title = mytree.title;
          > > bottommessage = mytree.bottommessage;
          > > title = mytree.title;
          > > treecallback = mytree.urllink;
          > > createPanel();
          > > },
          > > failure:function(oResponse){
          > > alert('Failure to load Panel Layout Preferences');
          > > //title = 'Unknown';
          > > },
          > > cache:false
          > > };
          > > YAHOO.X3DA.executeQueryByName(callback,oConfig);
          > > }
          > >
          > >
          > >
          >
        Your message has been successfully submitted and would be delivered to recipients shortly.