projects / roojs1 / blob
? search:


c999d3c4f52eef774319092925bb0385b3268690
[roojs1] / 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     </span><span class="jsdoc-var">getId </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
101         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.grid.id</span><span class="jsdoc-syntax">;
102     },
103
104     </span><span class="jsdoc-comment">/**
105      * Returns the grid for this panel
106      * @return {Roo.bootstrap.Table} 
107      */
108     </span><span class="jsdoc-var">getGrid </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
109         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.grid</span><span class="jsdoc-syntax">;
110     },
111
112     </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">){
113         </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">)){
114             </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">;
115             </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">);
116             </span><span class="jsdoc-comment">// tfoot is not a footer?
117
118
119             </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">();
120             </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">);
121
122             </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">();
123             </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">();
124             </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">();
125
126             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tbf</span><span class="jsdoc-syntax">) {
127                 </span><span class="jsdoc-var">size.height </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">tbf.getHeight</span><span class="jsdoc-syntax">();
128             }
129             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">thd</span><span class="jsdoc-syntax">) {
130                 </span><span class="jsdoc-var">size.height </span><span class="jsdoc-syntax">-= </span><span class="jsdoc-var">thd.getHeight</span><span class="jsdoc-syntax">();
131             }
132
133             </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">);
134             </span><span class="jsdoc-comment">// this is for the account management tab -seems to work there.
135             </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">();
136             </span><span class="jsdoc-comment">//if (tbd) {
137             //    tbd.setSize(size.width, size.height - thd.getHeight());
138             //}
139
140             </span><span class="jsdoc-var">grid.autoSize</span><span class="jsdoc-syntax">();
141         }
142     },
143
144
145
146     </span><span class="jsdoc-var">beforeSlide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
147         </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">();
148     },
149
150     </span><span class="jsdoc-var">afterSlide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
151         </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">();
152     },
153
154     </span><span class="jsdoc-var">destroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
155         </span><span class="jsdoc-var">this.grid.destroy</span><span class="jsdoc-syntax">();
156         </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.grid</span><span class="jsdoc-syntax">;
157         </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">);
158     }
159 });
160 </span></code></body></html>
RooJS - Version 1