git.roojs.org Git - roojs1/blob - Roo/bootstrap/panel/Grid.js

   1
   2 /**
   3  * @class Roo.bootstrap.panel.Grid
   4  * @extends Roo.bootstrap.panel.Content
   5  * @constructor
   6  * Create a new GridPanel.
   7  * @cfg {Roo.bootstrap.Table} grid The grid for this panel
   8  * @cfg {Roo.bootstrap.nav.Simplebar} toolbar the toolbar at the top of the grid.
   9  * @param {Object} config A the config object
  10
  11  */
  12
  13
  14
  15 Roo.bootstrap.panel.Grid = function(config)
  16 {
  17
  18
  19     this.wrapper = Roo.DomHelper.append(document.body, // wrapper for IE7 strict & safari scroll issue
  20         {tag: "div", cls: "roo-layout-grid-wrapper roo-layout-inactive-content"}, true);
  21
  22     config.el = this.wrapper;
  23     //this.el = this.wrapper;
  24
  25       if (config.container) {
  26         // ctor'ed from a Border/panel.grid
  27
  28
  29         this.wrapper.setStyle("overflow", "hidden");
  30         this.wrapper.addClass('roo-grid-container');
  31
  32     }
  33
  34
  35     if(config.toolbar){
  36         var tool_el = this.wrapper.createChild();
  37         this.toolbar = Roo.factory(config.toolbar);
  38         var ti = [];
  39         if (config.toolbar.items) {
  40             ti = config.toolbar.items ;
  41             delete config.toolbar.items ;
  42         }
  43
  44         var nitems = [];
  45         this.toolbar.render(tool_el);
  46         for(var i =0;i < ti.length;i++) {
  47           //  Roo.log(['add child', items[i]]);
  48             nitems.push(this.toolbar.addxtype(Roo.apply({}, ti[i])));
  49         }
  50         this.toolbar.items = nitems;
  51
  52         delete config.toolbar;
  53     }
  54
  55     Roo.bootstrap.panel.Grid.superclass.constructor.call(this, config);
  56     config.grid.scrollBody = true;;
  57     config.grid.monitorWindowResize = false; // turn off autosizing
  58     config.grid.autoHeight = false;
  59     config.grid.autoWidth = false;
  60
  61     this.grid = new config.grid.xns[config.grid.xtype](config.grid);
  62
  63     if (config.background) {
  64         // render grid on panel activation (if panel background)
  65         this.on('activate', function(gp) {
  66             if (!gp.grid.rendered) {
  67                 gp.grid.render(this.wrapper);
  68                 gp.grid.getGridEl().replaceClass("roo-layout-inactive-content", "roo-layout-component-panel");
  69             }
  70         });
  71
  72     } else {
  73         this.grid.render(this.wrapper);
  74         this.grid.getGridEl().replaceClass("roo-layout-inactive-content", "roo-layout-component-panel");
  75
  76     }
  77     //this.wrapper.dom.appendChild(config.grid.getGridEl().dom);
  78     // ??? needed ??? config.el = this.wrapper;
  79
  80
  81
  82
  83     // xtype created footer. - not sure if will work as we normally have to render first..
  84     if (this.footer && !this.footer.el && this.footer.xtype) {
  85
  86         var ctr = this.grid.getView().getFooterPanel(true);
  87         this.footer.dataSource = this.grid.dataSource;
  88         this.footer = Roo.factory(this.footer, Roo);
  89         this.footer.render(ctr);
  90
  91     }
  92
  93
  94
  95
  96
  97 };
  98
  99 Roo.extend(Roo.bootstrap.panel.Grid, Roo.bootstrap.panel.Content,
 100 {
 101     // private
 102     is_resizing : false,
 103
 104     getId : function(){
 105         return this.grid.id;
 106     },
 107
 108     /**
 109      * Returns the grid for this panel
 110      * @return {Roo.bootstrap.Table}
 111      */
 112     getGrid : function(){
 113         return this.grid;
 114     },
 115
 116     setSize : function(width, height)
 117     {
 118         if (this.is_resizing) {
 119             return;
 120
 121         }
 122         this.is_resizing = true;
 123         if(!this.ignoreResize(width, height)){
 124             var grid = this.grid;
 125             var size = this.adjustForComponents(width, height);
 126             // tfoot is not a footer?
 127
 128
 129             var gridel = grid.getGridEl();
 130             gridel.setSize(size.width, size.height);
 131
 132             var tbd = grid.getGridEl().select('tbody', true).first();
 133             var thd = grid.getGridEl().select('thead',true).first();
 134             var tbf= grid.getGridEl().select('tfoot', true).first();
 135
 136             if (tbf) {
 137                 size.height -= tbf.getHeight();
 138             }
 139             if (thd) {
 140                 size.height -= thd.getHeight();
 141             }
 142
 143             tbd.setSize(size.width, size.height );
 144             // this is for the account management tab -seems to work there.
 145             var thd = grid.getGridEl().select('thead',true).first();
 146             //if (tbd) {
 147             //    tbd.setSize(size.width, size.height - thd.getHeight());
 148             //}
 149
 150             grid.autoSize();
 151         }
 152         this.is_resizing = false;
 153     },
 154
 155
 156
 157     beforeSlide : function(){
 158         this.grid.getView().scroller.clip();
 159     },
 160
 161     afterSlide : function(){
 162         this.grid.getView().scroller.unclip();
 163     },
 164
 165     destroy : function(){
 166         this.grid.destroy();
 167         delete this.grid;
 168         Roo.bootstrap.panel.Grid.superclass.destroy.call(this);
 169     }
 170 });