frameworks/uki/src/uki-view/view/table/column.js in uki-1.0.0 vs frameworks/uki/src/uki-view/view/table/column.js in uki-1.0.1

@@ -1,96 +1,118 @@
 uki.view.table.Column = uki.newClass(uki.view.Observable, new function() {
-    var proto = this;
-    
-    proto._width = 100;
-    proto._offset = 0;
-    proto._position = 0;
-    proto._minWidth = 40;
-    proto._css = 'overflow:hidden;float:left;font-size:11px;line-height:11px;white-space:nowrap;text-overflow:ellipsis;';
-    proto._inset = new Inset(3, 5);
+    this._width = 100;
+    this._offset = 0;
+    this._position = 0;
+    this._minWidth = 0;
+    this._maxWidth = 0;
+    this._css = 'float:left;white-space:nowrap;text-overflow:ellipsis;';
+    this._inset = new Inset(3, 5);
 
-    proto.init = function() {};
+    this.init = function() {};
     
-    uki.addProps(proto, ['position', 'css', 'formatter', 'label', 'resizable', 'maxWidth', 'minWidth']);
+    uki.addProps(this, ['position', 'css', 'formatter', 'label', 'resizable', 'maxWidth', 'minWidth', 'maxWidth']);
     
+    this.template = function(v) {
+        if (v === undefined) return this._template = this._template || uki.theme.template('table-cell');
+        this._template = v;
+        return this;
+    };
+    
+    this.headerTemplate = function(v) {
+        if (v === undefined) return this._headerTemplate = this._headerTemplate || uki.theme.template('table-header-cell');
+        this._headerTemplate = v;
+        return this;
+    };
+    
     /**
      * @fires event:beforeResize
      * @fires event:resize
      */
-    proto.width = uki.newProp('_width', function(w) {
+    this.width = uki.newProp('_width', function(w) {
+        var e = {
+            oldWidth: this._width,
+            source: this
+        };
         this._width = this._normailizeWidth(w);
-        this.trigger('beforeResize', {source: this});
-        if (this._stylesheet) {
+        e.newWidth = this._width;
+        this.trigger('beforeResize', e);
+        if (this._stylesheet && e.newWidth != e.oldWidth) {
             var rules = this._stylesheet.styleSheet ? this._stylesheet.styleSheet.rules : this._stylesheet.sheet.cssRules;
             rules[0].style.width = this._clientWidth() + PX;
         }
-        this.trigger('resize', {source: this});
+        this.trigger('resize', e);
     });
     
-    proto._bindToDom = uki.F;
+    this._bindToDom = uki.F;
     
-    proto._normailizeWidth = function(w) {
+    this._normailizeWidth = function(w) {
         if (this._maxWidth) w = MIN(this._maxWidth, w);
         if (this._minWidth) w = MAX(this._minWidth, w);
         return w;
     };
     
-    proto.inset = uki.newProp('_inset', function(i) {
+    this.inset = uki.newProp('_inset', function(i) {
         this._inset = Inset.create(i);
     });
     
-    proto.render = function(row, rect, i) {
-        if (!this._template) this._template = this._buildTemplate(rect);
-        this._template[1] = this._formatter ? this._formatter(row[this._position], row) : row[this._position];
-        return this._template.join('')
+    this.render = function(row, rect, i) {
+        this._prerenderedTemplate || this._prerenderTemplate(rect);
+        this._prerenderedTemplate[1] = this._formatter ? this._formatter(row[this._position], row) : row[this._position];
+        return this._prerenderedTemplate.join('');
     };
     
-    proto.renderHeader = function(height) {
-        if (!this._headerTemplate) this._headerTemplate = this._buildHeaderTemplate(height);
-        var template = this._headerTemplate;
-        template[1] = this.label();
-        return template.join('');
+    this.appendResizer = function(dom, height) {
+        var resizer = uki.theme.dom('resizer', height);
+        dom.appendChild(resizer);
+        return resizer;
     };
     
-    proto._clientWidth = function() {
+    this.renderHeader = function(height) {
+        this._className || this._initStylesheet();
+        var x = this.headerTemplate().render({
+            data: '<div style="overflow:hidden;text-overflow:ellipsis;">' + this.label() + '</div>',
+            style: this._cellStyle(uki.dom.offset.boxModel ? height - 1 : height),
+            className: this._className
+        });
+        return x;
+    };
+    
+    this._prerenderTemplate = function(rect) {
+        this._className || this._initStylesheet();
+        this._prerenderedTemplate = this.template().render({
+            data: '\u0001\u0001',
+            style: 'overflow:hidden;' + this._cellStyle(rect.height),
+            className: this._className
+        }).split('\u0001');
+    };
+    
+    this._cellPadding = function() {
+        var inset = this._inset;
+        return ['padding:', inset.top, 'px ', inset.right, 'px ', inset.bottom, 'px ', inset.left, 'px;'].join('');
+    };
+    
+    this._cellStyle = function(height) {
+        var h = 'height:' + (height - (uki.dom.offset.boxModel ? this._inset.height() : 0)) + 'px;';
+        return this._css + this._cellPadding() + ';' + h;
+    };
+    
+    this._clientWidth = function() {
         return this._width - (uki.dom.offset.boxModel ? this._inset.width() + 1 : 0);
     };
     
-    proto._initStylesheet = function() {
-        uki.dom.offset.initializeBoxModel();
+    this._initStylesheet = function() {
         if (!this._className) {
+            uki.dom.offset.initializeBoxModel();
             this._className = 'uki-table-column-' + (++uki.dom.guid);
             var css = '.' + this._className + ' {width:' + this._clientWidth() + 'px;}';
             this._stylesheet = uki.dom.createStylesheet(css);
         }
     };
-    
-    proto._buildHeaderTemplate = function(headerHeight) {
-        this._initStylesheet();
-        var border = 'border:1px solid #CCC;border-top: none;border-left:none;',
-            inset  = this._inset,
-            padding = ['padding:', inset.top, 'px ', inset.right, 'px ', inset.bottom, 'px ', inset.left, 'px;'].join(''),
-            height = 'height:' + (headerHeight - (uki.dom.offset.boxModel ? inset.height() + 1 : 0)) + 'px;',
-            tagOpening = ['<div style="position:relative;', border, padding, height, this._css, '" class="',this._className,'">'].join('');
-        
-        return [tagOpening, '', '</div>'];
-    };
-    
-    proto._buildTemplate = function(rect) {
-        this._initStylesheet();
-        var inset = this._inset,
-            border = 'border-right:1px solid #CCC;',
-            padding = ['padding:', inset.top, 'px ', inset.right, 'px ', inset.bottom, 'px ', inset.left, 'px;'].join(''),
-            height = 'height:' + (rect.height - (uki.dom.offset.boxModel ? inset.height() : 0)) + 'px;',
-            tagOpening = ['<div style="', border, padding, height, this._css, '" class="',this._className,'">'].join('');
-        return [tagOpening, '', '</div>'];
-    };
 });
 
 uki.view.table.NumberColumn = uki.newClass(uki.view.table.Column, new function() {
-    var Base = uki.view.table.Column.prototype,
-        proto = this;
+    var Base = uki.view.table.Column.prototype;
 
-    proto._css = Base._css + 'text-align:right;';
+    this._css = Base._css + 'text-align:right;';
 });
 
 uki.view.table.CustomColumn = uki.view.table.Column;
\ No newline at end of file