From c1d3f4196483b0a8de37cbeb59bd439696f26376 Mon Sep 17 00:00:00 2001 From: Andrew Hyland Date: Wed, 2 Sep 2009 05:34:10 +0000 Subject: [PATCH] #34 - Fixed ColumnTreeView's columns and made columns resize when window resizes. --- .../content/annotations_view_init.js | 87 +++++++++++++++---- oaiorebuilder/content/loreui.css | 23 ++++- 2 files changed, 90 insertions(+), 20 deletions(-) diff --git a/oaiorebuilder/content/annotations_view_init.js b/oaiorebuilder/content/annotations_view_init.js index 9b23e9c7..3ed1725b 100644 --- a/oaiorebuilder/content/annotations_view_init.js +++ b/oaiorebuilder/content/annotations_view_init.js @@ -13,36 +13,75 @@ lines : false, borderWidth : Ext.isBorderBox ? 0 : 2, // the combined left/right border for each cell cls : 'x-column-tree', - + expandBefore: true, + scrollOffset:19, + onRender : function(){ lore.ui.anno.LOREColumnTree.superclass.onRender.apply(this, arguments); this.headers = this.header.createChild({cls:'x-tree-headers'}); var cols = this.columns, c; var totalWidth = 0; - var scrollOffset = 19; // similar to Ext.grid.GridView default + //// prevent floats from wrapping when clipped for(var i = 0, len = cols.length; i < len; i++){ c = cols[i]; totalWidth += c.width; + this.headers.createChild({ cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''), cn: { cls:'x-tree-hd-text', html: c.header }, - style:'width:'+(c.width-this.borderWidth)+'px;' + style:'width:'+(c.width-this.borderWidth) +'px;' }); + } this.headers.createChild({cls:'x-clear'}); - //this.headers.setWidth(totalWidth+scrollOffset); - //this.innerCt.setWidth(totalWidth); - //TODO: Fix widths - this.headers.setWidth(this.width+scrollOffset); - this.innerCt.setWidth(this.width); - - } + + + this.headers.setWidth(totalWidth+ this.borderWidth); + this.innerCt.setWidth(totalWidth); + this.headers.totalWidth = totalWidth; + }, + + onResize : function(cmp, bWidth, bHeight, width, height) { + var newwidth = this.getWidth(); + lore.ui.anno.LOREColumnTree.superclass.onResize.apply(this, arguments); + + var cols = this.columns; + var index = this.expandBefore ? 0: cols.length-1; + var c = cols[index]; + var totalWidth = this.headers.totalWidth ; + c.width = c.width + ( newwidth - totalWidth); + this.headers.dom.childNodes[index].style.width = c.width; + this.headers.totalWidth = totalWidth = newwidth; + + this.headers.setWidth(totalWidth + this.borderWidth); + this.innerCt.setWidth(totalWidth); + + try { + var f = function (node) { + if (node.isExpanded()) { + var n = node.childNodes; + for (var i = 0; i < n.length; i++) { + n[i].ui.refresh(n[i]); + f(n[i]); + } + } + } + + f(this.getRootNode()); + + + + } catch(e){ + lore.debug.anno(e,e); + } + + } }); lore.ui.anno.LOREColumnTreeNode = function(attributes){ @@ -52,6 +91,7 @@ this.bfooter = attributes.bfooter || ''; this.links = attributes.links || []; this.nodeType = attributes.nodeType; + lore.ui.anno.LOREColumnTreeNode.superclass.constructor.call(this, attributes); } @@ -108,6 +148,15 @@ } }, + refresh: function (n) { + var t = n.getOwnerTree(); + var cols = t.columns; + for (var i =0; i < cols.length; i++ ){ + this.columnNodes[i].style.width = cols[i].width - t.borderWidth - ( i == (cols.length-1)? t.scrollOffset: 0); + } + this.bodyNode.style.width= cols[0].width- t.borderWidth -(32 + n.getDepth() * 16); + }, + renderElements: function(n, a, targetNode, bulkRender){ // add some indent caching, this helps performance when rendering a large tree this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : ''; @@ -117,6 +166,7 @@ var bw = t.borderWidth; var c = cols[0]; + var cb = typeof a.checked == 'boolean'; var href = a.href ? a.href : Ext.isGecko ? "" : "#"; @@ -132,17 +182,17 @@ '', '', - '
', n.title, '
', (n.bheader ? '
' + n.bheader + '
':''), - '
', n.text, '
', (n.bfooter ? '
' + n.bfooter + '
': ''), '
']; + '
', n.title, '
', (n.bheader ? '
' + n.bheader + '
':''), + '
', n.text, '
', (n.bfooter ? '
' + n.bfooter + '
': ''), '
']; for(var i = 1, len = cols.length; i < len; i++){ c = cols[i]; - buf.push('
', + buf.push('
', // '
','blah'(c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"
", - '
',linksBuf,"
", - "
"); - } + ( (n.columns && n.columns[i]) ? '
' + n.columns.text + '
':''), + (c.links ? '
' + linksBuf + "
":''),"
"); + } buf.push( '
', '', @@ -158,10 +208,12 @@ this.elNode = this.wrap.childNodes[0]; this.ctNode = this.wrap.childNodes[1]; + this.columnNodes = this.elNode.childNodes; var cs = this.elNode.firstChild.childNodes; this.indentNode = cs[0]; this.ecNode = cs[1]; this.iconNode = cs[2]; + this.bodyNode = cs[3]; this.titleNode = cs[3].firstChild; this.bHeaderNode = this.titleNode.nextSibling; this.anchor = this.textNode = this.bHeaderNode.nextSibling; @@ -515,7 +567,8 @@ loreuiannotreeandeditor = function (model) { width: 280 }, { header: "Views", - width: 66 + width: 80, + links:true }], header: true, rootVisible: false, diff --git a/oaiorebuilder/content/loreui.css b/oaiorebuilder/content/loreui.css index 7b4ee884..f0193b7d 100644 --- a/oaiorebuilder/content/loreui.css +++ b/oaiorebuilder/content/loreui.css @@ -312,14 +312,18 @@ color:#000; } .x-tree-col { - /*overflow:hidden;*/ + float:left; padding:0 1px; zoom:1; whitespace:normal; } -.x-tree-col-text, .x-tree-hd-text { +.x-tree-col-div-general { + white-space: normal; + width: 100%; +} +.x-tree-col-text { color:#888888; /* overflow:hidden; @@ -329,11 +333,24 @@ */ padding:3px 3px 3px 5px; - white-space: normal; + font:normal 11px arial, tahoma, helvetica, sans-serif; } +.x-tree-hd-text { + color:#888888; + + overflow:hidden; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + white-space: nowrap; + + padding:3px 3px 3px 5px; + white-space: normal; + + font:normal 11px arial, tahoma, helvetica, sans-serif; +} /* * Any images displayed in the column text are shrunk to thumbnail size */