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

52471Treeview in Layout in Panel

Expand Messages
  • dvaughan63
    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);
      }
    • Show all 3 messages in this topic