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

Re: Treeview in Layout in Panel

Expand Messages
  • 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 1 of 3 , Mar 8, 2010
    View Source
    • 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.