Author: dmorozov Date: 2007-06-26 13:26:16 -0400 (Tue, 26 Jun 2007) New Revision: 1329 Modified: trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/common/box/Box.js trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/Grid.js trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridBody.js trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridFooter.js trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridHeader.js Log: Remove getElementByClassName method usage Modified: trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/common/box/Box.js =================================================================== --- trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/common/box/Box.js 2007-06-26 16:25:12 UTC (rev 1328) +++ trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/common/box/Box.js 2007-06-26 17:26:16 UTC (rev 1329) @@ -81,8 +81,10 @@ return this.element; }, getHeight: function() { - if(this.getElement().tagName.toLowerCase() != "body") - return Element.getHeight(this.element); + if(this.getElement().tagName.toLowerCase() != "body") { + var h = Element.getHeight(this.element); + return h>0 ? h : (this.element.boxHeight ? parseInt(this.element.boxHeight) : 0); + } if (self.innerHeight) { // all except Explorer return self.innerHeight; @@ -97,6 +99,7 @@ }, isModified: false, setHeight: function(newHeight) { + this.element.boxHeight = newHeight; if(Validators.IsNumber(newHeight)) { if(newHeight<0) newHeight = 0; newHeight += "px"; @@ -106,8 +109,10 @@ return this; }, getWidth: function() { - if(this.getElement().tagName.toLowerCase() != "body") - return Element.getWidth(this.element); + if(this.getElement().tagName.toLowerCase() != "body") { + var w = Element.getWidth(this.element); + return w>0 ? w : (this.element.boxWidth ? parseInt(this.element.boxWidth) : 0); + } if (self.innerHeight) {// all except Explorer return self.innerWidth; @@ -121,6 +126,7 @@ } }, setWidth: function(newWidth) { + this.element.boxWidth = newWidth; if(Validators.IsNumber(newWidth)) { if(newWidth<0) newWidth = 0; newWidth += "px"; Modified: trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/Grid.js =================================================================== --- trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/Grid.js 2007-06-26 16:25:12 UTC (rev 1328) +++ trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/Grid.js 2007-06-26 17:26:16 UTC (rev 1329) @@ -64,28 +64,29 @@ }, createControl: function() { var grid = this; - var layout = new ClientUI.layouts.GridLayoutManager(null, this.getElement()); - this.layout = layout; - var header, body, footer; - this.templates.unbreakableEach(function(item) { + this.layout = new ClientUI.layouts.GridLayoutManager(null, this.getElement()); + + var pagePart, item; + for(var i=0; i<this.templates.length; i++) { + item = this.templates[i]; switch(item.pane) { case GridLayout_Enum.HEADER: { - header = new ClientUI.controls.grid.GridHeader($(item.ref), grid); - layout.addPane(GridLayout_Enum.HEADER, header); + pagePart = new ClientUI.controls.grid.GridHeader($(item.ref), grid); + this.layout.addPane(GridLayout_Enum.HEADER, pagePart); break; } case GridLayout_Enum.BODY: { - body = new ClientUI.controls.grid.GridBody($(item.ref), grid); - layout.addPane(GridLayout_Enum.BODY, body); + pagePart = new ClientUI.controls.grid.GridBody($(item.ref), grid); + this.layout.addPane(GridLayout_Enum.BODY, pagePart); break; } case GridLayout_Enum.FOOTER: { - footer = new ClientUI.controls.grid.GridFooter($(item.ref), grid); - layout.addPane(GridLayout_Enum.FOOTER, footer); + pagePart = new ClientUI.controls.grid.GridFooter($(item.ref), grid); + this.layout.addPane(GridLayout_Enum.FOOTER, pagePart); break; } - } - }); + } + } this.currentScrollPos = 0; this.controlCreated = true; Modified: trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridBody.js =================================================================== --- trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridBody.js 2007-06-26 16:25:12 UTC (rev 1328) +++ trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridBody.js 2007-06-26 17:26:16 UTC (rev 1329) @@ -53,7 +53,6 @@ this.createControl(template); this.registerEvents(); - this.updateLayout(); }, registerEvents: function() { Event.observe(this.scrollBox.eventHScroll, "grid body hscroll", this._eventOnHScroll); @@ -177,17 +176,17 @@ } var columns = this.grid.getHeader().getColumns(); - var i=0; - var cols = $A(this.templFrozen.getElement().getElementsByTagName("col")); - cols.each(function(col) { - columns[i].bodyCol = $(col); - i++; - }); - cols = $A(this.templNormal.getElement().getElementsByTagName("col")); - cols.each(function(col) { - columns[i].bodyCol = $(col); - i++; - }); + var i=0, j=0; + var cols = this.templFrozen.getElement().getElementsByTagName("col"); + for(i=0; i<cols.length; i++) { + columns[j].bodyCol = $(cols[i]); + j++; + } + cols = this.templNormal.getElement().getElementsByTagName("col"); + for(i=0; i<cols.length; i++) { + columns[j].bodyCol = $(cols[i]); + j++; + } this.rowsCount = Math.min(templNormal.rows.length, this.grid.dataModel.getCount()); var cell = templNormal.rows[0].cells[0]; Modified: trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridFooter.js =================================================================== --- trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridFooter.js 2007-06-26 16:25:12 UTC (rev 1328) +++ trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridFooter.js 2007-06-26 17:26:16 UTC (rev 1329) @@ -43,7 +43,6 @@ this.setHeight(this.defaultHeight); this.setWidth(this.defaultWidth); this.controlCreated = true; - this.updateLayout(); }, parseTemplate: function(template) { if(!template) { Modified: trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridHeader.js =================================================================== --- trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridHeader.js 2007-06-26 16:25:12 UTC (rev 1328) +++ trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridHeader.js 2007-06-26 17:26:16 UTC (rev 1329) @@ -62,7 +62,6 @@ this.setHeight(this.defaultHeight); this.setWidth(this.defaultWidth); this.controlCreated = true; - this.updateLayout(); }, parseTemplate: function(template) { if(!template) { @@ -119,23 +118,26 @@ this.helpObj = new ClientUI.common.box.Box(this.frozenContentBox.getElement(), null, true); - var columns = []; + var fcount = this.headerFrozenRow.getElement().rows[0].cells.length; + var ncount = this.headerRow.getElement().rows[0].cells.length; + var columns = new Array(fcount + ncount); var defaultWidth = 0; var defaultHeight = 0; var eventCellMouseDown = this.eventCellMouseDown.bind(this); // Get columns information - var i = 0, h, j=0; - var cols = $A(this.headerFrozenRow.getElement().getElementsByTagName("col")); - var cells = $A(this.headerFrozenRow.getElement().rows[0].cells); - var ids = this.grid.options.ids; - cells.each(function(cell) { - columns[i] = { + var i = 0, h, j=0, cell; + var cols = this.headerFrozenRow.getElement().getElementsByTagName("col"); + var cells = this.headerFrozenRow.getElement().rows[0].cells; + var ids = this.grid.options.ids; + var count = cells.length; + for(i=0; i<count; i++) { + cell = cells[i]; + columns[j] = { columnId: ids[i], - col: $(cols[j]), - width: parseInt(cols[j].width), //Element.getWidth(cell), - innerHTML: cell.innerHTML, + col: cols[i], + width: parseInt(cols[i].width), styleClass: cell.className, id: cell.id, align: cell.align, @@ -148,30 +150,44 @@ sorted: Validators.getBoolean(cell.getAttribute("sorted"), "desc") }; - if(columns[i].sortable) + if(columns[j].sortable) Event.observe(cell, 'click', eventCellMouseDown); h = Element.getHeight(cell); if(h > defaultHeight) defaultHeight = h; - defaultWidth += columns[i].width; - columns[i].object = new ClientUI.common.box.InlineBox(cell, null, true); - columns[i].sortDesc = document.getElementsByClassName("sort-desc", cell)[0]; - columns[i].sortAsc = document.getElementsByClassName("sort-asc", cell)[0]; - if(ClientUILib.isIE && columns[i].sortDesc) { - Element.setStyle(columns[i].sortDesc, {left: "-10px"}); - Element.setStyle(columns[i].sortAsc, {left: "-10px"}); + defaultWidth += columns[j].width; + columns[j].object = new ClientUI.common.box.InlineBox(cell, null, true); + + var details = this._getCellElements(cell); + // separator + columns[j].sep = new ClientUI.common.box.InlineBox(details[0], null, true); + columns[j].sep.getElement().columnIndex = j; + if(!columns[j].fixedWidth) { + Event.observe(columns[j].sep.getElement(), 'dblclick', this.eventSepDblClick); + Event.observe(columns[j].sep.getElement(), 'mousedown', this.eventSepMouseDown); + } + else { + sep.setStyle({cursor: 'auto'}); } - i++;j++; - }); + // sort icons + columns[j].sortDesc = details[1]; + columns[j].sortAsc = details[2]; + if(ClientUILib.isIE && columns[j].sortDesc) { + Element.setStyle(columns[j].sortDesc, {left: "-10px"}); + Element.setStyle(columns[j].sortAsc, {left: "-10px"}); + } + j++; + } - j=0; - cols = $A(this.headerRow.getElement().getElementsByTagName("col")); - cells = $A(this.headerRow.getElement().rows[0].cells); - cells.each(function(cell) { - columns[i] = { + cols = this.headerRow.getElement().getElementsByTagName("col"); + cells = this.headerRow.getElement().rows[0].cells; + count = cells.length; + for(i=0; i<count; i++) { + cell = cells[i]; + + columns[j] = { columnId: ids[i], - col: $(cols[j]), - width: parseInt(cols[j].width), //Element.getWidth(cell), - innerHTML: cell.innerHTML, + col: cols[i], + width: parseInt(cols[i].width), styleClass: cell.className, id: cell.id, align: cell.align, @@ -184,20 +200,33 @@ sorted: Validators.getBoolean(cell.getAttribute("sorted"), "desc") }; - if(columns[i].sortable) + if(columns[j].sortable) Event.observe(cell, 'click', eventCellMouseDown); h = Element.getHeight(cell); if(h > defaultHeight) defaultHeight = h; - defaultWidth += columns[i].width; - columns[i].object = new ClientUI.common.box.InlineBox(cell, null, true); - columns[i].sortDesc = document.getElementsByClassName("sort-desc", cell)[0]; - columns[i].sortAsc = document.getElementsByClassName("sort-asc", cell)[0]; - if(ClientUILib.isIE && columns[i].sortDesc) { - Element.setStyle(columns[i].sortDesc, {left: "-10px"}); - Element.setStyle(columns[i].sortAsc, {left: "-10px"}); + defaultWidth += columns[j].width; + columns[j].object = new ClientUI.common.box.InlineBox(cell, null, true); + + var details = this._getCellElements(cell); + // separator + columns[j].sep = new ClientUI.common.box.InlineBox(details[0], null, true); + columns[j].sep.getElement().columnIndex = j; + if(!columns[j].fixedWidth) { + Event.observe(columns[j].sep.getElement(), 'dblclick', this.eventSepDblClick); + Event.observe(columns[j].sep.getElement(), 'mousedown', this.eventSepMouseDown); + } + else { + sep.setStyle({cursor: 'auto'}); } - i++;j++; - }); + // sort icons + columns[j].sortDesc = details[1]; + columns[j].sortAsc = details[2]; + if(ClientUILib.isIE && columns[j].sortDesc) { + Element.setStyle(columns[j].sortDesc, {left: "-10px"}); + Element.setStyle(columns[j].sortAsc, {left: "-10px"}); + } + j++; + } this._columns = columns; this.defaultHeight = defaultHeight; @@ -207,21 +236,6 @@ this.defaultHeight -= this.getBorderWidth("tb") + this.getPadding("tb"); } - var sep, column; - var seps = document.getElementsByClassName("ClientUI_Grid_HSep", this.getElement()); - for(i = 0; i<seps.length; i++) { - sep = seps[i]; - column = parseInt(sep.getAttribute("column")); - this._columns[column].sep = new ClientUI.common.box.InlineBox(sep, null, true); - sep.columnIndex = column; - if(!this._columns[column].fixedWidth) { - Event.observe(sep, 'dblclick', this.eventSepDblClick); - Event.observe(sep, 'mousedown', this.eventSepMouseDown); - } - else { - sep.setStyle({cursor: 'auto'}); - } - } this.agjustSeparators(); if(ClientUILib.isIE) { @@ -233,6 +247,28 @@ return true; }, + _getCellElements: function(cell) { + var details = new Array(3); + var spans = cell.getElementsByTagName("span"); + var count = spans ? spans.length : 0; + var el, className; + for(var i=0; i<count; i++) { + el = spans[i]; + className = el.className; + if(className && className.length>0) { + if(className.indexOf("ClientUI_Grid_HSep")>=0) { + details[0] = el; + } + else if(className.indexOf("sort-desc")>=0) { + details[1] = el; + } + else if(className.indexOf("sort-asc")>=0) { + details[2] = el; + } + } + } + return details; + }, agjustSeparators: function() { var offset = 0; var fcnt = this.headerFrozenRow.getElement().rows[0].cells.length;