Fix #6864 - dynamicall adding columns

[roojs1] / Roo / bootstrap / Table.js

diff --git a/Roo/bootstrap/Table.js b/Roo/bootstrap/Table.js
index 5dc5426..360b554 100644 (file)
--- a/Roo/bootstrap/Table.js
+++ b/Roo/bootstrap/Table.js
@@ -320,11 +320,10 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
         
         
         
-        var _this = this;
         
         Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
-            e.on('click', _this.sort, _this);
-        });
+            e.on('click', this.sort, this);
+        }, this);
         
         this.mainBody.on("click", this.onClick, this);
         this.mainBody.on("dblclick", this.onDblClick, this);
@@ -551,7 +550,7 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
         var sort = col.attr('sort');
         var dir = 'ASC';
         
-        if(col.select('i', true).first().hasClass('glyphicon-arrow-up')){
+        if(col.select('i', true).first().hasClass('fa-arrow-up')){
             dir = 'DESC';
         }
         
@@ -584,14 +583,21 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
                 tag: 'th',
                 cls : 'x-hcol-' + i,
                 style : '',
+                
                 html: cm.getColumnHeader(i)
             };
             
+            var tooltip = cm.getColumnTooltip(i);
+            if (tooltip) {
+                c.tooltip = tooltip;
+            }
+            
+            
             var hh = '';
             
             if(typeof(config.sortable) != 'undefined' && config.sortable){
                 c.cls = 'sortable';
-                c.html = '<i class="glyphicon"></i>' + c.html;
+                c.html = '<i class="fa"></i>' + c.html;
             }
             
             // could use BS4 hidden-..-down 
@@ -726,15 +732,15 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
         var ds = this.store;
         
         Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
-            e.select('i', true).removeClass(['glyphicon-arrow-up', 'glyphicon-arrow-down']);
+            e.select('i', true).removeClass(['fa-arrow-up', 'fa-arrow-down']);
             if (_this.store.sortInfo) {
                     
                 if(e.hasClass('sortable') && e.attr('sort') == _this.store.sortInfo.field && _this.store.sortInfo.direction.toUpperCase() == 'ASC'){
-                    e.select('i', true).addClass(['glyphicon-arrow-up']);
+                    e.select('i', true).addClass(['fa-arrow-up']);
                 }
                 
                 if(e.hasClass('sortable') && e.attr('sort') == _this.store.sortInfo.field && _this.store.sortInfo.direction.toUpperCase() == 'DESC'){
-                    e.select('i', true).addClass(['glyphicon-arrow-down']);
+                    e.select('i', true).addClass(['fa-arrow-down']);
                 }
             }
         });
@@ -932,6 +938,9 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
             
             var td = {
                 tag: 'td',
+                // this might end up displaying HTML?
+                // this is too messy... - better to only do it on columsn you know are going to be too long
+                //tooltip : (typeof(value) === 'object') ? '' : value,
                 cls : rowcfg.rowClass + ' x-col-' + i,
                 style: '',
                 html: (typeof(value) === 'object') ? '' : value
@@ -1158,6 +1167,12 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
         
         this.mainHead.remove();
         this.mainHead = table.createChild(header, this.mainBody, false);
+        
+        Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
+            e.on('click', this.sort, this);
+        }, this);
+        
+        
     },
     
     onHiddenChange : function(colModel, colIndex, hidden)