projects / roojs1 / blob
? search:


2f36942b409469bdf88d312b76154cbe664ea30e
[roojs1] / docs / src / Roo_bootstrap_Modal.js.html
1 <html><head><title>Roo/bootstrap/Modal.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 * Licence: LGPL
4 */
5
6 /**
7  * @class Roo.bootstrap.Modal
8  * @extends Roo.bootstrap.Component
9  * Bootstrap Modal class
10  * @cfg {String} title Title of dialog
11  * @cfg {String} html - the body of the dialog (for simple ones) - you can also use template..
12  * @cfg {Roo.Template} tmpl - a template with variables. to use it, add a handler in show:method  adn
13  * @cfg {Boolean} specificTitle default false
14  * @cfg {Array} buttons Array of buttons or standard button set..
15  * @cfg {String} buttonPosition (left|right|center) default right (DEPRICATED) - use mr-auto on buttons to put them on the left
16  * @cfg {Boolean} animate default true
17  * @cfg {Boolean} allow_close default true
18  * @cfg {Boolean} fitwindow default false
19  * @cfg {Number} width fixed width - usefull for chrome extension only really.
20  * @cfg {Number} height fixed height - usefull for chrome extension only really.
21  * @cfg {String} size (sm|lg) default empty
22  * @cfg {Number} max_width set the max width of modal
23  *
24  *
25  * @constructor
26  * Create a new Modal Dialog
27  * @param {Object} config The config object
28  */
29
30 </span><span class="jsdoc-var">Roo.bootstrap.Modal </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">){
31     </span><span class="jsdoc-var">Roo.bootstrap.Modal.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">);
32     </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
33         </span><span class="jsdoc-comment">// raw events
34         /**
35          * @event btnclick
36          * The raw btnclick event for the button
37          * @param {Roo.EventObject} e
38          */
39         </span><span class="jsdoc-string">&quot;btnclick&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
40         </span><span class="jsdoc-comment">/**
41          * @event resize
42          * Fire when dialog resize
43          * @param {Roo.bootstrap.Modal} this
44          * @param {Roo.EventObject} e
45          */
46         </span><span class="jsdoc-string">&quot;resize&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
47     </span><span class="jsdoc-syntax">});
48     </span><span class="jsdoc-var">this.buttons </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.buttons </span><span class="jsdoc-syntax">|| [];
49
50     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tmpl</span><span class="jsdoc-syntax">) {
51         </span><span class="jsdoc-var">this.tmpl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.factory</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tmpl</span><span class="jsdoc-syntax">);
52     }
53
54 };
55
56 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.Modal</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.Component</span><span class="jsdoc-syntax">,  {
57
58     </span><span class="jsdoc-var">title </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'test dialog'</span><span class="jsdoc-syntax">,
59
60     </span><span class="jsdoc-var">buttons </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
61
62     </span><span class="jsdoc-comment">// set on load...
63
64     </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
65
66     </span><span class="jsdoc-var">tmp</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
67
68     </span><span class="jsdoc-var">specificTitle</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
69
70     </span><span class="jsdoc-var">buttonPosition</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'right'</span><span class="jsdoc-syntax">,
71
72     </span><span class="jsdoc-var">allow_close </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
73
74     </span><span class="jsdoc-var">animate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
75
76     </span><span class="jsdoc-var">fitwindow</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
77
78      </span><span class="jsdoc-comment">// private
79     </span><span class="jsdoc-var">dialogEl</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
80     </span><span class="jsdoc-var">bodyEl</span><span class="jsdoc-syntax">:  </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
81     </span><span class="jsdoc-var">footerEl</span><span class="jsdoc-syntax">:  </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
82     </span><span class="jsdoc-var">titleEl</span><span class="jsdoc-syntax">:  </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
83     </span><span class="jsdoc-var">closeEl</span><span class="jsdoc-syntax">:  </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
84
85     </span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
86
87     </span><span class="jsdoc-var">max_width</span><span class="jsdoc-syntax">: 0,
88
89     </span><span class="jsdoc-var">max_height</span><span class="jsdoc-syntax">: 0,
90
91     </span><span class="jsdoc-var">fit_content</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
92
93     </span><span class="jsdoc-var">onRender </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">)
94     {
95         </span><span class="jsdoc-var">Roo.bootstrap.Component.superclass.onRender.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
96
97         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
98             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">({},  </span><span class="jsdoc-var">this.getAutoCreate</span><span class="jsdoc-syntax">());
99             </span><span class="jsdoc-var">cfg.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">();
100             </span><span class="jsdoc-comment">//if(!cfg.name){
101             //    cfg.name = typeof(this.name) == 'undefined' ? this.id : this.name;
102             //}
103             //if (!cfg.name.length) {
104             //    delete cfg.name;
105            // }
106             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">) {
107                 </span><span class="jsdoc-var">cfg.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">;
108             }
109             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.style</span><span class="jsdoc-syntax">) {
110                 </span><span class="jsdoc-var">cfg.style </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.style</span><span class="jsdoc-syntax">;
111             }
112             </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.createChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
113         }
114         </span><span class="jsdoc-comment">//var type = this.el.dom.type;
115
116
117         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabIndex </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
118             </span><span class="jsdoc-var">this.el.dom.setAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'tabIndex'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.tabIndex</span><span class="jsdoc-syntax">);
119         }
120
121         </span><span class="jsdoc-var">this.dialogEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.modal-dialog'</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">();
122         </span><span class="jsdoc-var">this.bodyEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.modal-body'</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-var">this.closeEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.modal-header .close'</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-var">this.headerEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.modal-header'</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         </span><span class="jsdoc-var">this.titleEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.modal-title'</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">();
126         </span><span class="jsdoc-var">this.footerEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.modal-footer'</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">();
127
128         </span><span class="jsdoc-var">this.maskEl </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-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;x-dlg-mask&quot;</span><span class="jsdoc-syntax">}, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
129
130         </span><span class="jsdoc-comment">//this.el.addClass(&quot;x-dlg-modal&quot;);
131
132         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.buttons.length</span><span class="jsdoc-syntax">) {
133             </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.buttons</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">bb</span><span class="jsdoc-syntax">) {
134                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">({}, </span><span class="jsdoc-var">bb</span><span class="jsdoc-syntax">);
135                 </span><span class="jsdoc-var">b.xns </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">b.xns </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.bootstrap</span><span class="jsdoc-syntax">;
136                 </span><span class="jsdoc-var">b.xtype </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">b.xtype </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">'Button'</span><span class="jsdoc-syntax">;
137                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b.listeners</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) {
138                     </span><span class="jsdoc-var">b.listeners </span><span class="jsdoc-syntax">= { </span><span class="jsdoc-var">click </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.onButtonClick.createDelegate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">)  };
139                 }
140
141                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">btn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.factory</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">);
142
143                 </span><span class="jsdoc-var">btn.render</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getButtonContainer</span><span class="jsdoc-syntax">());
144
145             },</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
146         }
147         </span><span class="jsdoc-comment">// render the children.
148         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">nitems </span><span class="jsdoc-syntax">= [];
149
150         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.items</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">){
151             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">items </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.items</span><span class="jsdoc-syntax">;
152             </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.items</span><span class="jsdoc-syntax">;
153
154             </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">items.length</span><span class="jsdoc-syntax">;</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
155                 </span><span class="jsdoc-var">nitems.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.addxtype</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">({}, </span><span class="jsdoc-var">items</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">])));
156             }
157         }
158
159         </span><span class="jsdoc-var">this.items </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">nitems</span><span class="jsdoc-syntax">;
160
161         </span><span class="jsdoc-comment">// where are these used - they used to be body/close/footer
162
163
164         </span><span class="jsdoc-var">this.initEvents</span><span class="jsdoc-syntax">();
165         </span><span class="jsdoc-comment">//this.el.addClass([this.fieldClass, this.cls]);
166
167     </span><span class="jsdoc-syntax">},
168
169     </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
170     {
171         </span><span class="jsdoc-comment">// we will default to modal-body-overflow - might need to remove or make optional later.
172         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">bdy </span><span class="jsdoc-syntax">= {
173                 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'modal-body enable-modal-body-overflow '</span><span class="jsdoc-syntax">,
174                 </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.html </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">''
175         </span><span class="jsdoc-syntax">};
176
177         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">title </span><span class="jsdoc-syntax">= {
178             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'h4'</span><span class="jsdoc-syntax">,
179             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'modal-title'</span><span class="jsdoc-syntax">,
180             </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.title
181         </span><span class="jsdoc-syntax">};
182
183         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.specificTitle</span><span class="jsdoc-syntax">){
184             </span><span class="jsdoc-var">title </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.title</span><span class="jsdoc-syntax">;
185
186         }
187
188         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">header </span><span class="jsdoc-syntax">= [];
189         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.allow_close </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">Roo.bootstrap.version </span><span class="jsdoc-syntax">== 3) {
190             </span><span class="jsdoc-var">header.push</span><span class="jsdoc-syntax">({
191                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'button'</span><span class="jsdoc-syntax">,
192                 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'close'</span><span class="jsdoc-syntax">,
193                 </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'&amp;times'
194             </span><span class="jsdoc-syntax">});
195         }
196
197         </span><span class="jsdoc-var">header.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">);
198
199         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.allow_close </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">Roo.bootstrap.version </span><span class="jsdoc-syntax">== 4) {
200             </span><span class="jsdoc-var">header.push</span><span class="jsdoc-syntax">({
201                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'button'</span><span class="jsdoc-syntax">,
202                 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'close'</span><span class="jsdoc-syntax">,
203                 </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'&amp;times'
204             </span><span class="jsdoc-syntax">});
205         }
206
207         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
208
209         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.size.length</span><span class="jsdoc-syntax">){
210             </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'modal-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.size</span><span class="jsdoc-syntax">;
211         }
212
213         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">footer </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.bootstrap.version </span><span class="jsdoc-syntax">== 3 ?
214             {
215                 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'modal-footer'</span><span class="jsdoc-syntax">,
216                 </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
217                     {
218                         </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
219                         </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'btn-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.buttonPosition
220                     </span><span class="jsdoc-syntax">}
221                 ]
222
223             } :
224             {  </span><span class="jsdoc-comment">// BS4 uses mr-auto on left buttons....
225                 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'modal-footer'
226             </span><span class="jsdoc-syntax">};
227
228
229
230
231
232         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">modal </span><span class="jsdoc-syntax">= {
233             </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;modal&quot;</span><span class="jsdoc-syntax">,
234              </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
235                 {
236                     </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;modal-dialog &quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">size</span><span class="jsdoc-syntax">,
237                     </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
238                         {
239                             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;modal-content&quot;</span><span class="jsdoc-syntax">,
240                             </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
241                                 {
242                                     </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'modal-header'</span><span class="jsdoc-syntax">,
243                                     </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">header
244                                 </span><span class="jsdoc-syntax">},
245                                 </span><span class="jsdoc-var">bdy</span><span class="jsdoc-syntax">,
246                                 </span><span class="jsdoc-var">footer
247                             </span><span class="jsdoc-syntax">]
248
249                         }
250                     ]
251
252                 }
253             ]
254         };
255
256         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.animate</span><span class="jsdoc-syntax">){
257             </span><span class="jsdoc-var">modal.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' fade'</span><span class="jsdoc-syntax">;
258         }
259
260         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">modal</span><span class="jsdoc-syntax">;
261
262     },
263     </span><span class="jsdoc-var">getChildContainer </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
264
265          </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.bodyEl</span><span class="jsdoc-syntax">;
266
267     },
268     </span><span class="jsdoc-var">getButtonContainer </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
269
270          </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.bootstrap.version </span><span class="jsdoc-syntax">== 4 ?
271             </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.modal-footer'</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">()
272             : </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.modal-footer div'</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">();
273
274     },
275     </span><span class="jsdoc-var">initEvents </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
276     {
277         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.allow_close</span><span class="jsdoc-syntax">) {
278             </span><span class="jsdoc-var">this.closeEl.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.hide</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
279         }
280         </span><span class="jsdoc-var">Roo.EventManager.onWindowResize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.resize</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
281
282
283     },
284
285
286     </span><span class="jsdoc-var">resize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
287     {
288         </span><span class="jsdoc-var">this.maskEl.setSize</span><span class="jsdoc-syntax">(
289             </span><span class="jsdoc-var">Roo.lib.Dom.getViewWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">),
290             </span><span class="jsdoc-var">Roo.lib.Dom.getViewHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)
291         );
292
293         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fitwindow</span><span class="jsdoc-syntax">) {
294
295
296             </span><span class="jsdoc-var">this.setSize</span><span class="jsdoc-syntax">(
297                 </span><span class="jsdoc-var">this.width </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.lib.Dom.getViewportWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) - 30,
298                 </span><span class="jsdoc-var">this.height </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.lib.Dom.getViewportHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) </span><span class="jsdoc-comment">// catering margin-top 30 margin-bottom 30
299             </span><span class="jsdoc-syntax">);
300             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
301         }
302
303         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.max_width </span><span class="jsdoc-syntax">!== 0) {
304
305             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.max_width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.lib.Dom.getViewportWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) - 30);
306
307             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.height</span><span class="jsdoc-syntax">) {
308                 </span><span class="jsdoc-var">this.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.height</span><span class="jsdoc-syntax">);
309                 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
310             }
311
312             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.max_height</span><span class="jsdoc-syntax">) {
313                 </span><span class="jsdoc-var">this.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(
314                     </span><span class="jsdoc-var">this.max_height</span><span class="jsdoc-syntax">,
315                     </span><span class="jsdoc-var">Roo.lib.Dom.getViewportHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) - 60
316                 ));
317
318                 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
319             }
320
321             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.fit_content</span><span class="jsdoc-syntax">) {
322                 </span><span class="jsdoc-var">this.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.lib.Dom.getViewportHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) - 60);
323                 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
324             }
325
326             </span><span class="jsdoc-var">this.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(
327                 60 +
328                 </span><span class="jsdoc-var">this.headerEl.getHeight</span><span class="jsdoc-syntax">() +
329                 </span><span class="jsdoc-var">this.footerEl.getHeight</span><span class="jsdoc-syntax">() +
330                 </span><span class="jsdoc-var">this.getChildHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.bodyEl.dom.childNodes</span><span class="jsdoc-syntax">),
331                 </span><span class="jsdoc-var">Roo.lib.Dom.getViewportHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) - 60)
332             );
333         }
334
335     },
336
337     </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">w</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">)
338     {
339         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">) {
340             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
341         }
342
343         </span><span class="jsdoc-var">this.resizeTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">);
344     },
345
346     </span><span class="jsdoc-var">show </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
347
348         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">) {
349             </span><span class="jsdoc-var">this.render</span><span class="jsdoc-syntax">();
350         }
351
352         </span><span class="jsdoc-comment">//this.el.setStyle('display', 'block');
353         </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'hideing'</span><span class="jsdoc-syntax">);
354         </span><span class="jsdoc-var">this.el.dom.style.display</span><span class="jsdoc-syntax">=</span><span class="jsdoc-string">'block'</span><span class="jsdoc-syntax">;
355
356         </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'modal-open'</span><span class="jsdoc-syntax">);
357
358         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.animate</span><span class="jsdoc-syntax">){  </span><span class="jsdoc-comment">// element has 'fade'  - so stuff happens after .3s ?- not sure why the delay?
359
360             </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
361                 </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'show'</span><span class="jsdoc-syntax">);
362                 </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'in'</span><span class="jsdoc-syntax">);
363             })</span><span class="jsdoc-var">.defer</span><span class="jsdoc-syntax">(50, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
364         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
365             </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'show'</span><span class="jsdoc-syntax">);
366             </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'in'</span><span class="jsdoc-syntax">);
367         }
368
369         </span><span class="jsdoc-comment">// not sure how we can show data in here..
370         //if (this.tmpl) {
371         //    this.getChildContainer().dom.innerHTML = this.tmpl.applyTemplate(this);
372         //}
373
374         </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-body-masked&quot;</span><span class="jsdoc-syntax">);
375
376         </span><span class="jsdoc-var">this.maskEl.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.lib.Dom.getViewWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">),   </span><span class="jsdoc-var">Roo.lib.Dom.getViewHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">));
377         </span><span class="jsdoc-var">this.maskEl.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'z-index'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.Modal.zIndex</span><span class="jsdoc-syntax">++);
378         </span><span class="jsdoc-var">this.maskEl.dom.style.display </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'block'</span><span class="jsdoc-syntax">;
379         </span><span class="jsdoc-var">this.maskEl.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'show'</span><span class="jsdoc-syntax">);
380
381
382         </span><span class="jsdoc-var">this.resize</span><span class="jsdoc-syntax">();
383
384         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'show'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
385
386         </span><span class="jsdoc-comment">// set zindex here - otherwise it appears to be ignored...
387         </span><span class="jsdoc-var">this.el.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'z-index'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.Modal.zIndex</span><span class="jsdoc-syntax">++);
388
389         (</span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">() {
390             </span><span class="jsdoc-var">this.items.forEach</span><span class="jsdoc-syntax">( </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) {
391                 </span><span class="jsdoc-var">e.layout </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">e.layout</span><span class="jsdoc-syntax">() : </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
392
393             });
394         })</span><span class="jsdoc-var">.defer</span><span class="jsdoc-syntax">(100,</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
395
396     },
397     </span><span class="jsdoc-var">hide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
398     {
399         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;beforehide&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">) !== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
400
401             </span><span class="jsdoc-var">this.maskEl.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'show'</span><span class="jsdoc-syntax">);
402
403             </span><span class="jsdoc-var">this.maskEl.dom.style.display </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
404             </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-body-masked&quot;</span><span class="jsdoc-syntax">);
405             </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'in'</span><span class="jsdoc-syntax">);
406             </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.modal-dialog'</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">()</span><span class="jsdoc-var">.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'transform'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">);
407
408             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.animate</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// why
409                 </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'hideing'</span><span class="jsdoc-syntax">);
410                 </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'show'</span><span class="jsdoc-syntax">);
411                 (</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
412                     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.el.hasClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'hideing'</span><span class="jsdoc-syntax">)) {
413                         </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// it's been shown again...
414                     </span><span class="jsdoc-syntax">}
415
416                     </span><span class="jsdoc-var">this.el.dom.style.display</span><span class="jsdoc-syntax">=</span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
417
418                     </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'modal-open'</span><span class="jsdoc-syntax">);
419                     </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'hideing'</span><span class="jsdoc-syntax">);
420                 })</span><span class="jsdoc-var">.defer</span><span class="jsdoc-syntax">(150,</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
421
422             }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
423                 </span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'show'</span><span class="jsdoc-syntax">);
424                 </span><span class="jsdoc-var">this.el.dom.style.display</span><span class="jsdoc-syntax">=</span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
425                 </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'modal-open'</span><span class="jsdoc-syntax">);
426
427             }
428             </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'hide'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
429         }
430     },
431     </span><span class="jsdoc-var">isVisible </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
432     {
433
434         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el.hasClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'show'</span><span class="jsdoc-syntax">) &amp;&amp; !</span><span class="jsdoc-var">this.el.hasClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'hideing'</span><span class="jsdoc-syntax">);
435
436     },
437
438     </span><span class="jsdoc-var">addButton </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">str</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cb</span><span class="jsdoc-syntax">)
439     {
440
441
442         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">({}, { </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">str </span><span class="jsdoc-syntax">} );
443         </span><span class="jsdoc-var">b.xns </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">b.xns </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.bootstrap</span><span class="jsdoc-syntax">;
444         </span><span class="jsdoc-var">b.xtype </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">b.xtype </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">'Button'</span><span class="jsdoc-syntax">;
445         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b.listeners</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) {
446             </span><span class="jsdoc-var">b.listeners </span><span class="jsdoc-syntax">= { </span><span class="jsdoc-var">click </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">cb.createDelegate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">)  };
447         }
448
449         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">btn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.factory</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">);
450
451         </span><span class="jsdoc-var">btn.render</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getButtonContainer</span><span class="jsdoc-syntax">());
452
453         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">;
454
455     },
456
457     </span><span class="jsdoc-var">setDefaultButton </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">)
458     {
459         </span><span class="jsdoc-comment">//this.el.select('.modal-footer').()
460     </span><span class="jsdoc-syntax">},
461
462     </span><span class="jsdoc-var">resizeTo</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">)
463     {
464         </span><span class="jsdoc-var">this.dialogEl.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">);
465
466         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">diff </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.headerEl.getHeight</span><span class="jsdoc-syntax">() + </span><span class="jsdoc-var">this.footerEl.getHeight</span><span class="jsdoc-syntax">() + 60; </span><span class="jsdoc-comment">// dialog margin-bottom: 30  
467
468         </span><span class="jsdoc-var">this.bodyEl.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">- </span><span class="jsdoc-var">diff</span><span class="jsdoc-syntax">);
469
470         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'resize'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
471     },
472
473     </span><span class="jsdoc-var">setContentSize  </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">)
474     {
475
476     },
477     </span><span class="jsdoc-var">onButtonClick</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
478     {
479         </span><span class="jsdoc-comment">//Roo.log([a,b,c]);
480         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'btnclick'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">btn.name</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
481     },
482      </span><span class="jsdoc-comment">/**
483      * Set the title of the Dialog
484      * @param {String} str new Title
485      */
486     </span><span class="jsdoc-var">setTitle</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">str</span><span class="jsdoc-syntax">) {
487         </span><span class="jsdoc-var">this.titleEl.dom.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">str</span><span class="jsdoc-syntax">;
488     },
489     </span><span class="jsdoc-comment">/**
490      * Set the body of the Dialog
491      * @param {String} str new Title
492      */
493     </span><span class="jsdoc-var">setBody</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">str</span><span class="jsdoc-syntax">) {
494         </span><span class="jsdoc-var">this.bodyEl.dom.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">str</span><span class="jsdoc-syntax">;
495     },
496     </span><span class="jsdoc-comment">/**
497      * Set the body of the Dialog using the template
498      * @param {Obj} data - apply this data to the template and replace the body contents.
499      */
500     </span><span class="jsdoc-var">applyBody</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">obj</span><span class="jsdoc-syntax">)
501     {
502         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.tmpl</span><span class="jsdoc-syntax">) {
503             </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;Error - using apply Body without a template&quot;</span><span class="jsdoc-syntax">);
504             </span><span class="jsdoc-comment">//code
505         </span><span class="jsdoc-syntax">}
506         </span><span class="jsdoc-var">this.tmpl.overwrite</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.bodyEl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">obj</span><span class="jsdoc-syntax">);
507     },
508
509     </span><span class="jsdoc-var">getChildHeight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">child_nodes</span><span class="jsdoc-syntax">)
510     {
511         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(
512             !</span><span class="jsdoc-var">child_nodes </span><span class="jsdoc-syntax">||
513             </span><span class="jsdoc-var">child_nodes.length </span><span class="jsdoc-syntax">== 0
514         ) {
515             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
516         }
517
518         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">child_height </span><span class="jsdoc-syntax">= 0;
519
520         </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">child_nodes.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
521
522             </span><span class="jsdoc-comment">/*
523             * for modal with tabs...
524             if(child_nodes[i].classList.contains('roo-layout-panel')) {
525                 
526                 var layout_childs = child_nodes[i].childNodes;
527                 
528                 for(var j = 0; j &lt; layout_childs.length; j++) {
529                     
530                     if(layout_childs[j].classList.contains('roo-layout-panel-body')) {
531                         
532                         var layout_body_childs = layout_childs[j].childNodes;
533                         
534                         for(var k = 0; k &lt; layout_body_childs.length; k++) {
535                             
536                             if(layout_body_childs[k].classList.contains('navbar')) {
537                                 child_height += layout_body_childs[k].offsetHeight;
538                                 continue;
539                             }
540                             
541                             if(layout_body_childs[k].classList.contains('roo-layout-tabs-body')) {
542                                 
543                                 var layout_body_tab_childs = layout_body_childs[k].childNodes;
544                                 
545                                 for(var m = 0; m &lt; layout_body_tab_childs.length; m++) {
546                                     
547                                     if(layout_body_tab_childs[m].classList.contains('roo-layout-active-content')) {
548                                         child_height += this.getChildHeight(layout_body_tab_childs[m].childNodes);
549                                         continue;
550                                     }
551                                     
552                                 }
553                                 
554                             }
555                             
556                         }
557                     }
558                 }
559                 continue;
560             }
561             */
562
563             </span><span class="jsdoc-var">child_height </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">child_nodes</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.offsetHeight</span><span class="jsdoc-syntax">;
564             </span><span class="jsdoc-comment">// Roo.log(child_nodes[i].offsetHeight);
565         </span><span class="jsdoc-syntax">}
566
567         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">child_height</span><span class="jsdoc-syntax">;
568     }
569
570 });
571
572
573 </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.Modal</span><span class="jsdoc-syntax">,  {
574     </span><span class="jsdoc-comment">/**
575          * Button config that displays a single OK button
576          * @type Object
577          */
578         </span><span class="jsdoc-var">OK </span><span class="jsdoc-syntax">:  [{
579             </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'ok'</span><span class="jsdoc-syntax">,
580             </span><span class="jsdoc-var">weight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'primary'</span><span class="jsdoc-syntax">,
581             </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'OK'
582         </span><span class="jsdoc-syntax">}],
583         </span><span class="jsdoc-comment">/**
584          * Button config that displays Yes and No buttons
585          * @type Object
586          */
587         </span><span class="jsdoc-var">YESNO </span><span class="jsdoc-syntax">: [
588             {
589                 </span><span class="jsdoc-var">name  </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'no'</span><span class="jsdoc-syntax">,
590                 </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'No'
591             </span><span class="jsdoc-syntax">},
592             {
593                 </span><span class="jsdoc-var">name  </span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'yes'</span><span class="jsdoc-syntax">,
594                 </span><span class="jsdoc-var">weight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'primary'</span><span class="jsdoc-syntax">,
595                 </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Yes'
596             </span><span class="jsdoc-syntax">}
597         ],
598
599         </span><span class="jsdoc-comment">/**
600          * Button config that displays OK and Cancel buttons
601          * @type Object
602          */
603         </span><span class="jsdoc-var">OKCANCEL </span><span class="jsdoc-syntax">: [
604             {
605                </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'cancel'</span><span class="jsdoc-syntax">,
606                 </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Cancel'
607             </span><span class="jsdoc-syntax">},
608             {
609                 </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'ok'</span><span class="jsdoc-syntax">,
610                 </span><span class="jsdoc-var">weight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'primary'</span><span class="jsdoc-syntax">,
611                 </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'OK'
612             </span><span class="jsdoc-syntax">}
613         ],
614         </span><span class="jsdoc-comment">/**
615          * Button config that displays Yes, No and Cancel buttons
616          * @type Object
617          */
618         </span><span class="jsdoc-var">YESNOCANCEL </span><span class="jsdoc-syntax">: [
619             {
620                 </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'yes'</span><span class="jsdoc-syntax">,
621                 </span><span class="jsdoc-var">weight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'primary'</span><span class="jsdoc-syntax">,
622                 </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Yes'
623             </span><span class="jsdoc-syntax">},
624             {
625                 </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'no'</span><span class="jsdoc-syntax">,
626                 </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'No'
627             </span><span class="jsdoc-syntax">},
628             {
629                 </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'cancel'</span><span class="jsdoc-syntax">,
630                 </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Cancel'
631             </span><span class="jsdoc-syntax">}
632         ],
633
634         </span><span class="jsdoc-var">zIndex </span><span class="jsdoc-syntax">: 10001
635 });
636 </span></code></body></html>
RooJS - Version 1