git.roojs.org Git - roojs1/blob - docs/src/Roo_bootstrap_panel_Grid.js.html

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