projects / roojs1 / blob
? search:


efba7d8f05e30fa4d53d3ecac611efbd48b897ad
[roojs1] / docs / src / Roo_bootstrap_Card.js.html
1 <html><head><title>Roo/bootstrap/Card.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
2  *  - LGPL
3  *
4  *  This is BS4's Card element.. - similar to our containers probably..
5  * 
6  */
7 /**
8  * @class Roo.bootstrap.Card
9  * @extends Roo.bootstrap.Component
10  * Bootstrap Card class
11  *
12  *
13  * possible... may not be implemented..
14  * @cfg {String} header_image  src url of image.
15  * @cfg {String} header
16  * @cfg {Number} header_size (0|1|2|3|4|5) H1 or H2 etc.. 0 indicates default
17  * 
18  * @cfg {String} title
19  * @cfg {String} subtitle
20  * @cfg {String} html -- html contents - or just use children..
21  * @cfg {String} footer
22  
23  * @cfg {String} weight (primary|warning|info|danger|secondary|success|light|dark)
24  * 
25  * @cfg {String} margin (0|1|2|3|4|5|auto)
26  * @cfg {String} margin_top (0|1|2|3|4|5|auto)
27  * @cfg {String} margin_bottom (0|1|2|3|4|5|auto)
28  * @cfg {String} margin_left (0|1|2|3|4|5|auto)
29  * @cfg {String} margin_right (0|1|2|3|4|5|auto)
30  * @cfg {String} margin_x (0|1|2|3|4|5|auto)
31  * @cfg {String} margin_y (0|1|2|3|4|5|auto)
32  *
33  * @cfg {String} padding (0|1|2|3|4|5)
34  * @cfg {String} padding_top (0|1|2|3|4|5)
35  * @cfg {String} padding_bottom (0|1|2|3|4|5)
36  * @cfg {String} padding_left (0|1|2|3|4|5)
37  * @cfg {String} padding_right (0|1|2|3|4|5)
38  * @cfg {String} padding_x (0|1|2|3|4|5)
39  * @cfg {String} padding_y (0|1|2|3|4|5)
40  *
41  * @cfg {String} display (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
42  * @cfg {String} display_xs (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
43  * @cfg {String} display_sm (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
44  * @cfg {String} display_lg (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
45  * @cfg {String} display_xl (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
46  
47  * @config {Boolean} dragable  if this card can be dragged.
48  * @config {Boolean} drag_group  group for drag
49  * 
50  
51  * @constructor
52  * Create a new Container
53  * @param {Object} config The config object
54  */
55
56 </span><span class="jsdoc-var">Roo.bootstrap.Card </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">){
57     </span><span class="jsdoc-var">Roo.bootstrap.Card.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">);
58
59     </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
60
61     });
62 };
63
64
65 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.Card</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.Component</span><span class="jsdoc-syntax">,  {
66
67
68     </span><span class="jsdoc-var">weight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
69
70     </span><span class="jsdoc-var">margin</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">/// may be better in component?
71     </span><span class="jsdoc-var">margin_top</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
72     </span><span class="jsdoc-var">margin_bottom</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
73     </span><span class="jsdoc-var">margin_left</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
74     </span><span class="jsdoc-var">margin_right</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
75     </span><span class="jsdoc-var">margin_x</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
76     </span><span class="jsdoc-var">margin_y</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
77
78     </span><span class="jsdoc-var">padding </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
79     </span><span class="jsdoc-var">padding_top</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
80     </span><span class="jsdoc-var">padding_bottom</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
81     </span><span class="jsdoc-var">padding_left</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
82     </span><span class="jsdoc-var">padding_right</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
83     </span><span class="jsdoc-var">padding_x</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
84     </span><span class="jsdoc-var">padding_y</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
85
86     </span><span class="jsdoc-var">display</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
87     </span><span class="jsdoc-var">display_xs</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
88     </span><span class="jsdoc-var">display_sm</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
89     </span><span class="jsdoc-var">display_lg</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
90     </span><span class="jsdoc-var">display_xl</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
91
92     </span><span class="jsdoc-var">header_image  </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
93     </span><span class="jsdoc-var">header </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
94     </span><span class="jsdoc-var">header_size </span><span class="jsdoc-syntax">: 0,
95     </span><span class="jsdoc-var">title </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
96     </span><span class="jsdoc-var">subtitle </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
97     </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
98     </span><span class="jsdoc-var">footer</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
99
100     </span><span class="jsdoc-var">dragable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
101     </span><span class="jsdoc-var">drag_group </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
102
103     </span><span class="jsdoc-var">childContainer </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
104
105     </span><span class="jsdoc-var">layoutCls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
106     {
107         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
108         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
109         </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.margin_bottom.length</span><span class="jsdoc-syntax">);
110         [</span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'top'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'bottom'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'left'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'right'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'x'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'y' </span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.forEach</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">) {
111             </span><span class="jsdoc-comment">// in theory these can do margin_top : ml-xs-3 ??? but we don't support that yet
112
113             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">((</span><span class="jsdoc-string">'' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">'margin' </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">v.length </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'_' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">])</span><span class="jsdoc-var">.length</span><span class="jsdoc-syntax">) {
114                 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' m' </span><span class="jsdoc-syntax">+  (</span><span class="jsdoc-var">v.length </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">[0]  : </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-string">'-' </span><span class="jsdoc-syntax">+  </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">'margin' </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">v.length </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'_' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">];
115             }
116             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">((</span><span class="jsdoc-string">'' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">'padding' </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">v.length </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'_' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">])</span><span class="jsdoc-var">.length</span><span class="jsdoc-syntax">) {
117                 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' p' </span><span class="jsdoc-syntax">+  (</span><span class="jsdoc-var">v.length </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">[0]  : </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-string">'-' </span><span class="jsdoc-syntax">+  </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">'padding' </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">v.length </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'_' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">];
118             }
119         });
120
121         [</span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'xs'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'sm'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'lg'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'xl'</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.forEach</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">) {
122             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">((</span><span class="jsdoc-string">'' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">'display' </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">v.length </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'_' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">])</span><span class="jsdoc-var">.length</span><span class="jsdoc-syntax">) {
123                 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' d' </span><span class="jsdoc-syntax">+  (</span><span class="jsdoc-var">v.length </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'-' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">'margin' </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">v.length </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'_' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">]
124             }
125         });
126
127         </span><span class="jsdoc-comment">// more generic support?
128         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hidden</span><span class="jsdoc-syntax">) {
129             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' d-none'</span><span class="jsdoc-syntax">;
130         }
131
132         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">;
133     },
134
135        </span><span class="jsdoc-comment">// Roo.log(&quot;Call onRender: &quot; + this.xtype);
136         /*  We are looking at something like this.
137 &lt;div class=&quot;card&quot;&gt;
138     &lt;img src=&quot;...&quot; class=&quot;card-img-top&quot; alt=&quot;...&quot;&gt;
139     &lt;div class=&quot;card-body&quot;&gt;
140         &lt;h5 class=&quot;card-title&quot;&gt;Card title&lt;/h5&gt;
141          &lt;h6 class=&quot;card-subtitle mb-2 text-muted&quot;&gt;Card subtitle&lt;/h6&gt;
142
143         &gt;&gt; this bit is really the body...
144         &lt;div&gt; &lt;&lt; we will ad dthis in hopefully it will not break shit.
145         
146         ** card text does not actually have any styling...
147         
148             &lt;p class=&quot;card-text&quot;&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
149         
150         &lt;/div&gt; &lt;&lt;
151           &lt;a href=&quot;#&quot; class=&quot;card-link&quot;&gt;Card link&lt;/a&gt;
152           
153     &lt;/div&gt;
154     &lt;div class=&quot;card-footer&quot;&gt;
155         &lt;small class=&quot;text-muted&quot;&gt;Last updated 3 mins ago&lt;/small&gt;
156     &lt;/div&gt;
157 &lt;/div&gt;
158          */
159     </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
160
161         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= {
162             </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
163             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'card'</span><span class="jsdoc-syntax">,
164             </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [ ]
165         };
166
167         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.weight.length </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.weight </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">'light'</span><span class="jsdoc-syntax">) {
168             </span><span class="jsdoc-var">cfg.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' text-white'</span><span class="jsdoc-syntax">;
169         } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
170             </span><span class="jsdoc-var">cfg.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' text-dark'</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// need as it's nested..
171         </span><span class="jsdoc-syntax">}
172         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.weight.length</span><span class="jsdoc-syntax">) {
173             </span><span class="jsdoc-var">cfg.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' bg-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.weight</span><span class="jsdoc-syntax">;
174         }
175
176         </span><span class="jsdoc-var">cfg.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">this.layoutCls</span><span class="jsdoc-syntax">();
177
178         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.header.length</span><span class="jsdoc-syntax">) {
179             </span><span class="jsdoc-var">cfg.cn.push</span><span class="jsdoc-syntax">({
180                 </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.header_size </span><span class="jsdoc-syntax">&gt; 0 ? </span><span class="jsdoc-string">'h' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.header_size </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
181                 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'card-header'</span><span class="jsdoc-syntax">,
182                 </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.header </span><span class="jsdoc-comment">// escape?
183             </span><span class="jsdoc-syntax">});
184         }
185         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.header_image.length</span><span class="jsdoc-syntax">) {
186             </span><span class="jsdoc-var">cfg.cn.push</span><span class="jsdoc-syntax">({
187                 </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'img'</span><span class="jsdoc-syntax">,
188                 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'card-img-top'</span><span class="jsdoc-syntax">,
189                 </span><span class="jsdoc-var">src</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.header_image </span><span class="jsdoc-comment">// escape?
190             </span><span class="jsdoc-syntax">});
191         }
192
193         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">body </span><span class="jsdoc-syntax">= {
194             </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
195             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'card-body'</span><span class="jsdoc-syntax">,
196             </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: []
197         };
198         </span><span class="jsdoc-var">cfg.cn.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">body</span><span class="jsdoc-syntax">);
199
200         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.title.length</span><span class="jsdoc-syntax">) {
201             </span><span class="jsdoc-var">body.cn.push</span><span class="jsdoc-syntax">({
202                 </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
203                 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'card-title'</span><span class="jsdoc-syntax">,
204                 </span><span class="jsdoc-var">src</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.title </span><span class="jsdoc-comment">// escape?
205             </span><span class="jsdoc-syntax">});
206         }
207
208         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.subtitle.length</span><span class="jsdoc-syntax">) {
209             </span><span class="jsdoc-var">body.cn.push</span><span class="jsdoc-syntax">({
210                 </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
211                 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'card-title'</span><span class="jsdoc-syntax">,
212                 </span><span class="jsdoc-var">src</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.subtitle </span><span class="jsdoc-comment">// escape?
213             </span><span class="jsdoc-syntax">});
214         }
215
216         </span><span class="jsdoc-var">body.cn.push</span><span class="jsdoc-syntax">({
217             </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
218             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-card-body-ctr'
219         </span><span class="jsdoc-syntax">});
220
221         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.html.length</span><span class="jsdoc-syntax">) {
222             </span><span class="jsdoc-var">body.cn.push</span><span class="jsdoc-syntax">({
223                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
224                 </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.html
225             </span><span class="jsdoc-syntax">});
226         }
227         </span><span class="jsdoc-comment">// fixme ? handle objects?
228         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.footer.length</span><span class="jsdoc-syntax">) {
229             </span><span class="jsdoc-var">cfg.cn.push</span><span class="jsdoc-syntax">({
230                 </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
231                 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'card-footer'</span><span class="jsdoc-syntax">,
232                 </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.footer </span><span class="jsdoc-comment">// escape?
233             </span><span class="jsdoc-syntax">});
234         }
235         </span><span class="jsdoc-comment">// footer...
236
237         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
238     },
239
240
241     </span><span class="jsdoc-var">getChildContainer </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
242     {
243
244         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
245             </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
246         }
247         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.roo-card-body-ctr'</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">();
248     },
249
250     </span><span class="jsdoc-var">initEvents</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
251     {
252         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dragable</span><span class="jsdoc-syntax">){
253              </span><span class="jsdoc-var">this.dragZone </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.dd.DragZone</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getEl</span><span class="jsdoc-syntax">(), {
254                     </span><span class="jsdoc-var">containerScroll</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
255                     </span><span class="jsdoc-var">ddGroup</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.drag_group </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">'default_card_drag_group'
256             </span><span class="jsdoc-syntax">});
257             </span><span class="jsdoc-var">this.dragZone.getDragData </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getDragData.createDelegate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
258         }
259
260
261
262     },
263     </span><span class="jsdoc-var">getDragData </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">) {
264         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">target </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getEl</span><span class="jsdoc-syntax">();
265         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">) {
266             </span><span class="jsdoc-comment">//this.handleSelection(e);
267
268             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dragData </span><span class="jsdoc-syntax">= {
269                 </span><span class="jsdoc-var">source</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">,
270                 </span><span class="jsdoc-var">copy</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
271                 </span><span class="jsdoc-var">nodes</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.getEl</span><span class="jsdoc-syntax">(),
272                 </span><span class="jsdoc-var">records</span><span class="jsdoc-syntax">: []
273             };
274
275
276             </span><span class="jsdoc-var">dragData.ddel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">target.dom </span><span class="jsdoc-syntax">;      </span><span class="jsdoc-comment">// the div element
277             </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">target.getWidth</span><span class="jsdoc-syntax">( ));
278              </span><span class="jsdoc-var">dragData.ddel.style.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">target.getWidth</span><span class="jsdoc-syntax">() + </span><span class="jsdoc-string">'px'</span><span class="jsdoc-syntax">;
279
280             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">dragData</span><span class="jsdoc-syntax">;
281         }
282         </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
283     }
284
285 });
286
287 </span></code></body></html>
RooJS - Version 1