I really like the new expando pane support. But I'd like to request some functionality from whoever the developer is. It would be really nice to have a vertical bar that can be clicked to expand/collapse the pane.
For example, when the pane is expanded, it looks like this...
http://picasaweb.google.com/jamesbognar/Dojo/photo?authkey=CltHM0FEXWA#5...
...and when the pane is collapsed, it looks like this...
http://picasaweb.google.com/jamesbognar/Dojo/photo?authkey=CltHM0FEXWA#5...
I was able to design something using an internal layout container...
<div dojoType="dijit.layout.LayoutContainer" attachParent="true" style="width: 100%; height: 100%; padding: 0; margin: 0; border: 0;">
<div id='actualContentPane' dojoType="dijit.layout.ContentPane" layoutAlign="client" style="background-color:rgb(240,244,252);width: 120px;">Available content</div>
<div id='expandoBar' dojoType="dijit.layout.ContentPane" layoutAlign="right" onclick="dijit.byId('expandoPane').toggle()"></div>
</div>
</div>
...and the following javascript code...
var expandoBarSurface;
renderExpandoBar = function() {
var div = dojo.byId("expandoBar");
var box = dojo.marginBox(div);
if (expandoBarSurface) {
expandoBarSurface.clear();
expandoBarSurface.setDimensions(20, box.h);
} else {
expandoBarSurface = dg.createSurface(div, 20, box.h);
}
var barFill = dojo.isIE ? "rgb(215,225,245)" :
{
type: "linear",
x1: 0, y1: 0, x2: 20, y2: 0,
colors: [
{ offset: 0, color: [240,244,252,1] },
{ offset: 1, color: [188,213,240,1] }
]
};
var surface = expandoBarSurface;
var dim = surface.getDimensions();
var w = dg.normalizedLength(dim.width);
var h = dg.normalizedLength(dim.height);
surface.createRect({
width: w,
height: h
}).setFill(barFill);
var g = surface.createGroup();
var t = g.createText({x:w/2,y:h/2+4,text:"Available content",align:"middle"});
t.setFont({family: "Arial", size: "10pt", weight: "bold"});
t.setFill("gray");
t.setTransform(dojox.gfx.matrix.rotategAt(270,w/2,h/2));
}
init = function() {
dijit.byId("expandoPane").toggle();
renderExpandoBar();
dijit.byId("expandoPane").resize();
dojo.connect(dijit.byId("expandoPane"), 'resize',
function(evt) {
console.debug("resize!");
renderExpandoBar();
}
);
}
dojo.addOnLoad(init);
But this required an update to ExpandoPane.js so that the expand bar isn't hidden....
if (this.actualContentPane && ! this.actualContentPane != "") {
dojo.style(
dojo.byId(this.actualContentPane),{
"visibility":"hidden",
"opacity":"0",
"overflow":"hidden"
}
);
}
// dojo.style(this.cwrapper,{
// "visibility":"hidden",
// "opacity":"0",
// "overflow":"hidden"
// });
},
It would be really nice if ExpandoPane could do this by default. :-)
wow that's kind of cool. I
wow that's kind of cool. I wrote the ExpandoPane, fwiw. I looked at how to make a text version of the title vertically aligned so when it was closed the title moved from there to the header when open. dojox.gfx is a great way to accomplish that, though I don't know I would be comfortable introducing it as a requirement.
also, you can update the _hideWrapper function without modifying the ExpandoPane.js file:
dojo.extend(dojox.layout.ExpandoPane,{ _hideWrapper:function(){ ... } });from a campus cookie: http://dojocampus.org/content/?p=50
The best thing to do would be to create this gfx-based ExpandoPane as a subclass, and go from there.
Good idea.
That's a good idea. I'll try that out.
You're ExpandoPane came at just the right time. I was just about to try to create something like it by extending SplitContainer. I was working on it for a couple of hours when I noticed your new class in Dojo 1.1. Thanx!
ExpandoPane is a great widget and vertical title
is an amazing addition. I would love to have the gfx-vertical title in that widget (otherwise, jbognar, please keep your updates posted !)
Another suggestion or feature request I have is allowing the expansion by single click instead of double-click anywhere in the collapsed vertical bar. And what is missing (and therefore kind of confusing) is any kind of icon in the title bar for collapsing/expanding.
Roberto
keep it on the down-low, but
keep it on the down-low, but I snuck some key changes into dijit.layout.BorderContainer right before 1.1 to allow that to happen (your other suggestion). The idea is that the ExpandoPane would be just an extended contentpane, with no fixed header/title bar, and the expando controls would live as part of the borderContainer's splitter, which is now accessible via the semi-public attribute: _splitterClass:"dijit.layout._Splitter"