From 3f8dbc62e9681a41e02c9ebfa37691abda0eaea8 Mon Sep 17 00:00:00 2001
From: Alan Knowles <alan@roojs.com>
Date: Mon, 26 Jul 2021 12:09:47 +0800
Subject: [PATCH] Roo/bootstrap/Table.js

---
 Roo/bootstrap/Table.js | 64 +++++++++++++++++++++++++-----------------
 1 file changed, 39 insertions(+), 25 deletions(-)

diff --git a/Roo/bootstrap/Table.js b/Roo/bootstrap/Table.js
index a396806d47..862b502568 100644
--- a/Roo/bootstrap/Table.js
+++ b/Roo/bootstrap/Table.js
@@ -410,7 +410,7 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
             new Roo.grid.SplitDragZone(this, this.headEl.dom, false); // not sure what 'lockedHd is for this implementation..)
         }
         
-        
+        this.initCSS();
     },
     // Compatibility with grid - we implement all the view features at present.
     getView : function()
@@ -418,6 +418,30 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
         return this;
     },
     
+    initCSS : function()
+    {
+        var cm = this.cm, styles = [];
+        this.CSS.removeStyleSheet(this.id + '-cssrules');
+        
+        for(var i = 0, len = cm.getColumnCount(); i < len; i++) {
+            
+            var hidden = '';
+            if(cm.isHidden(i)){
+                hidden = 'display:none;';
+            }
+            var width = "width:" + (cm.getColumnWidth(i) || 100) + "px;";
+            styles.push(
+                    '#' , this.id , ' .x-col-' , i, " {\n", cm.config[i].css, width, "\n}\n",
+                    '#' , this.id , ' .x-hcol-' , i, " {\n", width, "}\n"
+            );
+        }
+        Roo.log(styles.join(''));
+        this.CSS.createStyleSheet( styles.join(''), this.id + '-cssrules');
+        
+    },
+    
+    
+    
     onContextMenu : function(e, t)
     {
         this.processEvent("contextmenu", e);
@@ -698,11 +722,7 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
                 c.colspan = config.colspan;
             }
             
-            if(typeof(config.hidden) != 'undefined' && config.hidden){
-                c.cls += ' d-none';
-            } else {
-                c.cls += ' d-block';
-            }
+            // hidden is handled by CSS now
             
             if(typeof(config.dataIndex) != 'undefined'){
                 c.sort = config.dataIndex;
@@ -726,7 +746,7 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
             }
             // this is the bit that doesnt reall work at all...
             
-            
+            /*
             
             ['xs','sm','md','lg'].map(function(size){
                 
@@ -746,6 +766,7 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
                 
                 
             });
+            */
             // at the end?
             
             c.html +=' <span class="x-grid-split x-grid-split-' + i + '"></span>';
@@ -1154,11 +1175,7 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
                 td.colspan = config.colspan;
             }
             
-            if(typeof(config.hidden) != 'undefined' && config.hidden){
-                td.cls += ' d-none';
-            } else {
-                td.cls += ' d-block';
-            }
+            
             
             if(typeof(config.align) != 'undefined' && config.align.length){
                 td.style += ' text-align:' + config.align + ';';
@@ -1393,16 +1410,18 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
     {
         this.userResized = true;
         
-        var cm = this.grid.colModel;
+        var cm = this.colModel;
         
         cm.setColumnWidth(i, w, true);
-        var cid = cm.getColumnId(i);
-        this.css.updateRule(this.colSelector + this.idToCssName(cid), "width", (w-this.borderWidth) + "px");
-        this.css.updateRule(this.hdSelector + this.idToCssName(cid), "width", (w-this.borderWidth) + "px");
+        //var cid = cm.getColumnId(i); << not used in this version?
+        Roo.log(['#' + this.id + ' .x-col-' + i, "width", w + "px"]);
+        
+        this.CSS.updateRule( '#' + this.id + ' .x-col-' + i, "width", w + "px");
+        this.CSS.updateRule('#' + this.id + ' .x-hcol-' + i, "width", w + "px");
         
         //this.updateSplitters();
         //this.layout(); << ??
-        this.grid.fireEvent("columnresize", i, w);
+        this.fireEvent("columnresize", i, w);
     },
     onHeaderChange : function()
     {
@@ -1427,16 +1446,11 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
         var thSelector = '#' + this.id + ' .x-hcol-' + colIndex;
         var tdSelector = '#' + this.id + ' .x-col-' + colIndex;
         
-        //this.CSS.updateRule(thSelector, "display", "");
-        var cols = this.headEl.select('th', true).elements;
-        if (typeof(cols[colIndex]) != 'undefined') {
-            cols[colIndex].removeClass(['d-none', 'd-block']);
-            cols[colIndex].addClass( hidden ? 'd-none' : 'd-block');
-        }
+        this.CSS.updateRule(thSelector, "display", "");
         this.CSS.updateRule(tdSelector, "display", "");
         
         if(hidden){
-          //  this.CSS.updateRule(thSelector, "display", "none");
+            this.CSS.updateRule(thSelector, "display", "none");
             this.CSS.updateRule(tdSelector, "display", "none");
         }
         
@@ -1517,4 +1531,4 @@ Roo.bootstrap.Table.cellRE = /(?:.*?)x-grid-(?:hd|cell|split)-([\d]+)(?:.*?)/;
  * @depricated
 */
 Roo.bootstrap.Table.AbstractSelectionModel = Roo.grid.AbstractSelectionModel;
-Roo.bootstrap.Table.RowSelectionModel = Roo.grid.RowSelectionModel;
\ No newline at end of file
+Roo.bootstrap.Table.RowSelectionModel = Roo.grid.RowSelectionModel;
-- 
2.39.2