BorderLayout - removing panels from NestedLayout

[mscifo]

Jack

I've been playing around with your updated feed-viewer example released with the newest beta. I've been trying to add support for a default view mode and a wide view mode and have come up with a couple issues.

1) A GridPanel/ContentPanel cannot be added to more than one BorderLayout.
2) When I remove a NestedLayoutPanel from a BorderLayout and add a different NestedLayout Panel, the new NestedLayoutPanel doesn't show up properly. May be related to issue 1.

The relevant code is below. Perhaps I am doing something wrong.


<snip>

layout.add('east', new YAHOO.ext.ContentPanel('suggested', {title: 'Suggested Feeds', fitToFrame:true}));

// create the feed grid
this.createGrid();

// create the preview panel and toolbar
previewBody = new YAHOO.ext.Actor('preview-body');
var tb = new YAHOO.ext.Toolbar('preview-tb');
tb.addButton({text: 'View in New Tab', className: 'view-tab', click: this.showInTab.createDelegate(this)});
tb.addSeparator();
tb.addButton({text: 'View in New Window', className: 'view-window', click: this.showInWindow.createDelegate(this)});

preview = new YAHOO.ext.ContentPanel('preview', {title: "Preview", fitToFrame:true, toolbar: tb, resizeEl:'preview-body'});
gridPanel = new YAHOO.ext.GridPanel(grid, 'Feed Articles');

defaultLayout = new YAHOO.ext.BorderLayout('defaultcontent', {
south: {
split:true,
initialSize: 250,
minSize: 100,
maxSize: 400,
autoScroll:false,
collapsible:true,
titlebar: true,
animate: true,
cmargins: {top:2,bottom:0,right:0,left:0}
},
center: {
autoScroll:false,
titlebar:false
}
});

defaultLayout.beginUpdate();
defaultLayout.add('center', gridPanel);
defaultLayout.add('south', preview);
defaultLayout.restoreState();
defaultLayout.endUpdate(true);
defaultPanel = new YAHOO.ext.NestedLayoutPanel(defaultLayout, 'View Feed');

wideLayout = new YAHOO.ext.BorderLayout('widecontent', {
east: {
split:true,
initialSize: 250,
minSize: 100,
maxSize: 400,
autoScroll:false,
collapsible:true,
titlebar: true,
animate: true,
cmargins: {top:2,bottom:0,right:0,left:0}
},
center: {
autoScroll:false,
titlebar:false
}
});

wideLayout.beginUpdate();
wideLayout.add('center', gridPanel);
wideLayout.add('east', preview);
wideLayout.restoreState();
wideLayout.endUpdate(true);
widePanel = new YAHOO.ext.NestedLayoutPanel(wideLayout, 'View Feed');

// restore any state information
layout.restoreState();
layout.endUpdate();

// load the default feed
//this.loadFeed('http://www.jackslocum.com/yui/feed/');
//this.changeActiveFeed('jvs');

this.showLayout('default');
},

showLayout : function(type){
layout.beginUpdate();

if (this.currentPanel != 'undefined' && this.currentPanel != '' && this.currentPanel != null) {
try {
layout.getRegion('center').remove(feedPanel);
} catch(e) {alert(e);}
}

switch (type) {
case 'wide':
feedPanel = widePanel;
layout.add('center', feedPanel);
this.currentPanel = 'widecontent';
break;
case 'default':
default:
feedPanel = defaultPanel;
layout.add('center', feedPanel);
this.currentPanel = 'defaultcontent';
break;
}

layout.endUpdate(true);
},


The relevant divs are below...


<div id="defaultcontent" class="ylayout-inactive-content">
<div id="feed-grid" class="ylayout-inactive-content ylayout-component-panel ygrid-mso"></div>
<div id="preview" class="ylayout-inactive-content">
<div id="preview-tb"></div>
<div id="preview-body"></div>
</div>
</div>
<div id="widecontent" class="ylayout-inactive-content">
<div id="feed-grid" class="ylayout-inactive-content ylayout-component-panel ygrid-mso"></div>
<div id="preview" class="ylayout-inactive-content">
<div id="preview-tb"></div>
<div id="preview-body"></div>
</div>
</div>


The first call to showLayout() works fine, but subsequent calls leave me with just a white background in the center region, as if wide and default panels were deleted.

Any help would be appreciated.

Thanks

-Matt

[mscifo]

Jack?

I realize you're busy and can't solve everyone's problems, but I'd appreciate at least some response, even if it is that you dont have time to help. I just see all these posts after mine and all of them have responses.

[jack.slocum]

Sorry for the delayed response but I was hoping to get the beta 2 release out which includes a fix when removing/readding NestedLayouts. In the current version it will cause an error if you remove the last panel in the region.

Also, you will want to remove the true on this call:

layout.endUpdate(true);

becomes:

layout.endUpdate();

The true is telling the layout not to perform a layout update.

[mscifo]

No prob, I'll wait for beta 2 then.

Thanks again!

[mscifo]

Jack

I've updated to beta 3 and that has fixed my problem with being able to remove/readd layouts (in fact now I am just using the hide/unhide panel functionality).

However, I still need help addressing issue 1....the inability to use the same grid (or any same element for that matter) on multiple panels). Referencing my posted code, I create a Grid and a GridPanel and add the GridPanel to the center region of the defaultLayout and the wideLayout. However, when I switch between layouts, the grid only shows in the wideLayout and not the defaultLayout (since it was last added to the wideLayout). I'm also experiencing this problem with the preview ContentPanel.

For now I've just created multiple grids which use the same datamodel, but that is causing major performance problems. Is there anything that can be done to address this problem?

Thanks

Matt

[mscifo]

bump

Jack?

[jack.slocum]

Unfortunately you can't share 1 element in multiple spots in the document. That's just how HTML works.

[mscifo]

Jack

I understand you cant use the same element in multiple spots. I was hoping that something could be written in BorderLayout to handle moving the elements around. Since my intention is to use the same grid in multiple panels, yet not have more than one panel visible at the same time, I was thinking along the lines of this psuedocode....

create a grid
create panel1
create panel2
assign grid to panel1
assign grid to panel2
render grid into panel1 via copying the grid's dom nodes into panel1 innerhtml
show panel1
select panel2
hide panel1
copy the grid's dom nodes into panel2 innerhtml
show panel2

What do you think about the feasibility of that? I know it sounds like it might be a costly operation, but it might end up being less costly than having more than one grid. Plus it would hopefully bypass all the smaller issues of trying to visually sync multiple grids so that they appear to be the same to the user.

Thoughts?

Matt

[jack.slocum]

Something like this might work:

1) Create two grid panels, both referencing the same grid, and add them both. The GridPanel will move it into a wrapper element, so it will actually be present in the 2nd Panel initially. If you create the panels backwards then it would be in the first. It's the order in which then are created, not added, that determines on which panel the grid appears initially.

2) You are going to have to override the sizing code to make sure it is applied when you swap grids (gp is one of the grid panels):

gp.setSize = function(width, height){
this.storedSize= {'width': width, 'height': height};
if(this.grid.container.dom.parentNode == this.el.dom){ // if its on this panel
YAHOO.ext.GridPanel.prototype.setSize.apply(this, arguments);
}
};

Then we add our swap function:

gp.plugGrid= function(grid){
this.grid.container.appendTo(this.el);
YAHOO.ext.GridPanel.prototype.setSize.call(this, this.storedSize.width, this.storedSize.height);
};

I'm not sure this would actally work but I don't see why it wouldn't.

You could also add an extendX version to move this logic to a class and take it out of your app code.

The performance of moving a large grid won't be great.