commit

[roojs1] / Roo / bootstrap / Table.js

diff --git a/Roo/bootstrap/Table.js b/Roo/bootstrap/Table.js
index c1b2599..88aeb7d 100644 (file)
--- a/Roo/bootstrap/Table.js
+++ b/Roo/bootstrap/Table.js
@@ -26,8 +26,9 @@
  * @cfg {boolean} hover Add hover highlighting
  * @cfg {boolean} condensed Format condensed
  * @cfg {boolean} responsive Format condensed
+ * @cfg {Boolean} loadMask (true|false) default false
  *
- 
+ * @cfg {Roo.bootstrap.PagingToolbar} footer  a paging toolbar
  
  * 
  * @constructor
@@ -44,7 +45,7 @@ Roo.bootstrap.Table = function(config){
         this.sm.xmodule = this.xmodule || false;
     }
     if (this.cm && typeof(this.cm.config) == 'undefined') {
-        this.colModel = new Roo.bootstrap.Table.ColumnModel(this.cm);
+        this.colModel = new Roo.grid.ColumnModel(this.cm);
         this.cm = this.colModel;
         this.cm.xmodule = this.xmodule || false;
     }
@@ -54,6 +55,10 @@ Roo.bootstrap.Table = function(config){
         this.ds.xmodule = this.xmodule || false;
          
     }
+    if (this.footer && this.store) {
+        this.footer.dataSource = this.ds;
+        this.footer = Roo.factory(this.footer);
+    }
 };
 
 Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
@@ -77,6 +82,7 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
     sm : false,
     cm : false,
     store : false,
+    loadMask : false,
     
     getAutoCreate : function(){
         var cfg = Roo.apply({}, Roo.bootstrap.Table.superclass.getAutoCreate.call(this));
@@ -196,10 +202,50 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
 //        this.maskEl.enableDisplayMode("block");
 //        this.maskEl.show();
         
+        this.parent().el.setStyle('position', 'relative');
+        if (this.footer) {
+            this.footer.parentId = this.id;
+            this.footer.onRender(this.el.select('tfoot tr td').first(), null);        
+        }
+        
+        
+        // mask should be using Roo.bootstrap.Mask...
+        
+        var mark = {
+            tag: "div",
+            cls:"x-dlg-mask",
+            style: "text-align:center",
+            cn: [
+                {
+                    tag: "div",
+                    style: "background-color:white;width:50%;margin:100 auto; display:none",
+                    cn: [
+                        {
+                            tag: "img",
+                            src: Roo.rootURL + '/images/ux/lightbox/loading.gif'
+                        },
+                        {
+                            tag: "span",
+                            html: "Loading"
+                        }
+                        
+                    ]
+                }
+            ]
+        }
+        this.maskEl = Roo.DomHelper.append(document.body, mark, true);
+        
+        var size = this.parent().el.getSize();
+        
+        this.maskEl.setSize(size.width, 300); // we will fix the height at the beginning...
+        
+        this.maskEl.enableDisplayMode("block");
+        
         this.store.on('load', this.onLoad, this);
         this.store.on('beforeload', this.onBeforeLoad, this);
         
-        this.store.load();
+        // load should be trigger on render..
+        //this.store.load();
         
         
         
@@ -238,6 +284,10 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
             
             var config = cm.config[i];
             
+            if(typeof(config.hidden) != 'undefined' && config.hidden){
+                continue;
+            }
+                    
             var c = {
                 tag: 'th',
                 html: cm.getColumnHeader(i)
@@ -252,7 +302,7 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
             }
             
             if(typeof(config.width) != 'undefined'){
-                c.style = 'width:' + config.width;
+                c.style = 'width:' + config.width + 'px';
             }
             
             header.cn.push(c)
@@ -275,7 +325,17 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
     {
         var footer = {
             tag: 'tfoot',
-            cn : []
+            cn : [
+                {
+                    tag: 'tr',
+                    cn : [
+                        {
+                            tag : 'td',
+                            colspan : 1
+                        }
+                    ]
+                }
+            ]
         };
         
         return footer;
@@ -303,7 +363,7 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
         var tbody = this.el.select('tbody', true).first();
         
         var renders = [];
-        
+                    
         if(this.store.getCount() > 0){
             this.store.data.each(function(d){
                 var row = {
@@ -312,8 +372,13 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
                 };
                 
                 for(var i = 0, len = cm.getColumnCount(); i < len; i++){
-                    var renderer = cm.getRenderer(i);
                     var config = cm.config[i];
+                    
+                    if(typeof(config.hidden) != 'undefined' && config.hidden){
+                        continue;
+                    }
+                    
+                    var renderer = cm.getRenderer(i);
                     var value = '';
                     var id = Roo.id();
                     
@@ -335,7 +400,7 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
                     };
                     
                     if(typeof(config.width) != 'undefined'){
-                        td.width = config.width;
+                        td.style = 'width:' +  config.width + 'px';
                     }
                     
                     row.cn.push(td);
@@ -354,10 +419,10 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
                 _this.renderColumn(r);
             })
         }
-//        
-//        if(this.loadMask){
-//            this.maskEl.hide();
-//        }
+
+        if(this.loadMask){
+            this.maskEl.hide();
+        }
     },
     
     onBeforeLoad : function()
@@ -366,9 +431,9 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
         
         this.clear();
         
-//        if(this.loadMask){
-//            this.maskEl.show();
-//        }
+        if(this.loadMask){
+            this.maskEl.show();
+        }
     },
     
     clear : function()