You are viewing a plain text version of this content. The canonical link for it is here.
Posted to xap-commits@incubator.apache.org by jm...@apache.org on 2007/03/01 02:21:21 UTC
svn commit: r513109 - in /incubator/xap/trunk/codebase/src/xap/widgets/dojo:
HorizontalPanel.js VerticalPanel.js
Author: jmargaris
Date: Wed Feb 28 18:21:20 2007
New Revision: 513109
URL: http://svn.apache.org/viewvc?view=rev&rev=513109
Log:
working better to some degree, but need to go back to
strategy of doing flex in two steps
Modified:
incubator/xap/trunk/codebase/src/xap/widgets/dojo/HorizontalPanel.js
incubator/xap/trunk/codebase/src/xap/widgets/dojo/VerticalPanel.js
Modified: incubator/xap/trunk/codebase/src/xap/widgets/dojo/HorizontalPanel.js
URL: http://svn.apache.org/viewvc/incubator/xap/trunk/codebase/src/xap/widgets/dojo/HorizontalPanel.js?view=diff&rev=513109&r1=513108&r2=513109
==============================================================================
--- incubator/xap/trunk/codebase/src/xap/widgets/dojo/HorizontalPanel.js (original)
+++ incubator/xap/trunk/codebase/src/xap/widgets/dojo/HorizontalPanel.js Wed Feb 28 18:21:20 2007
@@ -134,55 +134,41 @@
this.centerTd.align = "center";
}
},
-
- flex: function() {
+
+ onResized: function(){
+ delete this._resizeTask;
var children = this.children;
- //set all flexible children to height ''
for (var i = 0; i < children.length; i++) {
- if (children[i].domNode.flex) {
- children[i].domNode.style.width='';
+ var child = children[i];
+ if (child.domNode.flex){
+ child.domNode.style.display='none';
}
}
-
- //after we reset the flexible children we need to wait for container
- //to size accordingly
- dojo.lang.setTimeout(this, this.finishFlex, 0);
- },
-
- finishFlex: function(){
- var children = this.children;
-
- var freeSpace = this.domNode.clientWidth;
+ var contentWidth = dojo.style.getContentWidth(this.domNode);
+ var freeSpace = contentWidth;
for (var i = 0; i < children.length; i++) {
- freeSpace -= children[i].domNode.offsetWidth;
- }
+ freeSpace -= dojo.style.getOuterWidth(children[i].domNode);
+ }
+
//figure out how much space 1 'point' of flex is worth
var flexUnit = freeSpace/this._totalFlex;
- //if a child has flex defined, stretch it out
for (var i = 0; i < children.length; i++) {
- if (children[i].domNode.flex) {
- children[i].domNode.style.width = (children[i].domNode.clientWidth + (flexUnit * children[i].domNode.flex)) + 'px';
- }
+ var child = children[i];
+ if (child.domNode.flex){
+ dojo.style.setOuterWidth(child.domNode,dojo.style.getOuterWidth(child.domNode) + (flexUnit * child.domNode.flex));
+ child.domNode.style.display = '';
+ }
}
- xap.widgets.dojo.HorizontalPanel.superclass.onResized.call(this);
- },
-
- onResized: function(){
- delete this._resizeTask;
- //if we have a flex don't call super.onResized() here,
- //we will do it after we lay out the children based on flex
- if (this._totalFlex>0){
- this.flex();
- }
- else{
- xap.widgets.dojo.HorizontalPanel.superclass.onResized.call(this);
+ for (var i = 0; i<children.length;i++){
+ if(children[i].onResized){
+ children[i].onResized();
+ }
}
}
-
}
);
Modified: incubator/xap/trunk/codebase/src/xap/widgets/dojo/VerticalPanel.js
URL: http://svn.apache.org/viewvc/incubator/xap/trunk/codebase/src/xap/widgets/dojo/VerticalPanel.js?view=diff&rev=513109&r1=513108&r2=513109
==============================================================================
--- incubator/xap/trunk/codebase/src/xap/widgets/dojo/VerticalPanel.js (original)
+++ incubator/xap/trunk/codebase/src/xap/widgets/dojo/VerticalPanel.js Wed Feb 28 18:21:20 2007
@@ -42,21 +42,13 @@
dojo.inherits(xap.widgets.dojo.VerticalPanel, dojo.widget.HtmlWidget);
dojo.lang.extend(xap.widgets.dojo.VerticalPanel, {
- templateString: '<div style="overflow:hidden;border-width:1px; border-style:solid; border-color:red;">' +
- '<center dojoAttachPoint="center"></center>' +
- '<div dojoAttachPoint="nonCenter"></div>'+
- '</div>',
+ templateString: '<table cellPadding="0" cellSpacing="0"><tr><td dojoAttachPoint="containerNode"></td></tr></table>',
templateCssPath: null ,
widgetType: "VerticalPanel",
isContainer: true,
addChild: function(child, overrideContainerNode, pos, ref, insertIndex, flex) {
- if (!this.containerNode){
- this.containerNode = this.nonCenter;
- }
-
child.domNode.flex = flex;
- child.domNode.style.left = '';
this._totalFlex += flex;
xap.widgets.dojo.VerticalPanel.superclass.addChild.call(this, child, overrideContainerNode, pos, ref, insertIndex);
@@ -78,35 +70,7 @@
},
setAlign: function(align){
- if (!this.containerNode){
- this.containerNode = this.nonCenter;
- }
-
- if (this.align==align) return;
-
var children = this.containerNode.childNodes;
-
- //if the old align was center detach from this.center and add to this...
- if (this.align=="center"){
- while (children.length>0){
- var childNode = children[0];
- this.containerNode.removeChild(childNode);
- this.nonCenter.appendChild(childNode);
- }
- this.containerNode = this.nonCenter;
- }
-
- //if the new align is center the container node is now the center tag
- else if (align=="center"){
- while (children.length>0){
- var childNode = children[0];
- this.containerNode.removeChild(childNode);
- this.center.appendChild(childNode);
- }
- this.containerNode = this.center;
- }
-
- children = this.containerNode.childNodes;
if (align == "stretch") {
for (var i = 0; i < children.length; i++) {
@@ -122,6 +86,14 @@
children[i].style.width = children[i].originalWidth;
}
}
+
+ if (align == "start") {
+ this.containerNode.align = "left";
+ } else if (align == "end") {
+ this.containerNode.align = "right";
+ } else if (align == "center") {
+ this.containerNode.align = "center";
+ }
}
this.align = align;
@@ -129,48 +101,52 @@
setPack: function(pack) {
this._pack = pack;
+ if (pack == "start") {
+ this.containerNode.style.verticalAlign = "top";
+ } else if (pack == "end") {
+ this.containerNode.style.verticalAlign = "bottom";
+ } else if (pack == "center") {
+ this.containerNode.style.verticalAlign = "middle";
+ }
if (!this._resizeTask && this.isShowing()){
this._resizeTask = dojo.lang.setTimeout(this, this.onResized, 0);
}
- },
+ },
onResized: function(){
-// delete this._resizeTask;
-// var contentHeight = dojo.style.getContentHeight(this.domNode);
-// var freeSpace = contentHeight;
-// var children = this.children;
-//
-//
-// for (var i = 0; i < children.length; i++) {
-// freeSpace -= dojo.style.getOuterHeight(children[i].domNode);
-// }
-//
-// //figure out how much space 1 'point' of flex is worth
-// var flexUnit = freeSpace/this._totalFlex;
-// var y = 0;
-//
-// if (this._totalFlex<=0){
-// if (this._pack=='center'){
-// y = freeSpace/2;
-// }
-// else if (this._pack=='end'){
-// y = freeSpace;
-// }
-//
-// }
-//
-// for (var i = 0; i < children.length; i++) {
-// var child = children[i];
-// if (child.domNode.flex){
-// dojo.style.setOuterHeight(child.domNode,dojo.style.getOuterHeight(child.domNode) + (flexUnit * child.domNode.flex));
-// }
-// }
-//
-// for (var i = 0; i<children.length;i++){
-// if(children[i].onResized){
-// children[i].onResized();
-// }
-// }
+ delete this._resizeTask;
+ var children = this.children;
+
+ for (var i = 0; i < children.length; i++) {
+ var child = children[i];
+ if (child.domNode.flex){
+ child.domNode.style.display='none';
+ }
+ }
+
+ var contentHeight = dojo.style.getContentHeight(this.domNode);
+ var freeSpace = contentHeight;
+
+ for (var i = 0; i < children.length; i++) {
+ freeSpace -= dojo.style.getOuterHeight(children[i].domNode);
+ }
+
+ //figure out how much space 1 'point' of flex is worth
+ var flexUnit = freeSpace/this._totalFlex;
+
+ for (var i = 0; i < children.length; i++) {
+ var child = children[i];
+ if (child.domNode.flex){
+ dojo.style.setOuterHeight(child.domNode,dojo.style.getOuterHeight(child.domNode) + (flexUnit * child.domNode.flex));
+ child.domNode.style.display='';
+ }
+ }
+
+ for (var i = 0; i<children.length;i++){
+ if(children[i].onResized){
+ children[i].onResized();
+ }
+ }
}
}
);
@@ -181,6 +157,8 @@
//the setOuterHeight stuff doesn't really work for table...this is just a hack for now...
dojo.style.getBoxSizing = function(node){
if (node.nodeName=='table' || node.nodeName=='TABLE'){
+
+ //do this in IE6 only???
if ( dojo.render.html.ie){
return dojo.style.boxSizing.CONTENT_BOX;
}