diff --git a/etemplate/js/et2_dataview.js b/etemplate/js/et2_dataview.js index a3c78c0692..5fbd24001c 100644 --- a/etemplate/js/et2_dataview.js +++ b/etemplate/js/et2_dataview.js @@ -390,9 +390,9 @@ var et2_dataview = Class.extend({ // make column resizable var enc_column = self.columnMgr.getColumnById(col.id); et2_dataview_makeResizeable(column, function(_w) { - this.set_width(this.relativeWidth ? (_w / self.columnMgr.totalWidth * 100) + "%" : _w + "px"); - self.columnMgr.updated = true; - self.updateColumns(); + this.set_width(this.relativeWidth ? (_w / self.columnMgr.totalWidth) : _w + "px"); + self.columnMgr.updated = true; + self.updateColumns(); }, enc_column); // Store both nodes in the columnNodes array diff --git a/etemplate/js/et2_dataview_model_columns.js b/etemplate/js/et2_dataview_model_columns.js index cd29c9fec7..49311e8e3b 100755 --- a/etemplate/js/et2_dataview_model_columns.js +++ b/etemplate/js/et2_dataview_model_columns.js @@ -59,9 +59,15 @@ var et2_dataview_column = ClassWithAttributes.extend({ "width": { "name": "Width", "type": "dimension", - "default": "auto", + "default": "80px", "description": "Width of the column." }, + "minWidth": { + "name": "Minimum width", + "type": "integer", + "default": 50, + "description": "Minimum width of the column, in pixels. Values below this are rejected." + }, "maxWidth": { "name": "Maximum width", "type": "integer", @@ -90,12 +96,16 @@ var et2_dataview_column = ClassWithAttributes.extend({ // 1. "100" => fixedWidth 100px // 2. "100px" => fixedWidth 100px // 3. "50%" => relativeWidth 50% - // 4. "auto" => fixedWidth false, relativeWidth false + // 4. 0.5 => relativeWidth 50% this.relativeWidth = false; this.fixedWidth = false; var w = _value; - if (w.charAt(w.length - 1) == "%" && !isNaN(w.substr(0, w.length - 1))) + if (typeof w == 'number') + { + this.relativeWidth = parseFloat(w.toFixed(3)); + } + else if (w.charAt(w.length - 1) == "%" && !isNaN(w.substr(0, w.length - 1))) { this.relativeWidth = parseInt(w.substr(0, w.length - 1)) / 100; @@ -145,6 +155,7 @@ var et2_dataview_columns = Class.extend({ init: function(_columnData) { // Initialize some variables this.totalWidth = 0; + this.totalFixed = 0; this.columnWidths = []; // Create the columns object @@ -308,9 +319,8 @@ var et2_dataview_columns = Class.extend({ // Calculate how many space is - relatively - not occupied with columns with // relative or fixed width - var remRelWidth = 1; - var fixedTotal = 0; - var noWidthCount = 0; + var totalRelative = 0; + this.totalFixed = 0; for (var i = 0; i < this.columns.length; i++) { @@ -328,72 +338,14 @@ var et2_dataview_columns = Class.extend({ } if (col.relativeWidth) { - remRelWidth -= col.relativeWidth; + totalRelative += col.relativeWidth; } else if (col.fixedWidth) { - fixedTotal += col.fixedWidth; - } - else - { - noWidthCount++; + this.totalFixed += col.fixedWidth; } } } - remRelWidth -= fixedTotal / tw; - - // Check whether the width of columns with relative width is larger than their - // maxWidth - var done; - do - { - done = true; - - var noWidth = remRelWidth / noWidthCount; - - for (var i = 0; i < this.columns.length; i++) - { - var col = this.columns[i]; - - if (col.visibility != ET2_COL_VISIBILITY_INVISIBLE) - { - if (col.maxWidth && !col._larger) - { - if (col.relativeWidth) - { - var w = col.relativeWidth * tw; - col._larger = w > col.maxWidth; - if (col._larger) - { - // Recalculate the remaining relative width: - // col.maxWidth / w is the relative amount of space p which - // is remaining for the element. E.g. an element with - // w = 150px and maxWidth = 100px => p = 2/3 - // The space which got removed is 1 - p => 1/3 - // ==> we have to add 1/3 * oldRelWidth to the remRelWidth - // variable. - remRelWidth += col.relativeWidth * (1 - col.maxWidth / w); - done = false; - break; - } - } - else - { - col._larger = noWidth * tw > col.maxWidth; - if (col._larger) - { - remRelWidth -= col.maxWidth / tw; - noWidthCount--; - done = false; - break; - } - } - } - } - } - // As some columns take their max width, new space might come available, which - // requires other columns to take their maximum width. - } while (!done); // Now calculate the absolute width of the columns in pixels var usedTotal = 0; @@ -414,16 +366,18 @@ var et2_dataview_columns = Class.extend({ } else if (col.relativeWidth) { - w = Math.round(tw * col.relativeWidth); + // Reset relative to an actual percentage (of 1.00) or + // resizing eventually sends them to 0 + col.relativeWidth = col.relativeWidth / totalRelative; + w = Math.round((tw-this.totalFixed) * col.relativeWidth); } - else + if (w > tw || (col.maxWidth && w > col.maxWidth)) { - w = Math.round(tw * (remRelWidth / noWidthCount)); + w = Math.min(tw - usedTotal, col.maxWidth); } - - if (w < 0) + if (w < 0 || w < col.minWidth) { - w = 0; + w = Math.max(0, col.minWidth); } } this.columnWidths.push(w); @@ -468,8 +422,7 @@ var et2_dataview_columns = Class.extend({ } else { - this.columnWidths[columnIndex] -= remaining_width; - column.set_width(column.relativeWidth ? (this.columnWidths[columnIndex] / self.totalWidth * 100) + "%" : this.columnWidths[columnIndex] + "px"); + this.columnWidths[columnIndex] = Math.max(column.minWidth, this.columnWidths[columnIndex] - remaining_width); } } } diff --git a/etemplate/js/et2_dataview_view_resizeable.js b/etemplate/js/et2_dataview_view_resizeable.js index d2f5e61e3a..5067cd857a 100644 --- a/etemplate/js/et2_dataview_view_resizeable.js +++ b/etemplate/js/et2_dataview_view_resizeable.js @@ -36,7 +36,7 @@ var didResize = false; var resizeWidth = 0; - function startResize(_outerElem, _elem, _callback) + function startResize(_outerElem, _elem, _callback, _column) { if (overlay == null || helper == null) { @@ -72,7 +72,8 @@ .bind("mousemove", function(e) { didResize = true; resizeWidth = Math.max(e.pageX - left + RESIZE_ADD, - RESIZE_MIN_WIDTH); + _column && _column.minWidth ? _column.minWidth : RESIZE_MIN_WIDTH + ); helper.css("width", resizeWidth + "px"); }) @@ -126,7 +127,7 @@ // Start the resizing startResize(outerTable, _elem, function(_w) { _callback.call(_context, _w); - }); + }, _context); } }); diff --git a/etemplate/js/et2_extension_nextmatch.js b/etemplate/js/et2_extension_nextmatch.js index 0b81a652bd..42993b3e42 100644 --- a/etemplate/js/et2_extension_nextmatch.js +++ b/etemplate/js/et2_extension_nextmatch.js @@ -803,7 +803,18 @@ var et2_nextmatch = et2_DOMWidget.extend([et2_IResizeable, et2_IInput], var colName = this._getColumnName(_row[i].widget); if(!colName) continue; - if(size[colName]) _colData[i].width = size[colName]; + if(size[colName]) + { + // Make sure percentages stay percentages, and forget any preference otherwise + if(_colData[i].width.charAt(_colData[i].width.length - 1) == "%") + { + _colData[i].width = typeof size[colName] == 'string' && size[colName].charAt(size[colName].length - 1) == "%" ? size[colName] : _colData[i].width; + } + else + { + _colData[i].width = parseInt(size[colName])+'px'; + } + } for(var j = 0; j < columnDisplay.length; j++) { if(columnDisplay[j] == colName) @@ -955,7 +966,15 @@ var et2_nextmatch = et2_DOMWidget.extend([et2_IResizeable, et2_IInput], "visibility": (!_colData[x] || _colData[x].disabled) ? ET2_COL_VISIBILITY_INVISIBLE : ET2_COL_VISIBILITY_VISIBLE, "width": _colData[x] ? _colData[x].width : 0 - }; + } + if(_colData[x].minWidth) + { + columnData[x].minWidth = _colData[x].minWidth; + } + if(_colData[x].maxWidth) + { + columnData[x].maxWidth = _colData[x].maxWidth; + } // No action columns in et2 var colName = this._getColumnName(_row[x].widget); diff --git a/etemplate/js/et2_widget_grid.js b/etemplate/js/et2_widget_grid.js index 4309aaabe3..67c1dc002d 100644 --- a/etemplate/js/et2_widget_grid.js +++ b/etemplate/js/et2_widget_grid.js @@ -180,6 +180,16 @@ var et2_grid = et2_DOMWidget.extend([et2_IDetachedDOM, et2_IAligned], colDataEntry["class"] = et2_readAttrWithDefault(node, "class", ""); colDataEntry["align"] = et2_readAttrWithDefault(node, "align", ""); colDataEntry["span"] = et2_readAttrWithDefault(node, "span", "1"); + + // Keep any others attributes set, there's no 'column' widget + for(var i in node.attributes) + { + var attr = node.attributes[i]; + if(attr.nodeType == 2 && typeof colDataEntry[attr.nodeName] == 'undefined') + { + colDataEntry[attr.nodeName] = attr.value; + } + } } else {