sync
authorAlan Knowles <alan@roojs.com>
Fri, 18 Sep 2020 09:07:39 +0000 (17:07 +0800)
committerAlan Knowles <alan@roojs.com>
Fri, 18 Sep 2020 09:07:39 +0000 (17:07 +0800)
docs/src/Roo_bootstrap_Card.js.html [new file with mode: 0644]
docs/src/Roo_form_ComboNested.js.html [new file with mode: 0644]
docs/symbols/Roo.bootstrap.Card.json [new file with mode: 0644]
docs/symbols/Roo.form.ComboNested.json [new file with mode: 0644]
examples/bootstrap4/dashboard4.html [new file with mode: 0644]
examples/view/ddview.js [new file with mode: 0644]

diff --git a/docs/src/Roo_bootstrap_Card.js.html b/docs/src/Roo_bootstrap_Card.js.html
new file mode 100644 (file)
index 0000000..9d0bb94
--- /dev/null
@@ -0,0 +1,287 @@
+<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">/*
+ *  - LGPL
+ *
+ *  This is BS4's Card element.. - similar to our containers probably..
+ * 
+ */
+/**
+ * @class Roo.bootstrap.Card
+ * @extends Roo.bootstrap.Component
+ * Bootstrap Card class
+ *
+ *
+ * possible... may not be implemented..
+ * @cfg {String} header_image  src url of image.
+ * @cfg {String} header
+ * @cfg {Number} header_size (0|1|2|3|4|5) H1 or H2 etc.. 0 indicates default
+ * 
+ * @cfg {String} title
+ * @cfg {String} subtitle
+ * @cfg {String} html -- html contents - or just use children..
+ * @cfg {String} footer
+ * @cfg {String} weight (primary|warning|info|danger|secondary|success|light|dark)
+ * 
+ * @cfg {String} margin (0|1|2|3|4|5|auto)
+ * @cfg {String} margin_top (0|1|2|3|4|5|auto)
+ * @cfg {String} margin_bottom (0|1|2|3|4|5|auto)
+ * @cfg {String} margin_left (0|1|2|3|4|5|auto)
+ * @cfg {String} margin_right (0|1|2|3|4|5|auto)
+ * @cfg {String} margin_x (0|1|2|3|4|5|auto)
+ * @cfg {String} margin_y (0|1|2|3|4|5|auto)
+ *
+ * @cfg {String} padding (0|1|2|3|4|5)
+ * @cfg {String} padding_top (0|1|2|3|4|5)
+ * @cfg {String} padding_bottom (0|1|2|3|4|5)
+ * @cfg {String} padding_left (0|1|2|3|4|5)
+ * @cfg {String} padding_right (0|1|2|3|4|5)
+ * @cfg {String} padding_x (0|1|2|3|4|5)
+ * @cfg {String} padding_y (0|1|2|3|4|5)
+ *
+ * @cfg {String} display (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
+ * @cfg {String} display_xs (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
+ * @cfg {String} display_sm (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
+ * @cfg {String} display_lg (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
+ * @cfg {String} display_xl (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
+ * @config {Boolean} dragable  if this card can be dragged.
+ * @config {Boolean} drag_group  group for drag
+ * 
+ * @constructor
+ * Create a new Container
+ * @param {Object} config The config object
+ */
+
+</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">){
+    </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">);
+
+    </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
+
+    });
+};
+
+
+</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">,  {
+
+
+    </span><span class="jsdoc-var">weight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
+
+    </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?
+    </span><span class="jsdoc-var">margin_top</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">margin_bottom</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">margin_left</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">margin_right</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">margin_x</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">margin_y</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-var">padding </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">padding_top</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">padding_bottom</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">padding_left</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">padding_right</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">padding_x</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">padding_y</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-var">display</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">display_xs</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">display_sm</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">display_lg</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">display_xl</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-var">header_image  </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">header </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">header_size </span><span class="jsdoc-syntax">: 0,
+    </span><span class="jsdoc-var">title </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">subtitle </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">footer</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-var">dragable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">drag_group </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-var">childContainer </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-var">layoutCls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </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">;
+        </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">;
+        </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">);
+        [</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">) {
+            </span><span class="jsdoc-comment">// in theory these can do margin_top : ml-xs-3 ??? but we don't support that yet
+
+            </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">) {
+                </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">];
+            }
+            </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">) {
+                </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">];
+            }
+        });
+
+        [</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">) {
+            </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">) {
+                </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">]
+            }
+        });
+
+        </span><span class="jsdoc-comment">// more generic support?
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hidden</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' d-none'</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">;
+    },
+
+       </span><span class="jsdoc-comment">// Roo.log(&quot;Call onRender: &quot; + this.xtype);
+        /*  We are looking at something like this.
+&lt;div class=&quot;card&quot;&gt;
+    &lt;img src=&quot;...&quot; class=&quot;card-img-top&quot; alt=&quot;...&quot;&gt;
+    &lt;div class=&quot;card-body&quot;&gt;
+        &lt;h5 class=&quot;card-title&quot;&gt;Card title&lt;/h5&gt;
+         &lt;h6 class=&quot;card-subtitle mb-2 text-muted&quot;&gt;Card subtitle&lt;/h6&gt;
+
+        &gt;&gt; this bit is really the body...
+        &lt;div&gt; &lt;&lt; we will ad dthis in hopefully it will not break shit.
+        
+        ** card text does not actually have any styling...
+        
+            &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;
+        
+        &lt;/div&gt; &lt;&lt;
+          &lt;a href=&quot;#&quot; class=&quot;card-link&quot;&gt;Card link&lt;/a&gt;
+          
+    &lt;/div&gt;
+    &lt;div class=&quot;card-footer&quot;&gt;
+        &lt;small class=&quot;text-muted&quot;&gt;Last updated 3 mins ago&lt;/small&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+         */
+    </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= {
+            </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'card'</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [ ]
+        };
+
+        </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">) {
+            </span><span class="jsdoc-var">cfg.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' text-white'</span><span class="jsdoc-syntax">;
+        } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
+            </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..
+        </span><span class="jsdoc-syntax">}
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.weight.length</span><span class="jsdoc-syntax">) {
+            </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">;
+        }
+
+        </span><span class="jsdoc-var">cfg.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">this.layoutCls</span><span class="jsdoc-syntax">();
+
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.header.length</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">cfg.cn.push</span><span class="jsdoc-syntax">({
+                </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">,
+                </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'card-header'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.header </span><span class="jsdoc-comment">// escape?
+            </span><span class="jsdoc-syntax">});
+        }
+        </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">) {
+            </span><span class="jsdoc-var">cfg.cn.push</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'img'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'card-img-top'</span><span class="jsdoc-syntax">,
+                </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?
+            </span><span class="jsdoc-syntax">});
+        }
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">body </span><span class="jsdoc-syntax">= {
+            </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'card-body'</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: []
+        };
+        </span><span class="jsdoc-var">cfg.cn.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">body</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.title.length</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">body.cn.push</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'card-title'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">src</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.title </span><span class="jsdoc-comment">// escape?
+            </span><span class="jsdoc-syntax">});
+        }
+
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.subtitle.length</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">body.cn.push</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'card-title'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">src</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.subtitle </span><span class="jsdoc-comment">// escape?
+            </span><span class="jsdoc-syntax">});
+        }
+
+        </span><span class="jsdoc-var">body.cn.push</span><span class="jsdoc-syntax">({
+            </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-card-body-ctr'
+        </span><span class="jsdoc-syntax">});
+
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.html.length</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">body.cn.push</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
+                </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-comment">// fixme ? handle objects?
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.footer.length</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">cfg.cn.push</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'card-footer'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.footer </span><span class="jsdoc-comment">// escape?
+            </span><span class="jsdoc-syntax">});
+        }
+        </span><span class="jsdoc-comment">// footer...
+
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
+    },
+
+
+    </span><span class="jsdoc-var">getChildContainer </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
+        }
+        </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">();
+    },
+
+    </span><span class="jsdoc-var">initEvents</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dragable</span><span class="jsdoc-syntax">){
+             </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">(), {
+                    </span><span class="jsdoc-var">containerScroll</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+                    </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'
+            </span><span class="jsdoc-syntax">});
+            </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">);
+        }
+
+
+
+    },
+    </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">) {
+        </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">();
+       </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">) {
+           </span><span class="jsdoc-comment">//this.handleSelection(e);
+
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dragData </span><span class="jsdoc-syntax">= {
+                </span><span class="jsdoc-var">source</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">copy</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">nodes</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.getEl</span><span class="jsdoc-syntax">(),
+                </span><span class="jsdoc-var">records</span><span class="jsdoc-syntax">: []
+            };
+
+
+            </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
+            </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">target.getWidth</span><span class="jsdoc-syntax">( ));
+             </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">;
+
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">dragData</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
+    },
+
+});
+
+</span></code></body></html>
\ No newline at end of file
diff --git a/docs/src/Roo_form_ComboNested.js.html b/docs/src/Roo_form_ComboNested.js.html
new file mode 100644 (file)
index 0000000..f9c25f1
--- /dev/null
@@ -0,0 +1,429 @@
+<html><head><title>Roo/form/ComboNested.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">/*
+ * RooJS Library 1.1.1
+ * Copyright(c) 2008-2011  Alan Knowles
+ *
+ * License - LGPL
+ */
+
+
+/**
+ * @class Roo.form.ComboNested
+ * @extends Roo.form.ComboBox
+ * A combobox for that allows selection of nested items in a list,
+ * eg.
+ *
+ *  Book
+ *    -&gt; red
+ *    -&gt; green
+ *  Table
+ *    -&gt; square
+ *      -&gt;red
+ *      -&gt;green
+ *    -&gt; rectangle
+ *      -&gt;green
+ *      
+ * 
+ * @constructor
+ * Create a new ComboNested
+ * @param {Object} config Configuration options
+ */
+</span><span class="jsdoc-var">Roo.form.ComboNested </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">){
+    </span><span class="jsdoc-var">Roo.form.ComboCheck.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">);
+    </span><span class="jsdoc-comment">// should verify some data...
+    // like
+    // hiddenName = required..
+    // displayField = required
+    // valudField == required
+    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">req</span><span class="jsdoc-syntax">= [ </span><span class="jsdoc-string">'hiddenName'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'displayField'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'valueField' </span><span class="jsdoc-syntax">];
+    </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">;
+    </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">req</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">) {
+        </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">_t</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">]) == </span><span class="jsdoc-string">'undefined' </span><span class="jsdoc-syntax">) || !</span><span class="jsdoc-var">_t</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.length</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-keyword">throw </span><span class="jsdoc-string">&quot;Roo.form.ComboNested : missing value for: &quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">;
+        }
+    });
+
+
+};
+
+</span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.form.ComboNested</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.form.ComboBox</span><span class="jsdoc-syntax">, {
+
+    </span><span class="jsdoc-comment">/*
+     * @config {Number} max Number of columns to show
+     */
+
+    </span><span class="jsdoc-var">maxColumns </span><span class="jsdoc-syntax">: 3,
+
+    </span><span class="jsdoc-var">list </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// the outermost div..
+    </span><span class="jsdoc-var">innerLists </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// the
+    </span><span class="jsdoc-var">views </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">stores </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">loadingChildren </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+
+    </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">)
+    {
+        </span><span class="jsdoc-var">Roo.form.ComboBox.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">); </span><span class="jsdoc-comment">// skip parent call - got to above..
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hiddenName</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.hiddenField </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.insertSibling</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'input'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'hidden'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.hiddenName</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">:  (</span><span class="jsdoc-var">this.hiddenId</span><span class="jsdoc-syntax">||</span><span class="jsdoc-var">this.hiddenName</span><span class="jsdoc-syntax">)},
+                    </span><span class="jsdoc-string">'before'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">this.hiddenField.value </span><span class="jsdoc-syntax">=
+                </span><span class="jsdoc-var">this.hiddenValue </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.hiddenValue </span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-var">this.value </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.value </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
+
+            </span><span class="jsdoc-comment">// prevent input submission
+            </span><span class="jsdoc-var">this.el.dom.removeAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'name'</span><span class="jsdoc-syntax">);
+
+
+        }
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isGecko</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.el.dom.setAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'autocomplete'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'off'</span><span class="jsdoc-syntax">);
+        }
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'x-combo-list'</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-var">this.list </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Layer</span><span class="jsdoc-syntax">({
+            </span><span class="jsdoc-var">shadow</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.shadow</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: [</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.listClass</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.join</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">' '</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">constrain</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">false
+        </span><span class="jsdoc-syntax">});
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">lw </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.listWidth </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.wrap.getWidth</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">this.minListWidth</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.list.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lw</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.list.swallowEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mousewheel'</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.assetHeight </span><span class="jsdoc-syntax">= 0;
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.title</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.header </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.list.createChild</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">'-hd'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.title</span><span class="jsdoc-syntax">});
+            </span><span class="jsdoc-var">this.assetHeight </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">this.header.getHeight</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-var">this.innerLists </span><span class="jsdoc-syntax">= [];
+        </span><span class="jsdoc-var">this.views </span><span class="jsdoc-syntax">= [];
+        </span><span class="jsdoc-var">this.stores </span><span class="jsdoc-syntax">= [];
+        </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">this.maxColumns</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
+            </span><span class="jsdoc-var">this.onRenderList</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">);
+        }
+
+        </span><span class="jsdoc-comment">// always needs footer, as we are going to have an 'OK' button.
+        </span><span class="jsdoc-var">this.footer </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.list.createChild</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">'-ft'</span><span class="jsdoc-syntax">});
+        </span><span class="jsdoc-var">this.pageTb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Toolbar</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.footer</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">_this </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.pageTb.add</span><span class="jsdoc-syntax">(  {
+
+            </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Done'</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+            {
+                </span><span class="jsdoc-var">_this.collapse</span><span class="jsdoc-syntax">();
+            }
+        });
+
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">this.allowBlank </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">this.disableClear</span><span class="jsdoc-syntax">) {
+
+            </span><span class="jsdoc-var">this.pageTb.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Toolbar.Fill</span><span class="jsdoc-syntax">(), {
+                </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'x-btn-icon x-btn-clear'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'&amp;#160;'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+                {
+                    </span><span class="jsdoc-var">_this.collapse</span><span class="jsdoc-syntax">();
+                    </span><span class="jsdoc-var">_this.clearValue</span><span class="jsdoc-syntax">();
+                    </span><span class="jsdoc-var">_this.onSelect</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">, -1);
+                }
+            });
+        }
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.footer</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">this.assetHeight </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">this.footer.getHeight</span><span class="jsdoc-syntax">();
+        }
+
+    },
+    </span><span class="jsdoc-var">onRenderList </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(  </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">)
+    {
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">lw </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.floor</span><span class="jsdoc-syntax">(
+                ((</span><span class="jsdoc-var">this.listWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.maxColumns </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.wrap.getWidth</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">this.minListWidth</span><span class="jsdoc-syntax">)) - </span><span class="jsdoc-var">this.list.getFrameWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'lr'</span><span class="jsdoc-syntax">)) / </span><span class="jsdoc-var">this.maxColumns
+        </span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-var">this.list.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lw</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// default to '1'
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">il </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.innerLists</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">this.list.createChild</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">'-inner'</span><span class="jsdoc-syntax">});
+        </span><span class="jsdoc-comment">//il.on('mouseover', this.onViewOver, this, { list:  i });
+        //il.on('mousemove', this.onViewMove, this, { list:  i });
+        </span><span class="jsdoc-var">il.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lw</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">il.setStyle</span><span class="jsdoc-syntax">({ </span><span class="jsdoc-string">'overflow-x' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'hidden'</span><span class="jsdoc-syntax">});
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.tpl</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.tpl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Template</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">:  </span><span class="jsdoc-string">'&lt;div class=&quot;'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">'-item '</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">'-item-{cn:this.isEmpty}&quot;&gt;{' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.displayField </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'}&lt;/div&gt;'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">isEmpty</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">allValues</span><span class="jsdoc-syntax">) {
+                    </span><span class="jsdoc-comment">//Roo.log(value);
+                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">value.data</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-string">'undefined' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">value.data.length </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">value.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">///json is a nested response..
+                    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">dl </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'has-children' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'no-children'
+                </span><span class="jsdoc-syntax">}
+            });
+        }
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">store  </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.store</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&gt; 0) {
+            </span><span class="jsdoc-var">store  </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.data.SimpleStore</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-comment">//fields : this.store.reader.meta.fields,
+                </span><span class="jsdoc-var">reader </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.store.reader</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">data </span><span class="jsdoc-syntax">: [ ]
+            });
+        }
+        </span><span class="jsdoc-var">this.stores</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]  = </span><span class="jsdoc-var">store</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">view </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.views</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.View</span><span class="jsdoc-syntax">(
+            </span><span class="jsdoc-var">il</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">this.tpl</span><span class="jsdoc-syntax">,
+            {
+                </span><span class="jsdoc-var">singleSelect</span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">store</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">store</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">selectedClass</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.selectedClass
+            </span><span class="jsdoc-syntax">}
+        );
+        </span><span class="jsdoc-var">view.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lw</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">view.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.setStyle</span><span class="jsdoc-syntax">({
+            </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; 1 ? </span><span class="jsdoc-string">'relative' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'absolute'</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">top</span><span class="jsdoc-syntax">: 0,
+            </span><span class="jsdoc-var">left</span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">lw </span><span class="jsdoc-syntax">) + </span><span class="jsdoc-string">'px'</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">display </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&gt; 0 ? </span><span class="jsdoc-string">'none' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'block'
+        </span><span class="jsdoc-syntax">});
+        </span><span class="jsdoc-var">view.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'selectionchange'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onSelectChange.createDelegate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-var">list </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">}, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">));
+        </span><span class="jsdoc-var">view.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'dblclick'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onDoubleClick.createDelegate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, {</span><span class="jsdoc-var">list </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">}, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">));
+        </span><span class="jsdoc-comment">//view.on('click', this.onViewClick, this, { list : i });
+
+        </span><span class="jsdoc-var">store.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'beforeload'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onBeforeLoad</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">store.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'load'</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">this.onLoad</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, { </span><span class="jsdoc-var">list  </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">});
+        </span><span class="jsdoc-var">store.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'loadexception'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onLoadException</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-comment">// hide the other vies..
+
+
+
+    </span><span class="jsdoc-syntax">},
+
+    </span><span class="jsdoc-var">restrictHeight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">mh </span><span class="jsdoc-syntax">= 0;
+        </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.innerLists</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">il</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.views</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.getEl</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">el.dom.style.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">inner </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.dom</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">il.clientHeight</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">il.offsetHeight</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">il.scrollHeight</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-comment">// only adjust heights on other ones..
+            </span><span class="jsdoc-var">mh </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">mh</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; 1) {
+
+                </span><span class="jsdoc-var">el.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.maxHeight </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'auto' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.maxHeight</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">il.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.maxHeight </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'auto' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.maxHeight</span><span class="jsdoc-syntax">);
+
+            }
+
+
+        }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-var">this.list.beginUpdate</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.list.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">mh</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this.list.getFrameWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'tb'</span><span class="jsdoc-syntax">)+</span><span class="jsdoc-var">this.assetHeight</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.list.alignTo</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.listAlign</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.list.endUpdate</span><span class="jsdoc-syntax">();
+
+    },
+
+
+    </span><span class="jsdoc-comment">// -- store handlers..
+    // private
+    </span><span class="jsdoc-var">onBeforeLoad </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.hasFocus</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-var">this.innerLists</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.loadingText </span><span class="jsdoc-syntax">?
+               </span><span class="jsdoc-string">'&lt;div class=&quot;loading-indicator&quot;&gt;'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this.loadingText</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">'&lt;/div&gt;' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.restrictHeight</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.selectedIndex </span><span class="jsdoc-syntax">= -1;
+    },
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">onLoad </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">d</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.loadingChildren</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-comment">// then we are loading the top level. - hide the children
+            </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">= 1;</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.views.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
+                </span><span class="jsdoc-var">this.views</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.setStyle</span><span class="jsdoc-syntax">({ </span><span class="jsdoc-var">display </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'none' </span><span class="jsdoc-syntax">});
+            }
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">lw </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.floor</span><span class="jsdoc-syntax">(
+                ((</span><span class="jsdoc-var">this.listWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.maxColumns </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.wrap.getWidth</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">this.minListWidth</span><span class="jsdoc-syntax">)) - </span><span class="jsdoc-var">this.list.getFrameWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'lr'</span><span class="jsdoc-syntax">)) / </span><span class="jsdoc-var">this.maxColumns
+            </span><span class="jsdoc-syntax">);
+
+             </span><span class="jsdoc-var">this.list.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lw</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// default to '1'
+
+
+        </span><span class="jsdoc-syntax">}
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.hasFocus</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.store.getCount</span><span class="jsdoc-syntax">() &gt; 0) {
+            </span><span class="jsdoc-var">this.expand</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.restrictHeight</span><span class="jsdoc-syntax">();
+        } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">this.onEmptyResults</span><span class="jsdoc-syntax">();
+        }
+
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.loadingChildren</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">this.selectActive</span><span class="jsdoc-syntax">();
+        }
+        </span><span class="jsdoc-comment">/*
+        this.stores[1].loadData([]);
+        this.stores[2].loadData([]);
+        this.views
+        */
+
+        //this.el.focus();
+    </span><span class="jsdoc-syntax">},
+
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">onLoadException </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-var">this.collapse</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.store.reader.jsonData</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.store </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.store.reader.jsonData.errorMsg</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">Roo.MessageBox.alert</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;Error loading&quot;</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">this.store.reader.jsonData.errorMsg</span><span class="jsdoc-syntax">);
+        }
+
+
+    },
+    </span><span class="jsdoc-comment">// no cleaning of leading spaces on blur here.
+    </span><span class="jsdoc-var">cleanLeadingSpace </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">) { },
+
+
+    </span><span class="jsdoc-var">onSelectChange </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">view</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">sels</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">opts </span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ix </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">view.getSelectedIndexes</span><span class="jsdoc-syntax">();
+
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">opts.list </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">this.maxColumns </span><span class="jsdoc-syntax">- 2) {
+            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">view.store.getCount</span><span class="jsdoc-syntax">()&lt;  1) {
+                </span><span class="jsdoc-var">this.views</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">opts.list </span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.setStyle</span><span class="jsdoc-syntax">({ </span><span class="jsdoc-var">display </span><span class="jsdoc-syntax">:   </span><span class="jsdoc-string">'none' </span><span class="jsdoc-syntax">});
+
+            } </span><span class="jsdoc-keyword">else  </span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ix.length</span><span class="jsdoc-syntax">) {
+                    </span><span class="jsdoc-comment">// used to clear ?? but if we are loading unselected 
+                    </span><span class="jsdoc-var">this.setFromData</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">view.store.getAt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ix</span><span class="jsdoc-syntax">[0])</span><span class="jsdoc-var">.data</span><span class="jsdoc-syntax">);
+                }
+
+            }
+
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">ix.length</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-comment">// this get's fired when trigger opens..
+           // this.setFromData({});
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">str </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.stores</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">opts.list</span><span class="jsdoc-syntax">+1];
+            </span><span class="jsdoc-var">str.data.clear</span><span class="jsdoc-syntax">(); </span><span class="jsdoc-comment">// removeall wihtout the fire events..
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rec </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">view.store.getAt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ix</span><span class="jsdoc-syntax">[0]);
+
+        </span><span class="jsdoc-var">this.setFromData</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">rec.data</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'select'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">rec</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ix</span><span class="jsdoc-syntax">[0]);
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">lw </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.floor</span><span class="jsdoc-syntax">(
+             (
+                (</span><span class="jsdoc-var">this.listWidth </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">this.maxColumns </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.wrap.getWidth</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">this.minListWidth</span><span class="jsdoc-syntax">)) - </span><span class="jsdoc-var">this.list.getFrameWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'lr'</span><span class="jsdoc-syntax">)
+             ) / </span><span class="jsdoc-var">this.maxColumns
+        </span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.loadingChildren </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.stores</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">opts.list</span><span class="jsdoc-syntax">+1]</span><span class="jsdoc-var">.loadDataFromChildren</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">rec </span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.loadingChildren </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.stores</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">opts.list</span><span class="jsdoc-syntax">+1]</span><span class="jsdoc-var">. getTotalCount</span><span class="jsdoc-syntax">();
+
+        </span><span class="jsdoc-var">this.views</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">opts.list</span><span class="jsdoc-syntax">+1]</span><span class="jsdoc-var">.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.setHeight</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">this.innerLists</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.getHeight</span><span class="jsdoc-syntax">());
+
+        </span><span class="jsdoc-var">this.views</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">opts.list</span><span class="jsdoc-syntax">+1]</span><span class="jsdoc-var">.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.setStyle</span><span class="jsdoc-syntax">({ </span><span class="jsdoc-var">display </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">dl </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'block' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'none' </span><span class="jsdoc-syntax">});
+        </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">= </span><span class="jsdoc-var">opts.list</span><span class="jsdoc-syntax">+2; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.views.length</span><span class="jsdoc-syntax">;</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
+            </span><span class="jsdoc-var">this.views</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.getEl</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.setStyle</span><span class="jsdoc-syntax">({ </span><span class="jsdoc-var">display </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'none' </span><span class="jsdoc-syntax">});
+        }
+
+        </span><span class="jsdoc-var">this.innerLists</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">opts.list</span><span class="jsdoc-syntax">+1]</span><span class="jsdoc-var">.setHeight</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">this.innerLists</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.getHeight</span><span class="jsdoc-syntax">());
+        </span><span class="jsdoc-var">this.list.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lw </span><span class="jsdoc-syntax">* (</span><span class="jsdoc-var">opts.list </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">dl </span><span class="jsdoc-syntax">? 2 : 1)));
+
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isLoading</span><span class="jsdoc-syntax">) {
+           </span><span class="jsdoc-comment">// this.selectActive(opts.list);
+        </span><span class="jsdoc-syntax">}
+
+    },
+
+
+
+
+    </span><span class="jsdoc-var">onDoubleClick </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-var">this.collapse</span><span class="jsdoc-syntax">(); </span><span class="jsdoc-comment">//??
+    </span><span class="jsdoc-syntax">},
+
+
+
+
+
+    </span><span class="jsdoc-comment">// private
+    </span><span class="jsdoc-var">recordToStack </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">store</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">prop</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">stack</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cstore </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.data.SimpleStore</span><span class="jsdoc-syntax">({
+            </span><span class="jsdoc-comment">//fields : this.store.reader.meta.fields, // we need array reader.. for
+            </span><span class="jsdoc-var">reader </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.store.reader</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">data </span><span class="jsdoc-syntax">: [ ]
+        });
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">_this </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">record  </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">srec </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">store.getCount</span><span class="jsdoc-syntax">() &lt; 1){
+            </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-var">store.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r.data</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">prop</span><span class="jsdoc-syntax">] == </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">record </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">srec </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r.data.cn </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">r.data.cn.length</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-var">cstore.loadDataFromChildren</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cret </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">_this.recordToStack</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cstore</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">prop</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">stack</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cret </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">) {
+                    </span><span class="jsdoc-var">record </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cret</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-var">srec </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
+                    </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
+                }
+            }
+
+            </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
+        });
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">record </span><span class="jsdoc-syntax">== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-keyword">return false
+        </span><span class="jsdoc-syntax">}
+        </span><span class="jsdoc-var">stack.unshift</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">srec</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">record</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/*
+     * find the stack of stores that match our value.
+     *
+     * 
+     */
+
+    </span><span class="jsdoc-var">selectActive </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">()
+    {
+       </span><span class="jsdoc-comment">// if store is not loaded, then we will need to wait for that to happen first.
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">stack </span><span class="jsdoc-syntax">= [];
+        </span><span class="jsdoc-var">this.recordToStack</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.store</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.valueField</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.getValue</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">stack</span><span class="jsdoc-syntax">);
+        </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">stack.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++ ) {
+            </span><span class="jsdoc-var">this.views</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">stack</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.store.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">stack</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]), </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false </span><span class="jsdoc-syntax">);
+        }
+
+    }
+
+
+
+
+
+
+});</span></code></body></html>
\ No newline at end of file
diff --git a/docs/symbols/Roo.bootstrap.Card.json b/docs/symbols/Roo.bootstrap.Card.json
new file mode 100644 (file)
index 0000000..2406f89
--- /dev/null
@@ -0,0 +1,1362 @@
+{
+  "name" : "Roo.bootstrap.Card",
+  "augments" : [
+    "Roo.bootstrap.Component",
+    "Roo.Component",
+    "Roo.util.Observable"
+  ],
+  "desc" : "Bootstrap Card class\n\n\npossible... may not be implemented..",
+  "isSingleton" : false,
+  "isStatic" : false,
+  "isBuiltin" : false,
+  "memberOf" : "Card",
+  "example" : "",
+  "deprecated" : "",
+  "since" : "",
+  "see" : "",
+  "params" : [
+    {
+      "name" : "config",
+      "type" : "Object",
+      "desc" : "The config object",
+      "isOptional" : false
+    }
+  ],
+  "returns" : [
+  ],
+  "config" : [
+    {
+      "name" : "header_size",
+      "type" : "Number",
+      "desc" : "5) H1 or H2 etc.. 0 indicates default",
+      "memberOf" : "Roo.bootstrap.Card",
+      "optvals" : [
+        "0",
+        "1",
+        "2",
+        "3",
+        "4",
+        "5"
+      ]
+    },
+    {
+      "name" : "hideMode",
+      "type" : "String",
+      "desc" : "y)\nHow this component should hidden. Supported values are\n\"visibility\" (css visibility), \"offsets\" (negative offset position) and\n\"display\" (css display) - defaults to \"display\".",
+      "memberOf" : "Roo.Component",
+      "optvals" : [
+        "display",
+        "visibility"
+      ]
+    },
+    {
+      "name" : "header_image",
+      "type" : "String",
+      "desc" : "src url of image.",
+      "memberOf" : "Roo.bootstrap.Card",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "margin_right",
+      "type" : "String",
+      "desc" : "o)",
+      "memberOf" : "Roo.bootstrap.Card",
+      "optvals" : [
+        "0",
+        "1",
+        "2",
+        "3",
+        "4",
+        "5",
+        "auto"
+      ]
+    },
+    {
+      "name" : "header",
+      "type" : "String",
+      "desc" : "",
+      "memberOf" : "Roo.bootstrap.Card",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "title",
+      "type" : "String",
+      "desc" : "",
+      "memberOf" : "Roo.bootstrap.Card",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "xattr",
+      "type" : "Object",
+      "desc" : "extra attributes to add to 'element' (used by builder to store stuff.)",
+      "memberOf" : "Roo.bootstrap.Component",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "name",
+      "type" : "string",
+      "desc" : "Specifies name attribute",
+      "memberOf" : "Roo.bootstrap.Component",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "weight",
+      "type" : "String",
+      "desc" : "k)",
+      "memberOf" : "Roo.bootstrap.Card",
+      "optvals" : [
+        "primary",
+        "warning",
+        "info",
+        "danger",
+        "secondary",
+        "success",
+        "light",
+        "dark"
+      ]
+    },
+    {
+      "name" : "display",
+      "type" : "String",
+      "desc" : "x)",
+      "memberOf" : "Roo.bootstrap.Card",
+      "optvals" : [
+        "none",
+        "inline",
+        "inline-block",
+        "block",
+        "table",
+        "table-cell",
+        "table-row",
+        "flex",
+        "inline-flex"
+      ]
+    },
+    {
+      "name" : "margin_left",
+      "type" : "String",
+      "desc" : "o)",
+      "memberOf" : "Roo.bootstrap.Card",
+      "optvals" : [
+        "0",
+        "1",
+        "2",
+        "3",
+        "4",
+        "5",
+        "auto"
+      ]
+    },
+    {
+      "name" : "padding_top",
+      "type" : "String",
+      "desc" : "5)",
+      "memberOf" : "Roo.bootstrap.Card",
+      "optvals" : [
+        "0",
+        "1",
+        "2",
+        "3",
+        "4",
+        "5"
+      ]
+    },
+    {
+      "name" : "subtitle",
+      "type" : "String",
+      "desc" : "",
+      "memberOf" : "Roo.bootstrap.Card",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "tooltip",
+      "type" : "string",
+      "desc" : "Text for the tooltip",
+      "memberOf" : "Roo.bootstrap.Component",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "padding_right",
+      "type" : "String",
+      "desc" : "5)",
+      "memberOf" : "Roo.bootstrap.Card",
+      "optvals" : [
+        "0",
+        "1",
+        "2",
+        "3",
+        "4",
+        "5"
+      ]
+    },
+    {
+      "name" : "padding",
+      "type" : "String",
+      "desc" : "5)",
+      "memberOf" : "Roo.bootstrap.Card",
+      "optvals" : [
+        "0",
+        "1",
+        "2",
+        "3",
+        "4",
+        "5"
+      ]
+    },
+    {
+      "name" : "allowDomMove",
+      "type" : "Boolean",
+      "desc" : "Whether the component can move the Dom node when rendering (defaults to true).",
+      "memberOf" : "Roo.Component",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "style",
+      "type" : "String",
+      "desc" : "any extra css",
+      "memberOf" : "Roo.bootstrap.Component",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "display_xl",
+      "type" : "String",
+      "desc" : "x)",
+      "memberOf" : "Roo.bootstrap.Card",
+      "optvals" : [
+        "none",
+        "inline",
+        "inline-block",
+        "block",
+        "table",
+        "table-cell",
+        "table-row",
+        "flex",
+        "inline-flex"
+      ]
+    },
+    {
+      "name" : "margin",
+      "type" : "String",
+      "desc" : "o)",
+      "memberOf" : "Roo.bootstrap.Card",
+      "optvals" : [
+        "0",
+        "1",
+        "2",
+        "3",
+        "4",
+        "5",
+        "auto"
+      ]
+    },
+    {
+      "name" : "actionMode",
+      "type" : "String",
+      "desc" : "which property holds the element that used for  hide() / show() / disable() / enable()\ndefault is 'el' for forms you probably want to set this to fieldEl",
+      "memberOf" : "Roo.Component",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "padding_bottom",
+      "type" : "String",
+      "desc" : "5)",
+      "memberOf" : "Roo.bootstrap.Card",
+      "optvals" : [
+        "0",
+        "1",
+        "2",
+        "3",
+        "4",
+        "5"
+      ]
+    },
+    {
+      "name" : "listeners",
+      "type" : "Object",
+      "desc" : "list of events and functions to call for this object, \nFor example :\n<pre><code>\n    listeners :  { \n       'click' : function(e) {\n           ..... \n        } ,\n        .... \n    } \n  </code></pre>",
+      "memberOf" : "Roo.util.Observable",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "container_method",
+      "type" : "string",
+      "desc" : "method to fetch parents container element (used by NavHeaderbar -  getHeaderChildContainer)",
+      "memberOf" : "Roo.bootstrap.Component",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "display_lg",
+      "type" : "String",
+      "desc" : "x)",
+      "memberOf" : "Roo.bootstrap.Card",
+      "optvals" : [
+        "none",
+        "inline",
+        "inline-block",
+        "block",
+        "table",
+        "table-cell",
+        "table-row",
+        "flex",
+        "inline-flex"
+      ]
+    },
+    {
+      "name" : "footer",
+      "type" : "String",
+      "desc" : "",
+      "memberOf" : "Roo.bootstrap.Card",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "display_xs",
+      "type" : "String",
+      "desc" : "x)",
+      "memberOf" : "Roo.bootstrap.Card",
+      "optvals" : [
+        "none",
+        "inline",
+        "inline-block",
+        "block",
+        "table",
+        "table-cell",
+        "table-row",
+        "flex",
+        "inline-flex"
+      ]
+    },
+    {
+      "name" : "cls",
+      "type" : "String",
+      "desc" : "css class",
+      "memberOf" : "Roo.bootstrap.Component",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "can_build_overlaid",
+      "type" : "Boolean",
+      "desc" : "True if element can be rebuild from a HTML page",
+      "memberOf" : "Roo.bootstrap.Component",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "margin_bottom",
+      "type" : "String",
+      "desc" : "o)",
+      "memberOf" : "Roo.bootstrap.Card",
+      "optvals" : [
+        "0",
+        "1",
+        "2",
+        "3",
+        "4",
+        "5",
+        "auto"
+      ]
+    },
+    {
+      "name" : "disableClass",
+      "type" : "String",
+      "desc" : "CSS class added to the component when it is disabled (defaults to \"x-item-disabled\").",
+      "memberOf" : "Roo.Component",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "visibilityEl",
+      "type" : "string|object",
+      "desc" : "t) What element to use for visibility (@see getVisibilityEl())",
+      "memberOf" : "Roo.bootstrap.Component",
+      "optvals" : [
+        "el",
+        "parent"
+      ]
+    },
+    {
+      "name" : "margin_top",
+      "type" : "String",
+      "desc" : "o)",
+      "memberOf" : "Roo.bootstrap.Card",
+      "optvals" : [
+        "0",
+        "1",
+        "2",
+        "3",
+        "4",
+        "5",
+        "auto"
+      ]
+    },
+    {
+      "name" : "dataId",
+      "type" : "string",
+      "desc" : "cutomer id",
+      "memberOf" : "Roo.bootstrap.Component",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "padding_left",
+      "type" : "String",
+      "desc" : "5)",
+      "memberOf" : "Roo.bootstrap.Card",
+      "optvals" : [
+        "0",
+        "1",
+        "2",
+        "3",
+        "4",
+        "5"
+      ]
+    },
+    {
+      "name" : "margin_x",
+      "type" : "String",
+      "desc" : "o)",
+      "memberOf" : "Roo.bootstrap.Card",
+      "optvals" : [
+        "0",
+        "1",
+        "2",
+        "3",
+        "4",
+        "5",
+        "auto"
+      ]
+    },
+    {
+      "name" : "margin_y",
+      "type" : "String",
+      "desc" : "o)",
+      "memberOf" : "Roo.bootstrap.Card",
+      "optvals" : [
+        "0",
+        "1",
+        "2",
+        "3",
+        "4",
+        "5",
+        "auto"
+      ]
+    },
+    {
+      "name" : "html",
+      "type" : "String",
+      "desc" : "-- html contents - or just use children..",
+      "memberOf" : "Roo.bootstrap.Card",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "padding_x",
+      "type" : "String",
+      "desc" : "5)",
+      "memberOf" : "Roo.bootstrap.Card",
+      "optvals" : [
+        "0",
+        "1",
+        "2",
+        "3",
+        "4",
+        "5"
+      ]
+    },
+    {
+      "name" : "display_sm",
+      "type" : "String",
+      "desc" : "x)",
+      "memberOf" : "Roo.bootstrap.Card",
+      "optvals" : [
+        "none",
+        "inline",
+        "inline-block",
+        "block",
+        "table",
+        "table-cell",
+        "table-row",
+        "flex",
+        "inline-flex"
+      ]
+    },
+    {
+      "name" : "padding_y",
+      "type" : "String",
+      "desc" : "5)",
+      "memberOf" : "Roo.bootstrap.Card",
+      "optvals" : [
+        "0",
+        "1",
+        "2",
+        "3",
+        "4",
+        "5"
+      ]
+    }
+  ],
+  "methods" : [
+    {
+      "name" : "tooltipEl",
+      "desc" : "Fetch the element to display the tooltip on.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.bootstrap.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Roo.Element",
+          "desc" : "defaults to this.el"
+        }
+      ]
+    },
+    {
+      "name" : "hide",
+      "desc" : "Hide a component - adds 'hidden' class",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.bootstrap.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "show",
+      "desc" : "Show a component - removes 'hidden' class",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.bootstrap.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "setVisibilityEl",
+      "desc" : "Set the element that will be used to show or hide",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.bootstrap.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "getVisibilityEl",
+      "desc" : "Get the element that will be used to show or hide",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.bootstrap.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "initEvents",
+      "desc" : "Initialize Events for the element",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.bootstrap.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "getChildContainer",
+      "desc" : "Fetch the element to add children to",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.bootstrap.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Roo.Element",
+          "desc" : "defaults to this.el"
+        }
+      ]
+    },
+    {
+      "name" : "getId",
+      "desc" : "Returns the id of this component.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "String",
+          "desc" : ""
+        }
+      ]
+    },
+    {
+      "name" : "render",
+      "desc" : "If this is a lazy rendering component, render it to its container element.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "container",
+          "type" : "String/HTMLElement/Element",
+          "desc" : "(optional) The element this component should be rendered into. If it is being applied to existing markup, this should be left off.",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "destroy",
+      "desc" : "Destroys this component by purging any event listeners, removing the component's element from the DOM,\nremoving the component from its {@link Roo.Container} (if applicable) and unregistering it from {@link Roo.ComponentMgr}.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "isVisible",
+      "desc" : "Returns true if this component is visible.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "setDisabled",
+      "desc" : "Convenience function for setting disabled/enabled by boolean.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "disabled",
+          "type" : "Boolean",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "focus",
+      "desc" : "Try to focus this component.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "selectText",
+          "type" : "Boolean",
+          "desc" : "True to also select the text in this component (if applicable)",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Roo.Component",
+          "desc" : "this"
+        }
+      ]
+    },
+    {
+      "name" : "enable",
+      "desc" : "Enable this component.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Roo.Component",
+          "desc" : "this"
+        }
+      ]
+    },
+    {
+      "name" : "setVisible",
+      "desc" : "Convenience function to hide or show this component by boolean.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "visible",
+          "type" : "Boolean",
+          "desc" : "True to show, false to hide",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Roo.Component",
+          "desc" : "this"
+        }
+      ]
+    },
+    {
+      "name" : "disable",
+      "desc" : "Disable this component.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Roo.Component",
+          "desc" : "this"
+        }
+      ]
+    },
+    {
+      "name" : "getEl",
+      "desc" : "Returns the underlying {@link Roo.Element}.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Roo.Element",
+          "desc" : "The element"
+        }
+      ]
+    },
+    {
+      "name" : "purgeListeners",
+      "desc" : "Removes all listeners for this object",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.util.Observable",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "on",
+      "desc" : "Appends an event handler to this element (shorthand for addListener)",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.util.Observable",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "eventName",
+          "type" : "String",
+          "desc" : "The type of event to listen for",
+          "isOptional" : false
+        },
+        {
+          "name" : "handler",
+          "type" : "Function",
+          "desc" : "The method the event invokes",
+          "isOptional" : false
+        },
+        {
+          "name" : "scope",
+          "type" : "Object",
+          "desc" : "(optional) The scope in which to execute the handler\nfunction. The handler function's \"this\" context.",
+          "isOptional" : false
+        },
+        {
+          "name" : "options",
+          "type" : "Object",
+          "desc" : "(optional)",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "un",
+      "desc" : "Removes a listener (shorthand for removeListener)",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.util.Observable",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "eventName",
+          "type" : "String",
+          "desc" : "The type of event to listen for",
+          "isOptional" : false
+        },
+        {
+          "name" : "handler",
+          "type" : "Function",
+          "desc" : "The handler to remove",
+          "isOptional" : false
+        },
+        {
+          "name" : "scope",
+          "type" : "Object",
+          "desc" : "(optional) The scope (this object) for the handler",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "addEvents",
+      "desc" : "Used to define events on this Observable",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.util.Observable",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "object",
+          "type" : "Object",
+          "desc" : "The object with the events defined",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "releaseCapture",
+      "desc" : "Removes <b>all</b> added captures from the Observable.",
+      "isStatic" : true,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.util.Observable",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "o",
+          "type" : "Observable",
+          "desc" : "The Observable to release",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "removeListener",
+      "desc" : "Removes a listener",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.util.Observable",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "eventName",
+          "type" : "String",
+          "desc" : "The type of event to listen for",
+          "isOptional" : false
+        },
+        {
+          "name" : "handler",
+          "type" : "Function",
+          "desc" : "The handler to remove",
+          "isOptional" : false
+        },
+        {
+          "name" : "scope",
+          "type" : "Object",
+          "desc" : "(optional) The scope (this object) for the handler",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "fireEvent",
+      "desc" : "Fires the specified event with the passed parameters (minus the event name).",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.util.Observable",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "eventName",
+          "type" : "String",
+          "desc" : "",
+          "isOptional" : false
+        },
+        {
+          "name" : "args",
+          "type" : "Object...",
+          "desc" : "Variable number of parameters are passed to handlers",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Boolean",
+          "desc" : "returns false if any of the handlers return false otherwise it returns true"
+        }
+      ]
+    },
+    {
+      "name" : "hasListener",
+      "desc" : "Checks to see if this object has any listeners for a specified event",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.util.Observable",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "eventName",
+          "type" : "String",
+          "desc" : "The name of the event to check for",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Boolean",
+          "desc" : "True if the event is being listened for, else false"
+        }
+      ]
+    },
+    {
+      "name" : "capture",
+      "desc" : "Starts capture on the specified Observable. All events will be passed\nto the supplied function with the event name + standard signature of the event\n<b>before</b> the event is fired. If the supplied function returns false,\nthe event will not fire.",
+      "isStatic" : true,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.util.Observable",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "o",
+          "type" : "Observable",
+          "desc" : "The Observable to capture",
+          "isOptional" : false
+        },
+        {
+          "name" : "fn",
+          "type" : "Function",
+          "desc" : "The function to call",
+          "isOptional" : false
+        },
+        {
+          "name" : "scope",
+          "type" : "Object",
+          "desc" : "(optional) The scope (this object) for the fn",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "addListener",
+      "desc" : "Appends an event handler to this component",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.util.Observable",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "eventName",
+          "type" : "String",
+          "desc" : "The type of event to listen for",
+          "isOptional" : false
+        },
+        {
+          "name" : "handler",
+          "type" : "Function",
+          "desc" : "The method the event invokes",
+          "isOptional" : false
+        },
+        {
+          "name" : "scope",
+          "type" : "Object",
+          "desc" : "(optional) The scope in which to execute the handler\nfunction. The handler function's \"this\" context.",
+          "isOptional" : false
+        },
+        {
+          "name" : "options",
+          "type" : "Object",
+          "desc" : "(optional) An object containing handler configuration\nproperties. This may contain any of the following properties:<ul>\n<li>scope {Object} The scope in which to execute the handler function. The handler function's \"this\" context.</li>\n<li>delay {Number} The number of milliseconds to delay the invocation of the handler after te event fires.</li>\n<li>single {Boolean} True to add a handler to handle just the next firing of the event, and then remove itself.</li>\n<li>buffer {Number} Causes the handler to be scheduled to run in an {@link Roo.util.DelayedTask} delayed\nby the specified number of milliseconds. If the event fires again within that time, the original\nhandler is <em>not</em> invoked, but the new handler is scheduled in its place.</li>\n</ul><br>\n<p>\n<b>Combining Options</b><br>\nUsing the options argument, it is possible to combine different types of listeners:<br>\n<br>\nA normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)\n\t\t<pre><code>\n\t\tel.on('click', this.onClick, this, {\n \t\t\tsingle: true,\n    \t\tdelay: 100,\n    \t\tforumId: 4\n\t\t});\n\t\t</code></pre>\n<p>\n<b>Attaching multiple handlers in 1 call</b><br>\nThe method also allows for a single argument to be passed which is a config object containing properties\nwhich specify multiple handlers.\n<pre><code>\n\t\tel.on({\n\t\t\t'click': {\n        \t\tfn: this.onClick,\n        \t\tscope: this,\n        \t\tdelay: 100\n    \t\t}, \n    \t\t'mouseover': {\n        \t\tfn: this.onMouseOver,\n        \t\tscope: this\n    \t\t},\n    \t\t'mouseout': {\n        \t\tfn: this.onMouseOut,\n        \t\tscope: this\n    \t\t}\n\t\t});\n\t\t</code></pre>\n<p>\nOr a shorthand syntax which passes the same scope object to all handlers:\n     \t<pre><code>\n\t\tel.on({\n\t\t\t'click': this.onClick,\n    \t\t'mouseover': this.onMouseOver,\n    \t\t'mouseout': this.onMouseOut,\n    \t\tscope: this\n\t\t});\n\t\t</code></pre>",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    }
+  ],
+  "events" : [
+    {
+      "name" : "childrenrendered",
+      "desc" : "Fires when the children have been rendered..",
+      "memberOf" : "Roo.bootstrap.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.bootstrap.Component",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "beforerender",
+      "desc" : "Fires before the component is rendered. Return false to stop the render.",
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.Component",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "disable",
+      "desc" : "Fires after the component is disabled.",
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.Component",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "render",
+      "desc" : "Fires after the component is rendered.",
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.Component",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "destroy",
+      "desc" : "Fires after the component is destroyed.",
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.Component",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "hide",
+      "desc" : "Fires after the component is hidden.",
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.Component",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "beforehide",
+      "desc" : "Fires before the component is hidden. Return false to stop the hide.",
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.Component",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "show",
+      "desc" : "Fires after the component is shown.",
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.Component",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "beforeshow",
+      "desc" : "Fires before the component is shown.  Return false to stop the show.",
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.Component",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "enable",
+      "desc" : "Fires after the component is enabled.",
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.Component",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "beforedestroy",
+      "desc" : "Fires before the component is destroyed. Return false to stop the destroy.",
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.Component",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs/symbols/Roo.form.ComboNested.json b/docs/symbols/Roo.form.ComboNested.json
new file mode 100644 (file)
index 0000000..b227fbf
--- /dev/null
@@ -0,0 +1,2707 @@
+{
+  "name" : "Roo.form.ComboNested",
+  "augments" : [
+    "Roo.form.ComboBox",
+    "Roo.form.TriggerField",
+    "Roo.form.TextField",
+    "Roo.form.Field",
+    "Roo.BoxComponent",
+    "Roo.Component",
+    "Roo.util.Observable"
+  ],
+  "desc" : "A combobox for that allows selection of nested items in a list,\neg.\n\n Book\n   -> red\n   -> green\n Table\n   -> square\n     ->red\n     ->green\n   -> rectangle\n     ->green",
+  "isSingleton" : false,
+  "isStatic" : false,
+  "isBuiltin" : false,
+  "memberOf" : "ComboNested",
+  "example" : "",
+  "deprecated" : "",
+  "since" : "",
+  "see" : "",
+  "params" : [
+    {
+      "name" : "config",
+      "type" : "Object",
+      "desc" : "Configuration options",
+      "isOptional" : false
+    }
+  ],
+  "returns" : [
+  ],
+  "config" : [
+    {
+      "name" : "triggerClass",
+      "type" : "String",
+      "desc" : "An additional CSS class used to style the trigger button.  The trigger will always get the\nclass 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-arrow-trigger'\nwhich displays a downward arrow icon).",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "pageSize",
+      "type" : "Number",
+      "desc" : "If greater than 0, a paging toolbar is displayed in the footer of the dropdown list and the\nfilter queries will execute with page start and limit parameters.  Only applies when mode = 'remote' (defaults to 0)",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "hideMode",
+      "type" : "String",
+      "desc" : "y)\nHow this component should hidden. Supported values are\n\"visibility\" (css visibility), \"offsets\" (negative offset position) and\n\"display\" (css display) - defaults to \"display\".",
+      "memberOf" : "Roo.Component",
+      "optvals" : [
+        "display",
+        "visibility"
+      ]
+    },
+    {
+      "name" : "disableKeyFilter",
+      "type" : "Boolean",
+      "desc" : "True to disable input keystroke filtering (defaults to false)",
+      "memberOf" : "Roo.form.TextField",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "queryParam",
+      "type" : "String",
+      "desc" : "Name of the query as it will be passed on the querystring (defaults to 'query')",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "disabled",
+      "type" : "Boolean",
+      "desc" : "True to disable the field (defaults to false).",
+      "memberOf" : "Roo.form.Field",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "title",
+      "type" : "String",
+      "desc" : "If supplied, a header element is created containing this text and added into the top of\nthe dropdown list (defaults to undefined, with no header element)",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "name",
+      "type" : "String",
+      "desc" : "The field's HTML name attribute.",
+      "memberOf" : "Roo.form.Field",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "validator",
+      "type" : "Function",
+      "desc" : "A custom validation function to be called during field validation (defaults to null).\nIf available, this function will be called only after the basic validators all return true, and will be passed the\ncurrent field value and expected to return boolean true if the value is valid or a string error message if invalid.",
+      "memberOf" : "Roo.form.TextField",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "resizable",
+      "type" : "Boolean",
+      "desc" : "True to add a resize handle to the bottom of the dropdown list (defaults to false)",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "width",
+      "type" : "Number",
+      "desc" : "width (optional) size of component",
+      "memberOf" : "Roo.BoxComponent",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "editable",
+      "type" : "Boolean",
+      "desc" : "False to prevent the user from typing text directly into the field, just like a\ntraditional select (defaults to true)",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "regexText",
+      "type" : "String",
+      "desc" : "The error text to display if {@link #regex} is used and the test fails during validation (defaults to \"\")",
+      "memberOf" : "Roo.form.TextField",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "allowDomMove",
+      "type" : "Boolean",
+      "desc" : "Whether the component can move the Dom node when rendering (defaults to true).",
+      "memberOf" : "Roo.Component",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "listWidth",
+      "type" : "Number",
+      "desc" : "The width in pixels of the dropdown list (defaults to the width of the ComboBox field)",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "height",
+      "type" : "Number",
+      "desc" : "height (optional) size of component",
+      "memberOf" : "Roo.BoxComponent",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "tpl",
+      "type" : "String/Roo.Template",
+      "desc" : "The template to use to render the output",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "typeAheadDelay",
+      "type" : "Number",
+      "desc" : "The length of time in milliseconds to wait until the typeahead text is displayed\nif typeAhead = true (defaults to 250)",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "disableClear",
+      "type" : "Boolean",
+      "desc" : "Disable showing of clear button.",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "value",
+      "type" : "Mixed",
+      "desc" : "A value to initialize this field with.",
+      "memberOf" : "Roo.form.Field",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "emptyText",
+      "type" : "String",
+      "desc" : "The default text to display in an empty field - placeholder... (defaults to null).",
+      "memberOf" : "Roo.form.TextField",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "store",
+      "type" : "Roo.data.Store",
+      "desc" : "The data store to which this combo is bound (defaults to undefined)",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "msgFx",
+      "type" : "String",
+      "desc" : "<b>Experimental</b> The effect used when displaying a validation message under the field (defaults to 'normal').",
+      "memberOf" : "Roo.form.Field",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "actionMode",
+      "type" : "String",
+      "desc" : "which property holds the element that used for  hide() / show() / disable() / enable()\ndefault is 'el' for forms you probably want to set this to fieldEl",
+      "memberOf" : "Roo.Component",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "allQuery",
+      "type" : "String",
+      "desc" : "The text query to send to the server to return all records for the list with no filtering (defaults to '')",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "msgTarget",
+      "type" : "String",
+      "desc" : "The location where error text should display.  Should be one of the following values (defaults to 'qtip'):\n<pre>\nValue         Description\n-----------   ----------------------------------------------------------------------\nqtip          Display a quick tip when the user hovers over the field\ntitle         Display a default browser title attribute popup\nunder         Add a block div beneath the field containing the error text\nside          Add an error icon to the right of the field with a popup on hover\n[element id]  Add the error text directly to the innerHTML of the specified element\n</pre>",
+      "memberOf" : "Roo.form.Field",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "minListWidth",
+      "type" : "Number",
+      "desc" : "The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if\nlistWidth has a higher value)",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "maxLengthText",
+      "type" : "String",
+      "desc" : "Error text to display if the maximum length validation fails (defaults to \"The maximum length for this field is {maxLength}\")",
+      "memberOf" : "Roo.form.TextField",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "minLengthText",
+      "type" : "String",
+      "desc" : "Error text to display if the minimum length validation fails (defaults to \"The minimum length for this field is {minLength}\")",
+      "memberOf" : "Roo.form.TextField",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "listeners",
+      "type" : "Object",
+      "desc" : "list of events and functions to call for this object, \nFor example :\n<pre><code>\n    listeners :  { \n       'click' : function(e) {\n           ..... \n        } ,\n        .... \n    } \n  </code></pre>",
+      "memberOf" : "Roo.util.Observable",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "alwaysQuery",
+      "type" : "Boolean",
+      "desc" : "Disable caching of results, and always send query",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "readOnly",
+      "type" : "Boolean",
+      "desc" : "True to mark the field as readOnly in HTML (defaults to false) -- Note: this only sets the element's readOnly DOM attribute.",
+      "memberOf" : "Roo.form.Field",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "shadow",
+      "type" : "Boolean/String",
+      "desc" : "True or \"sides\" for the default effect, \"frame\" for 4-way shadow, and \"drop\" for bottom-right",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "focusClass",
+      "type" : "String",
+      "desc" : "The CSS class to use when the field receives focus (defaults to \"x-form-focus\")",
+      "memberOf" : "Roo.form.Field",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "valueNotFoundText",
+      "type" : "String",
+      "desc" : "When using a name/value combo, if the value passed to setValue is not found in\nthe store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined)",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "hiddenName",
+      "type" : "String",
+      "desc" : "If specified, a hidden form field with this name is dynamically generated to store the\nfield's data value (defaults to the underlying DOM element's name)",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "selectedClass",
+      "type" : "String",
+      "desc" : "CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "displayField",
+      "type" : "String",
+      "desc" : "The underlying data field name to bind to this CombBox (defaults to undefined if\nmode = 'remote' or 'text' if mode = 'local')",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "hideTrigger",
+      "type" : "Boolean",
+      "desc" : "True to hide the trigger element and display only the base text field (defaults to false)",
+      "memberOf" : "Roo.form.TriggerField",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "cls",
+      "type" : "String",
+      "desc" : "A CSS class to apply to the field's underlying element.",
+      "memberOf" : "Roo.form.Field",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "validateOnBlur",
+      "type" : "Boolean",
+      "desc" : "Whether the field should validate when it loses focus (defaults to true).",
+      "memberOf" : "Roo.form.Field",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "listAlign",
+      "type" : "String",
+      "desc" : "A valid anchor position value. See {@link Roo.Element#alignTo} for details on supported\nanchor positions (defaults to 'tl-bl')",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "typeAhead",
+      "type" : "Boolean",
+      "desc" : "True to populate and autoselect the remainder of the text being typed after a configurable\ndelay (typeAheadDelay) if it matches a known value (defaults to false)",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "forceSelection",
+      "type" : "Boolean",
+      "desc" : "True to restrict the selected value to one of the values in the list, false to\nallow the user to set arbitrary text into the field (defaults to false)",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "triggerAction",
+      "type" : "String",
+      "desc" : "The action to execute when the trigger field is activated.  Use 'all' to run the\nquery specified by the allQuery config option (defaults to 'query')",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "inputType",
+      "type" : "String",
+      "desc" : "The type attribute for input fields -- e.g. radio, text, password (defaults to \"text\").",
+      "memberOf" : "Roo.form.Field",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "fieldClass",
+      "type" : "String",
+      "desc" : "The default CSS class for the field (defaults to \"x-form-field\")",
+      "memberOf" : "Roo.form.Field",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "autoCreate",
+      "type" : "Boolean/Object",
+      "desc" : "A DomHelper element spec, or true for a default element spec (defaults to:\n{tag: \"input\", type: \"text\", size: \"24\", autocomplete: \"off\"})",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "minChars",
+      "type" : "Number",
+      "desc" : "The minimum number of characters the user must type before autocomplete and typeahead activate\n(defaults to 4, does not apply if editable = false)",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "growMin",
+      "type" : "Number",
+      "desc" : "",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "vtype",
+      "type" : "String",
+      "desc" : "A validation type name as defined in {@link Roo.form.VTypes} (defaults to null)",
+      "memberOf" : "Roo.form.TextField",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "maskRe",
+      "type" : "String",
+      "desc" : "An input mask regular expression that will be used to filter keystrokes that don't match (defaults to null)",
+      "memberOf" : "Roo.form.TextField",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "allowLeadingSpace",
+      "type" : "Boolean",
+      "desc" : "True to prevent the stripping of leading white space",
+      "memberOf" : "Roo.form.TextField",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "invalidClass",
+      "type" : "String",
+      "desc" : "The CSS class to use when marking a field invalid (defaults to \"x-form-invalid\")",
+      "memberOf" : "Roo.form.Field",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "validationEvent",
+      "type" : "String/Boolean",
+      "desc" : "The event that should initiate field validation. Set to false to disable\n      automatic validation (defaults to \"keyup\").",
+      "memberOf" : "Roo.form.Field",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "blockFocus",
+      "type" : "Boolean",
+      "desc" : "Prevents all focus calls, so it can work with things like HTML edtor bar",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "fieldLabel",
+      "type" : "String",
+      "desc" : "Label to use when rendering a form.",
+      "memberOf" : "Roo.form.Field",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "selectOnFocus",
+      "type" : "Boolean",
+      "desc" : "True to select any existing text in the field immediately on focus.  Only applies\nwhen editable = true (defaults to false)",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "blankText",
+      "type" : "String",
+      "desc" : "Error text to display if the allow blank validation fails (defaults to \"This field is required\")",
+      "memberOf" : "Roo.form.TextField",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "validationDelay",
+      "type" : "Number",
+      "desc" : "The length of time in milliseconds after user input begins until validation is initiated (defaults to 250)",
+      "memberOf" : "Roo.form.Field",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "disableClass",
+      "type" : "String",
+      "desc" : "CSS class added to the component when it is disabled (defaults to \"x-item-disabled\").",
+      "memberOf" : "Roo.Component",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "tabIndex",
+      "type" : "Number",
+      "desc" : "The tabIndex for this field. Note this only applies to fields that are rendered, not those which are built via applyTo (defaults to undefined).",
+      "memberOf" : "Roo.form.Field",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "growMax",
+      "type" : "Number",
+      "desc" : "",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "transform",
+      "type" : "String/HTMLElement/Element",
+      "desc" : "The id, DOM node or element of an existing select to convert to a ComboBox",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "listClass",
+      "type" : "String",
+      "desc" : "CSS class to apply to the dropdown list element (defaults to '')",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "handleHeight",
+      "type" : "Number",
+      "desc" : "The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "regex",
+      "type" : "RegExp",
+      "desc" : "A JavaScript RegExp object to be tested against the field value during validation (defaults to null).\nIf available, this regex will be evaluated only after the basic validators all return true, and will be passed the\ncurrent field value.  If the test fails, the field will be marked invalid using {@link #regexText}.",
+      "memberOf" : "Roo.form.TextField",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "grow",
+      "type" : "Boolean",
+      "desc" : "",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "minLength",
+      "type" : "Number",
+      "desc" : "Minimum input field length required (defaults to 0)",
+      "memberOf" : "Roo.form.TextField",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "queryDelay",
+      "type" : "Number",
+      "desc" : "The length of time in milliseconds to delay between the start of typing and sending the\nquery to filter the dropdown list (defaults to 500 if mode = 'remote' or 10 if mode = 'local')",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "mode",
+      "type" : "String",
+      "desc" : "Set to 'local' if the ComboBox loads local data (defaults to 'remote' which loads from the server)",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "allowBlank",
+      "type" : "Boolean",
+      "desc" : "False to validate that the value length > 0 (defaults to true)",
+      "memberOf" : "Roo.form.TextField",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "qtip",
+      "type" : "String",
+      "desc" : "Mouse over tip",
+      "memberOf" : "Roo.form.Field",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "maxHeight",
+      "type" : "Number",
+      "desc" : "The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "valueField",
+      "type" : "String",
+      "desc" : "The underlying data value name to bind to this CombBox (defaults to undefined if\nmode = 'remote' or 'value' if mode = 'local'). \nNote: use of a valueField requires the user make a selection\nin order for a value to be mapped.",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "loadingText",
+      "type" : "String",
+      "desc" : "The text to display in the dropdown list while data is loading.  Only applies\nwhen mode = 'remote' (defaults to 'Loading...')",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "maxLength",
+      "type" : "Number",
+      "desc" : "Maximum input field length allowed (defaults to Number.MAX_VALUE)",
+      "memberOf" : "Roo.form.TextField",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "lazyRender",
+      "type" : "Boolean",
+      "desc" : "True to prevent the ComboBox from rendering until requested (should always be used when\nrendering into an Roo.Editor, defaults to false)",
+      "memberOf" : "Roo.form.ComboBox",
+      "optvals" : [
+      ]
+    },
+    {
+      "name" : "invalidText",
+      "type" : "String",
+      "desc" : "The error text to use when marking a field invalid and no message is provided (defaults to \"The value in this field is invalid\")",
+      "memberOf" : "Roo.form.Field",
+      "optvals" : [
+      ]
+    }
+  ],
+  "methods" : [
+    {
+      "name" : "getValue",
+      "desc" : "Returns the currently selected field value or empty string if no value is set.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.form.ComboBox",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "String",
+          "desc" : "value The selected value"
+        }
+      ]
+    },
+    {
+      "name" : "expand",
+      "desc" : "Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.form.ComboBox",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "setValue",
+      "desc" : "Sets the specified value into the field.  If the value finds a match, the corresponding record text\nwill be displayed in the field.  If the value does not match the data value of an existing item,\nand the valueNotFoundText config option is defined, it will be displayed as the default field text.\nOtherwise the field will be blank (although the value will still be set).",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.form.ComboBox",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "value",
+          "type" : "String",
+          "desc" : "The value to match",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "select",
+      "desc" : "Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire.\nThe store must be loaded and the list expanded for this function to work, otherwise use setValue.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.form.ComboBox",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "index",
+          "type" : "Number",
+          "desc" : "The zero-based index of the list item to select",
+          "isOptional" : false
+        },
+        {
+          "name" : "scrollIntoView",
+          "type" : "Boolean",
+          "desc" : "False to prevent the dropdown list from autoscrolling to display the\nselected item if it is not currently in view (defaults to true)",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "isExpanded",
+      "desc" : "Returns true if the dropdown list is expanded, else false.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.form.ComboBox",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "doQuery",
+      "desc" : "Execute a query to filter the dropdown list.  Fires the beforequery event prior to performing the\nquery allowing the query action to be canceled if needed.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.form.ComboBox",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "query",
+          "type" : "String",
+          "desc" : "The SQL query to execute",
+          "isOptional" : false
+        },
+        {
+          "name" : "forceAll",
+          "type" : "Boolean",
+          "desc" : "True to force the query to execute even if there are currently fewer characters\nin the field than the minimum specified by the minChars config option.  It also clears any filter previously\nsaved in the current store (defaults to false)",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "setFromData",
+      "desc" : "Sets the value of the field based on a object which is related to the record format for the store.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.form.ComboBox",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "value",
+          "type" : "Object",
+          "desc" : "the value to set as. or false on reset?",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "selectByValue",
+      "desc" : "Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire.\nThe store must be loaded and the list expanded for this function to work, otherwise use setValue.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.form.ComboBox",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "value",
+          "type" : "String",
+          "desc" : "The data value of the item to select",
+          "isOptional" : false
+        },
+        {
+          "name" : "scrollIntoView",
+          "type" : "Boolean",
+          "desc" : "False to prevent the dropdown list from autoscrolling to display the\nselected item if it is not currently in view (defaults to true)",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Boolean",
+          "desc" : "True if the value matched an item in the list, else false"
+        }
+      ]
+    },
+    {
+      "name" : "setEditable",
+      "desc" : "Allow or prevent the user from directly editing the field text.  If false is passed,\nthe user will only be able to select from the items defined in the dropdown list.  This method\nis the runtime equivalent of setting the 'editable' config option at config time.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.form.ComboBox",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "value",
+          "type" : "Boolean",
+          "desc" : "True to allow the user to directly edit the field text",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "collapse",
+      "desc" : "Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.form.ComboBox",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "clearValue",
+      "desc" : "Clears any text/value currently set in the field",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.form.ComboBox",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "onTriggerClick",
+      "desc" : "The function that should handle the trigger's click event.  This method does nothing by default until overridden\nby an implementing function.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.form.TriggerField",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "e",
+          "type" : "EventObject",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "autoSize",
+      "desc" : "",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.form.TriggerField",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "selectText",
+      "desc" : "Selects text in this field",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.form.TextField",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "start",
+          "type" : "Number",
+          "desc" : "(optional) The index where the selection should start (defaults to 0)",
+          "isOptional" : false
+        },
+        {
+          "name" : "end",
+          "type" : "Number",
+          "desc" : "(optional) The index where the selection should end (defaults to the text length)",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "validateValue",
+      "desc" : "Validates a value according to the field's validation rules and marks the field as invalid\nif the validation fails",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.form.TextField",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "value",
+          "type" : "Mixed",
+          "desc" : "The value to validate",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Boolean",
+          "desc" : "True if the value is valid, else false"
+        }
+      ]
+    },
+    {
+      "name" : "reset",
+      "desc" : "Resets the current field value to the originally-loaded value and clears any validation messages.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.form.TextField",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "validate",
+      "desc" : "Validates the field value",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.form.Field",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Boolean",
+          "desc" : "True if the value is valid, else false"
+        }
+      ]
+    },
+    {
+      "name" : "getName",
+      "desc" : "Returns the name attribute of the field if available",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.form.Field",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "String",
+          "desc" : "name The field name"
+        }
+      ]
+    },
+    {
+      "name" : "markInvalid",
+      "desc" : "Mark this field as invalid",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.form.Field",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "msg",
+          "type" : "String",
+          "desc" : "The validation message",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "getRawValue",
+      "desc" : "Returns the raw data value which may or may not be a valid, defined value.  To return a normalized value see {@link #getValue}.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.form.Field",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Mixed",
+          "desc" : "value The field value"
+        }
+      ]
+    },
+    {
+      "name" : "applyTo",
+      "desc" : "Apply the behaviors of this component to an existing element. <b>This is used instead of render().</b>",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.form.Field",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "el",
+          "type" : "String/HTMLElement/Element",
+          "desc" : "The id of the node, a DOM node or an existing Element",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Roo.form.Field",
+          "desc" : "this"
+        }
+      ]
+    },
+    {
+      "name" : "resetHasChanged",
+      "desc" : "stores the current value in loadedValue",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.form.Field",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "isDirty",
+      "desc" : "Returns true if this field has been changed since it was originally loaded and is not disabled.\nDEPRICATED  - it never worked well - use hasChanged/resetHasChanged.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.form.Field",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "setRawValue",
+      "desc" : "Sets the underlying DOM field's value directly, bypassing validation.  To set the value with validation see {@link #setValue}.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.form.Field",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "value",
+          "type" : "Mixed",
+          "desc" : "The value to set",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "clearInvalid",
+      "desc" : "Clear any invalid styles/messages for this field",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.form.Field",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "isValid",
+      "desc" : "Returns whether or not the field value is currently valid",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.form.Field",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "preventMark",
+          "type" : "Boolean",
+          "desc" : "True to disable marking the field invalid",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Boolean",
+          "desc" : "True if the value is valid, else false"
+        }
+      ]
+    },
+    {
+      "name" : "hasChanged",
+      "desc" : "checks the current value against the 'loaded' value.\nNote - will return false if 'resetHasChanged' has not been called first.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.form.Field",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "updateBox",
+      "desc" : "Sets the current box measurements of the component's underlying element.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.BoxComponent",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "box",
+          "type" : "Object",
+          "desc" : "An object in the format {x, y, width, height}",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "setPagePosition",
+      "desc" : "Sets the page XY position of the component.  To set the left and top instead, use {@link #setPosition}.\nThis method fires the move event.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.BoxComponent",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "x",
+          "type" : "Number",
+          "desc" : "The new x position",
+          "isOptional" : false
+        },
+        {
+          "name" : "y",
+          "type" : "Number",
+          "desc" : "The new y position",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "syncSize",
+      "desc" : "Force the component's size to recalculate based on the underlying element's current height and width.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.BoxComponent",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "setSize",
+      "desc" : "Sets the width and height of the component.  This method fires the resize event.  This method can accept\neither width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.BoxComponent",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "width",
+          "type" : "Number/Object",
+          "desc" : "The new width to set, or a size object in the format {width, height}",
+          "isOptional" : false
+        },
+        {
+          "name" : "height",
+          "type" : "Number",
+          "desc" : "The new height to set (not required if a size object is passed as the first arg)",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Roo.BoxComponent",
+          "desc" : "this"
+        }
+      ]
+    },
+    {
+      "name" : "getPosition",
+      "desc" : "Gets the current XY position of the component's underlying element.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.BoxComponent",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "local",
+          "type" : "Boolean",
+          "desc" : "(optional) If true the element's left and top are returned instead of page XY (defaults to false)",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Array",
+          "desc" : "The XY position of the element (e.g., [100, 200])"
+        }
+      ]
+    },
+    {
+      "name" : "onResize",
+      "desc" : "Called after the component is resized, this method is empty by default but can be implemented by any\nsubclass that needs to perform custom logic after a resize occurs.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.BoxComponent",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "adjWidth",
+          "type" : "Number",
+          "desc" : "The box-adjusted width that was set",
+          "isOptional" : false
+        },
+        {
+          "name" : "adjHeight",
+          "type" : "Number",
+          "desc" : "The box-adjusted height that was set",
+          "isOptional" : false
+        },
+        {
+          "name" : "rawWidth",
+          "type" : "Number",
+          "desc" : "The width that was originally specified",
+          "isOptional" : false
+        },
+        {
+          "name" : "rawHeight",
+          "type" : "Number",
+          "desc" : "The height that was originally specified",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "getBox",
+      "desc" : "Gets the current box measurements of the component's underlying element.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.BoxComponent",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "local",
+          "type" : "Boolean",
+          "desc" : "(optional) If true the element's left and top are returned instead of page XY (defaults to false)",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "getSize",
+      "desc" : "Gets the current size of the component's underlying element.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.BoxComponent",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Object",
+          "desc" : "An object containing the element's size {width: (element width), height: (element height)}"
+        }
+      ]
+    },
+    {
+      "name" : "onPosition",
+      "desc" : "Called after the component is moved, this method is empty by default but can be implemented by any\nsubclass that needs to perform custom logic after a move occurs.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.BoxComponent",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "x",
+          "type" : "Number",
+          "desc" : "The new x position",
+          "isOptional" : false
+        },
+        {
+          "name" : "y",
+          "type" : "Number",
+          "desc" : "The new y position",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "setPosition",
+      "desc" : "Sets the left and top of the component.  To set the page XY position instead, use {@link #setPagePosition}.\nThis method fires the move event.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.BoxComponent",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "left",
+          "type" : "Number",
+          "desc" : "The new left",
+          "isOptional" : false
+        },
+        {
+          "name" : "top",
+          "type" : "Number",
+          "desc" : "The new top",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "getId",
+      "desc" : "Returns the id of this component.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "String",
+          "desc" : ""
+        }
+      ]
+    },
+    {
+      "name" : "render",
+      "desc" : "If this is a lazy rendering component, render it to its container element.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "container",
+          "type" : "String/HTMLElement/Element",
+          "desc" : "(optional) The element this component should be rendered into. If it is being applied to existing markup, this should be left off.",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "destroy",
+      "desc" : "Destroys this component by purging any event listeners, removing the component's element from the DOM,\nremoving the component from its {@link Roo.Container} (if applicable) and unregistering it from {@link Roo.ComponentMgr}.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "isVisible",
+      "desc" : "Returns true if this component is visible.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "setDisabled",
+      "desc" : "Convenience function for setting disabled/enabled by boolean.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "disabled",
+          "type" : "Boolean",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "hide",
+      "desc" : "Hide this component.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Roo.Component",
+          "desc" : "this"
+        }
+      ]
+    },
+    {
+      "name" : "focus",
+      "desc" : "Try to focus this component.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "selectText",
+          "type" : "Boolean",
+          "desc" : "True to also select the text in this component (if applicable)",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Roo.Component",
+          "desc" : "this"
+        }
+      ]
+    },
+    {
+      "name" : "show",
+      "desc" : "Show this component.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Roo.Component",
+          "desc" : "this"
+        }
+      ]
+    },
+    {
+      "name" : "enable",
+      "desc" : "Enable this component.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Roo.Component",
+          "desc" : "this"
+        }
+      ]
+    },
+    {
+      "name" : "setVisible",
+      "desc" : "Convenience function to hide or show this component by boolean.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "visible",
+          "type" : "Boolean",
+          "desc" : "True to show, false to hide",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Roo.Component",
+          "desc" : "this"
+        }
+      ]
+    },
+    {
+      "name" : "disable",
+      "desc" : "Disable this component.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Roo.Component",
+          "desc" : "this"
+        }
+      ]
+    },
+    {
+      "name" : "getEl",
+      "desc" : "Returns the underlying {@link Roo.Element}.",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Roo.Element",
+          "desc" : "The element"
+        }
+      ]
+    },
+    {
+      "name" : "purgeListeners",
+      "desc" : "Removes all listeners for this object",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.util.Observable",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "on",
+      "desc" : "Appends an event handler to this element (shorthand for addListener)",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.util.Observable",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "eventName",
+          "type" : "String",
+          "desc" : "The type of event to listen for",
+          "isOptional" : false
+        },
+        {
+          "name" : "handler",
+          "type" : "Function",
+          "desc" : "The method the event invokes",
+          "isOptional" : false
+        },
+        {
+          "name" : "scope",
+          "type" : "Object",
+          "desc" : "(optional) The scope in which to execute the handler\nfunction. The handler function's \"this\" context.",
+          "isOptional" : false
+        },
+        {
+          "name" : "options",
+          "type" : "Object",
+          "desc" : "(optional)",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "un",
+      "desc" : "Removes a listener (shorthand for removeListener)",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.util.Observable",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "eventName",
+          "type" : "String",
+          "desc" : "The type of event to listen for",
+          "isOptional" : false
+        },
+        {
+          "name" : "handler",
+          "type" : "Function",
+          "desc" : "The handler to remove",
+          "isOptional" : false
+        },
+        {
+          "name" : "scope",
+          "type" : "Object",
+          "desc" : "(optional) The scope (this object) for the handler",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "addEvents",
+      "desc" : "Used to define events on this Observable",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.util.Observable",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "object",
+          "type" : "Object",
+          "desc" : "The object with the events defined",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "releaseCapture",
+      "desc" : "Removes <b>all</b> added captures from the Observable.",
+      "isStatic" : true,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.util.Observable",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "o",
+          "type" : "Observable",
+          "desc" : "The Observable to release",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "removeListener",
+      "desc" : "Removes a listener",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.util.Observable",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "eventName",
+          "type" : "String",
+          "desc" : "The type of event to listen for",
+          "isOptional" : false
+        },
+        {
+          "name" : "handler",
+          "type" : "Function",
+          "desc" : "The handler to remove",
+          "isOptional" : false
+        },
+        {
+          "name" : "scope",
+          "type" : "Object",
+          "desc" : "(optional) The scope (this object) for the handler",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "fireEvent",
+      "desc" : "Fires the specified event with the passed parameters (minus the event name).",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.util.Observable",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "eventName",
+          "type" : "String",
+          "desc" : "",
+          "isOptional" : false
+        },
+        {
+          "name" : "args",
+          "type" : "Object...",
+          "desc" : "Variable number of parameters are passed to handlers",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Boolean",
+          "desc" : "returns false if any of the handlers return false otherwise it returns true"
+        }
+      ]
+    },
+    {
+      "name" : "hasListener",
+      "desc" : "Checks to see if this object has any listeners for a specified event",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.util.Observable",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "eventName",
+          "type" : "String",
+          "desc" : "The name of the event to check for",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+        {
+          "name" : "",
+          "type" : "Boolean",
+          "desc" : "True if the event is being listened for, else false"
+        }
+      ]
+    },
+    {
+      "name" : "capture",
+      "desc" : "Starts capture on the specified Observable. All events will be passed\nto the supplied function with the event name + standard signature of the event\n<b>before</b> the event is fired. If the supplied function returns false,\nthe event will not fire.",
+      "isStatic" : true,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.util.Observable",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "o",
+          "type" : "Observable",
+          "desc" : "The Observable to capture",
+          "isOptional" : false
+        },
+        {
+          "name" : "fn",
+          "type" : "Function",
+          "desc" : "The function to call",
+          "isOptional" : false
+        },
+        {
+          "name" : "scope",
+          "type" : "Object",
+          "desc" : "(optional) The scope (this object) for the fn",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "addListener",
+      "desc" : "Appends an event handler to this component",
+      "isStatic" : false,
+      "isConstructor" : false,
+      "isPrivate" : false,
+      "memberOf" : "Roo.util.Observable",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "eventName",
+          "type" : "String",
+          "desc" : "The type of event to listen for",
+          "isOptional" : false
+        },
+        {
+          "name" : "handler",
+          "type" : "Function",
+          "desc" : "The method the event invokes",
+          "isOptional" : false
+        },
+        {
+          "name" : "scope",
+          "type" : "Object",
+          "desc" : "(optional) The scope in which to execute the handler\nfunction. The handler function's \"this\" context.",
+          "isOptional" : false
+        },
+        {
+          "name" : "options",
+          "type" : "Object",
+          "desc" : "(optional) An object containing handler configuration\nproperties. This may contain any of the following properties:<ul>\n<li>scope {Object} The scope in which to execute the handler function. The handler function's \"this\" context.</li>\n<li>delay {Number} The number of milliseconds to delay the invocation of the handler after te event fires.</li>\n<li>single {Boolean} True to add a handler to handle just the next firing of the event, and then remove itself.</li>\n<li>buffer {Number} Causes the handler to be scheduled to run in an {@link Roo.util.DelayedTask} delayed\nby the specified number of milliseconds. If the event fires again within that time, the original\nhandler is <em>not</em> invoked, but the new handler is scheduled in its place.</li>\n</ul><br>\n<p>\n<b>Combining Options</b><br>\nUsing the options argument, it is possible to combine different types of listeners:<br>\n<br>\nA normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)\n\t\t<pre><code>\n\t\tel.on('click', this.onClick, this, {\n \t\t\tsingle: true,\n    \t\tdelay: 100,\n    \t\tforumId: 4\n\t\t});\n\t\t</code></pre>\n<p>\n<b>Attaching multiple handlers in 1 call</b><br>\nThe method also allows for a single argument to be passed which is a config object containing properties\nwhich specify multiple handlers.\n<pre><code>\n\t\tel.on({\n\t\t\t'click': {\n        \t\tfn: this.onClick,\n        \t\tscope: this,\n        \t\tdelay: 100\n    \t\t}, \n    \t\t'mouseover': {\n        \t\tfn: this.onMouseOver,\n        \t\tscope: this\n    \t\t},\n    \t\t'mouseout': {\n        \t\tfn: this.onMouseOut,\n        \t\tscope: this\n    \t\t}\n\t\t});\n\t\t</code></pre>\n<p>\nOr a shorthand syntax which passes the same scope object to all handlers:\n     \t<pre><code>\n\t\tel.on({\n\t\t\t'click': this.onClick,\n    \t\t'mouseover': this.onMouseOver,\n    \t\t'mouseout': this.onMouseOut,\n    \t\tscope: this\n\t\t});\n\t\t</code></pre>",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    }
+  ],
+  "events" : [
+    {
+      "name" : "add",
+      "desc" : "Fires when the 'add' icon is pressed (add a listener to enable add button)",
+      "memberOf" : "Roo.form.ComboBox",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "combo",
+          "type" : "Roo.form.ComboBox",
+          "desc" : "This combo box",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "expand",
+      "desc" : "Fires when the dropdown list is expanded",
+      "memberOf" : "Roo.form.ComboBox",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "combo",
+          "type" : "Roo.form.ComboBox",
+          "desc" : "This combo box",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "collapse",
+      "desc" : "Fires when the dropdown list is collapsed",
+      "memberOf" : "Roo.form.ComboBox",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "combo",
+          "type" : "Roo.form.ComboBox",
+          "desc" : "This combo box",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "select",
+      "desc" : "Fires when a list item is selected",
+      "memberOf" : "Roo.form.ComboBox",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "combo",
+          "type" : "Roo.form.ComboBox",
+          "desc" : "This combo box",
+          "isOptional" : false
+        },
+        {
+          "name" : "record",
+          "type" : "Roo.data.Record",
+          "desc" : "The data record returned from the underlying store (or false on clear)",
+          "isOptional" : false
+        },
+        {
+          "name" : "index",
+          "type" : "Number",
+          "desc" : "The index of the selected item in the dropdown list",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "edit",
+      "desc" : "Fires when the 'edit' icon is pressed (add a listener to enable add button)",
+      "memberOf" : "Roo.form.ComboBox",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "combo",
+          "type" : "Roo.form.ComboBox",
+          "desc" : "This combo box",
+          "isOptional" : false
+        },
+        {
+          "name" : "record",
+          "type" : "Roo.data.Record|false",
+          "desc" : "The data record returned from the underlying store (or false on nothing selected)",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "beforequery",
+      "desc" : "Fires before all queries are processed. Return false to cancel the query or set cancel to true.\nThe event object passed has these properties:",
+      "memberOf" : "Roo.form.ComboBox",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "combo",
+          "type" : "Roo.form.ComboBox",
+          "desc" : "This combo box",
+          "isOptional" : false
+        },
+        {
+          "name" : "query",
+          "type" : "String",
+          "desc" : "The query",
+          "isOptional" : false
+        },
+        {
+          "name" : "forceAll",
+          "type" : "Boolean",
+          "desc" : "true to force \"all\" query",
+          "isOptional" : false
+        },
+        {
+          "name" : "cancel",
+          "type" : "Boolean",
+          "desc" : "true to cancel the query",
+          "isOptional" : false
+        },
+        {
+          "name" : "e",
+          "type" : "Object",
+          "desc" : "The query event object",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "beforeselect",
+      "desc" : "Fires before a list item is selected. Return false to cancel the selection.",
+      "memberOf" : "Roo.form.ComboBox",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "combo",
+          "type" : "Roo.form.ComboBox",
+          "desc" : "This combo box",
+          "isOptional" : false
+        },
+        {
+          "name" : "record",
+          "type" : "Roo.data.Record",
+          "desc" : "The data record returned from the underlying store",
+          "isOptional" : false
+        },
+        {
+          "name" : "index",
+          "type" : "Number",
+          "desc" : "The index of the selected item in the dropdown list",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "autosize",
+      "desc" : "Fires when the autosize function is triggered.  The field may or may not have actually changed size\naccording to the default logic, but this event provides a hook for the developer to apply additional\nlogic at runtime to resize the field if needed.",
+      "memberOf" : "Roo.form.TextField",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.form.Field",
+          "desc" : "This text field",
+          "isOptional" : false
+        },
+        {
+          "name" : "width",
+          "type" : "Number",
+          "desc" : "The new field width",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "blur",
+      "desc" : "Fires when this field loses input focus.",
+      "memberOf" : "Roo.form.Field",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.form.Field",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "valid",
+      "desc" : "Fires after the field has been validated with no errors.",
+      "memberOf" : "Roo.form.Field",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.form.Field",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "specialkey",
+      "desc" : "Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed.  You can check\n{@link Roo.EventObject#getKey} to determine which key was pressed.",
+      "memberOf" : "Roo.form.Field",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.form.Field",
+          "desc" : "",
+          "isOptional" : false
+        },
+        {
+          "name" : "e",
+          "type" : "Roo.EventObject",
+          "desc" : "The event object",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "focus",
+      "desc" : "Fires when this field receives input focus.",
+      "memberOf" : "Roo.form.Field",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.form.Field",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "keyup",
+      "desc" : "Fires after the key up",
+      "memberOf" : "Roo.form.Field",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.form.Field",
+          "desc" : "",
+          "isOptional" : false
+        },
+        {
+          "name" : "e",
+          "type" : "Roo.EventObject",
+          "desc" : "The event Object",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "invalid",
+      "desc" : "Fires after the field has been marked as invalid.",
+      "memberOf" : "Roo.form.Field",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.form.Field",
+          "desc" : "",
+          "isOptional" : false
+        },
+        {
+          "name" : "msg",
+          "type" : "String",
+          "desc" : "The validation message",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "change",
+      "desc" : "Fires just before the field blurs if the field value has changed.",
+      "memberOf" : "Roo.form.Field",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.form.Field",
+          "desc" : "",
+          "isOptional" : false
+        },
+        {
+          "name" : "newValue",
+          "type" : "Mixed",
+          "desc" : "The new value",
+          "isOptional" : false
+        },
+        {
+          "name" : "oldValue",
+          "type" : "Mixed",
+          "desc" : "The original value",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "move",
+      "desc" : "Fires after the component is moved.",
+      "memberOf" : "Roo.BoxComponent",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.Component",
+          "desc" : "",
+          "isOptional" : false
+        },
+        {
+          "name" : "x",
+          "type" : "Number",
+          "desc" : "The new x position",
+          "isOptional" : false
+        },
+        {
+          "name" : "y",
+          "type" : "Number",
+          "desc" : "The new y position",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "resize",
+      "desc" : "Fires after the component is resized.",
+      "memberOf" : "Roo.BoxComponent",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.Component",
+          "desc" : "",
+          "isOptional" : false
+        },
+        {
+          "name" : "adjWidth",
+          "type" : "Number",
+          "desc" : "The box-adjusted width that was set",
+          "isOptional" : false
+        },
+        {
+          "name" : "adjHeight",
+          "type" : "Number",
+          "desc" : "The box-adjusted height that was set",
+          "isOptional" : false
+        },
+        {
+          "name" : "rawWidth",
+          "type" : "Number",
+          "desc" : "The width that was originally specified",
+          "isOptional" : false
+        },
+        {
+          "name" : "rawHeight",
+          "type" : "Number",
+          "desc" : "The height that was originally specified",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "beforerender",
+      "desc" : "Fires before the component is rendered. Return false to stop the render.",
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.Component",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "disable",
+      "desc" : "Fires after the component is disabled.",
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.Component",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "render",
+      "desc" : "Fires after the component is rendered.",
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.Component",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "destroy",
+      "desc" : "Fires after the component is destroyed.",
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.Component",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "hide",
+      "desc" : "Fires after the component is hidden.",
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.Component",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "beforehide",
+      "desc" : "Fires before the component is hidden. Return false to stop the hide.",
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.Component",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "show",
+      "desc" : "Fires after the component is shown.",
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.Component",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "beforeshow",
+      "desc" : "Fires before the component is shown.  Return false to stop the show.",
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.Component",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "enable",
+      "desc" : "Fires after the component is enabled.",
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.Component",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    },
+    {
+      "name" : "beforedestroy",
+      "desc" : "Fires before the component is destroyed. Return false to stop the destroy.",
+      "memberOf" : "Roo.Component",
+      "example" : "",
+      "deprecated" : "",
+      "since" : "",
+      "see" : "",
+      "params" : [
+        {
+          "name" : "this",
+          "type" : "Roo.Component",
+          "desc" : "",
+          "isOptional" : false
+        }
+      ],
+      "returns" : [
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/examples/bootstrap4/dashboard4.html b/examples/bootstrap4/dashboard4.html
new file mode 100644 (file)
index 0000000..b3bada8
--- /dev/null
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Html editor for bootstrap test</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <!-- Bootstrap -->
+       <link rel="stylesheet" type="text/css" href="../../css-bootstrap4/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="../../css-bootstrap4/roojs-bootstrap.css">
+    <link rel="stylesheet" type="text/css" href="../../css-bootstrap/font-awesome.css">
+    <script type="text/javascript" src="../../roojs-debug.js"></script>
+    
+    <!-- bootstrap js.. needs to compile it later.. -->
+    <script type="text/javascript" src="../../roojs-bootstrap-debug.js"></script>
+   
+    <script type="text/javascript" src="../../Roo/bootstrap/Card.js"></script>
+
+
+    
+   
+     <script type="text/javascript">
+        Dashboard = {};
+     </script>
+
+    <!-- test code -->
+    
+    <script type="text/javascript" src="../bootstrap/dashboard4.js"></script>
+    
+  </head>
+  <body id="body">
+    <script type="text/javascript">
+      Roo.onReady(function() {
+          Roo.XComponent.build();
+      });
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/examples/view/ddview.js b/examples/view/ddview.js
new file mode 100644 (file)
index 0000000..e85c639
--- /dev/null
@@ -0,0 +1,477 @@
+Array.prototype.contains = function(element) {
+    for (var i = 0; i < this.length; i++) {
+            if (this[i] == element) {
+                return true;
+            }
+    }        
+       return false;
+};
+Roo.namespace("Roo.ux");
+
+/**
+ * @class Roo.ux.DDView
+ * A DnD enabled version of Roo.View.
+ * @param {Element/String} container The Element in which to create the View.
+ * @param {String} tpl The template string used to create the markup for each element of the View
+ * @param {Object} config The configuration properties. These include all the config options of
+ * {@link Roo.View} plus some specific to this class.<br>
+ * <p>
+ * Drag/drop is implemented by adding {@link Roo.data.Record}s to the target DDView. If copying is
+ * not being performed, the original {@link Roo.data.Record} is removed from the source DDView.<br>
+ * <p>
+ * The following extra CSS rules are needed to provide insertion point highlighting:<pre><code>
+.x-view-drag-insert-above {
+       border-top:1px dotted #3366cc;
+}
+.x-view-drag-insert-below {
+       border-bottom:1px dotted #3366cc;
+}
+</code></pre>
+ * 
+ */
+Roo.ux.DDView = function(container, tpl, config) {
+    Roo.ux.DDView.superclass.constructor.apply(this, arguments);
+    this.getEl().setStyle("outline", "0px none");
+    this.getEl().unselectable();
+    if (this.dragGroup) {
+               this.setDraggable(this.dragGroup.split(","));
+    }
+    if (this.dropGroup) {
+               this.setDroppable(this.dropGroup.split(","));
+    }
+    if (this.deletable) {
+       this.setDeletable();
+    }
+    this.isDirtyFlag = false;
+       this.addEvents({
+               "drop" : true
+       });
+};
+
+Roo.extend(Roo.ux.DDView, Roo.View, {
+/**    @cfg {String/Array} dragGroup The ddgroup name(s) for the View's DragZone. */
+/**    @cfg {String/Array} dropGroup The ddgroup name(s) for the View's DropZone. */
+/**    @cfg {Boolean} copy Causes drag operations to copy nodes rather than move. */
+/**    @cfg {Boolean} allowCopy Causes ctrl/drag operations to copy nodes rather than move. */
+
+       isFormField: true,
+
+       reset: Roo.emptyFn,
+       
+       clearInvalid: Roo.form.Field.prototype.clearInvalid,
+
+       validate: function() {
+               return true;
+       },
+       
+       destroy: function() {
+               this.purgeListeners();
+               this.getEl.removeAllListeners();
+               this.getEl().remove();
+               if (this.dragZone) {
+                       if (this.dragZone.destroy) {
+                               this.dragZone.destroy();
+                       }
+               }
+               if (this.dropZone) {
+                       if (this.dropZone.destroy) {
+                               this.dropZone.destroy();
+                       }
+               }
+       },
+
+/**    Allows this class to be an Roo.form.Field so it can be found using {@link Roo.form.BasicForm#findField}. */
+       getName: function() {
+               return this.name;
+       },
+
+/**    Loads the View from a JSON string representing the Records to put into the Store. */
+       setValue: function(v) {
+               if (!this.store) {
+                       throw "DDView.setValue(). DDView must be constructed with a valid Store";
+               }
+               var data = {};
+               data[this.store.reader.meta.root] = v ? [].concat(v) : [];
+               this.store.proxy = new Roo.data.MemoryProxy(data);
+               this.store.load();
+       },
+
+/**    @return {String} a parenthesised list of the ids of the Records in the View. */
+       getValue: function() {
+               var result = '(';
+               this.store.each(function(rec) {
+                       result += rec.id + ',';
+               });
+               return result.substr(0, result.length - 1) + ')';
+       },
+       
+       getIds: function() {
+               var i = 0, result = new Array(this.store.getCount());
+               this.store.each(function(rec) {
+                       result[i++] = rec.id;
+               });
+               return result;
+       },
+       
+       isDirty: function() {
+               return this.isDirtyFlag;
+       },
+
+/**
+ *     Part of the Roo.dd.DropZone interface. If no target node is found, the
+ *     whole Element becomes the target, and this causes the drop gesture to append.
+ */
+    getTargetFromEvent : function(e) {
+               var target = e.getTarget();
+               while ((target !== null) && (target.parentNode != this.el.dom)) {
+               target = target.parentNode;
+               }
+               if (!target) {
+                       target = this.el.dom.lastChild || this.el.dom;
+               }
+               return target;
+    },
+
+/**
+ *     Create the drag data which consists of an object which has the property "ddel" as
+ *     the drag proxy element. 
+ */
+    getDragData : function(e) {
+        var target = this.findItemFromChild(e.getTarget());
+               if(target) {
+                       this.handleSelection(e);
+                       var selNodes = this.getSelectedNodes();
+            var dragData = {
+                source: this,
+                copy: this.copy || (this.allowCopy && e.ctrlKey),
+                nodes: selNodes,
+                records: []
+                       };
+                       var selectedIndices = this.getSelectedIndexes();
+                       for (var i = 0; i < selectedIndices.length; i++) {
+                               dragData.records.push(this.store.getAt(selectedIndices[i]));
+                       }
+                       if (selNodes.length == 1) {
+                               dragData.ddel = target.cloneNode(true); // the div element
+                       } else {
+                               var div = document.createElement('div'); // create the multi element drag "ghost"
+                               div.className = 'multi-proxy';
+                               for (var i = 0, len = selNodes.length; i < len; i++) {
+                                       div.appendChild(selNodes[i].cloneNode(true));
+                               }
+                               dragData.ddel = div;
+                       }
+                       return dragData;
+               }
+               return false;
+    },
+    
+/**    Specify to which ddGroup items in this DDView may be dragged. */
+    setDraggable: function(ddGroup) {
+       if (ddGroup instanceof Array) {
+               Roo.each(ddGroup, this.setDraggable, this);
+               return;
+       }
+       if (this.dragZone) {
+               this.dragZone.addToGroup(ddGroup);
+       } else {
+            this.dragZone = new Roo.dd.DragZone(this.getEl(), {
+                    containerScroll: true,
+                    ddGroup: ddGroup
+            });
+//                     Draggability implies selection. DragZone's mousedown selects the element.
+            if (!this.multiSelect) { this.singleSelect = true; }
+
+//                     Wire the DragZone's handlers up to methods in *this*
+            this.dragZone.getDragData = this.getDragData.createDelegate(this);
+               }
+    },
+
+/**    Specify from which ddGroup this DDView accepts drops. */
+    setDroppable: function(ddGroup) {
+       if (ddGroup instanceof Array) {
+               Roo.each(ddGroup, this.setDroppable, this);
+               return;
+       }
+       if (this.dropZone) {
+               this.dropZone.addToGroup(ddGroup);
+       } else {
+                       this.dropZone = new Roo.dd.DropZone(this.getEl(), {
+                               containerScroll: true,
+                               ddGroup: ddGroup
+                       });
+
+//                     Wire the DropZone's handlers up to methods in *this*
+                       this.dropZone.getTargetFromEvent = this.getTargetFromEvent.createDelegate(this);
+                       this.dropZone.onNodeEnter = this.onNodeEnter.createDelegate(this);
+                       this.dropZone.onNodeOver = this.onNodeOver.createDelegate(this);
+                       this.dropZone.onNodeOut = this.onNodeOut.createDelegate(this);
+                       this.dropZone.onNodeDrop = this.onNodeDrop.createDelegate(this);
+               }
+    },
+
+/**    Decide whether to drop above or below a View node. */
+    getDropPoint : function(e, n, dd){
+       if (n == this.el.dom) { return "above"; }
+               var t = Roo.lib.Dom.getY(n), b = t + n.offsetHeight;
+               var c = t + (b - t) / 2;
+               var y = Roo.lib.Event.getPageY(e);
+               if(y <= c) {
+                       return "above";
+               }else{
+                       return "below";
+               }
+    },
+
+    onNodeEnter : function(n, dd, e, data){
+               return false;
+    },
+    
+    onNodeOver : function(n, dd, e, data){
+               var pt = this.getDropPoint(e, n, dd);
+               // set the insert point style on the target node
+               var dragElClass = this.dropNotAllowed;
+               if (pt) {
+                       var targetElClass;
+                       if (pt == "above"){
+                               dragElClass = n.previousSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-above";
+                               targetElClass = "x-view-drag-insert-above";
+                       } else {
+                               dragElClass = n.nextSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-below";
+                               targetElClass = "x-view-drag-insert-below";
+                       }
+                       if (this.lastInsertClass != targetElClass){
+                               Roo.fly(n).replaceClass(this.lastInsertClass, targetElClass);
+                               this.lastInsertClass = targetElClass;
+                       }
+               }
+               return dragElClass;
+       },
+
+    onNodeOut : function(n, dd, e, data){
+               this.removeDropIndicators(n);
+    },
+
+    onNodeDrop : function(n, dd, e, data){
+       if (this.fireEvent("drop", this, n, dd, e, data) === false) {
+               return false;
+       }
+       var pt = this.getDropPoint(e, n, dd);
+               var insertAt = (n == this.el.dom) ? this.nodes.length : n.nodeIndex;
+               if (pt == "below") { insertAt++; }
+               for (var i = 0; i < data.records.length; i++) {
+                       var r = data.records[i];
+                       var dup = this.store.getById(r.id);
+                       if (dup && (dd != this.dragZone)) {
+                               Roo.fly(this.getNode(this.store.indexOf(dup))).frame("red", 1);
+                       } else {
+                               if (data.copy) {
+                                       this.store.insert(insertAt++, r.copy());
+                               } else {
+                                       data.source.isDirtyFlag = true;
+                                       r.store.remove(r);
+                                       this.store.insert(insertAt++, r);
+                               }
+                               this.isDirtyFlag = true;
+                       }
+               }
+               this.dragZone.cachedTarget = null;
+               return true;
+    },
+
+    removeDropIndicators : function(n){
+               if(n){
+                       Roo.fly(n).removeClass([
+                               "x-view-drag-insert-above",
+                               "x-view-drag-insert-below"]);
+                       this.lastInsertClass = "_noclass";
+               }
+    },
+
+/**
+ *     Utility method. Add a delete option to the DDView's context menu.
+ *     @param {String} imageUrl The URL of the "delete" icon image.
+ */
+       setDeletable: function(imageUrl) {
+               if (!this.singleSelect && !this.multiSelect) {
+                       this.singleSelect = true;
+               }
+               var c = this.getContextMenu();
+               this.contextMenu.on("itemclick", function(item) {
+                       switch (item.id) {
+                               case "delete":
+                                       this.remove(this.getSelectedIndexes());
+                                       break;
+                       }
+               }, this);
+               this.contextMenu.add({
+                       icon: imageUrl || AU.resolveUrl("/images/delete.gif"),
+                       id: "delete",
+                       text: AU.getMessage("deleteItem")
+               });
+       },
+       
+/**    Return the context menu for this DDView. */
+       getContextMenu: function() {
+               if (!this.contextMenu) {
+//                     Create the View's context menu
+                       this.contextMenu = new Roo.menu.Menu({
+                               id: this.id + "-contextmenu"
+                       });
+                       this.el.on("contextmenu", this.showContextMenu, this);
+               }
+               return this.contextMenu;
+       },
+       
+       disableContextMenu: function() {
+               if (this.contextMenu) {
+                       this.el.un("contextmenu", this.showContextMenu, this);
+               }
+       },
+
+       showContextMenu: function(e, item) {
+        item = this.findItemFromChild(e.getTarget());
+               if (item) {
+                       e.stopEvent();
+                       this.select(this.getNode(item), this.multiSelect && e.ctrlKey, true);
+                       this.contextMenu.showAt(e.getXY());
+           }
+    },
+
+/**
+ *     Remove {@link Roo.data.Record}s at the specified indices.
+ *     @param {Array/Number} selectedIndices The index (or Array of indices) of Records to remove.
+ */
+    remove: function(selectedIndices) {
+               selectedIndices = [].concat(selectedIndices);
+               for (var i = 0; i < selectedIndices.length; i++) {
+                       var rec = this.store.getAt(selectedIndices[i]);
+                       this.store.remove(rec);
+               }
+    },
+
+/**
+ *     Double click fires the event, but also, if this is draggable, and there is only one other
+ *     related DropZone, it transfers the selected node.
+ */
+    onDblClick : function(e){
+        var item = this.findItemFromChild(e.getTarget());
+        if(item){
+            if (this.fireEvent("dblclick", this, this.indexOf(item), item, e) === false) {
+               return false;
+            }
+            if (this.dragGroup) {
+                   var targets = Roo.dd.DragDropMgr.getRelated(this.dragZone, true);
+                   while (targets.contains(this.dropZone)) {
+                           targets.remove(this.dropZone);
+                               }
+                   if (targets.length == 1) {
+                                       this.dragZone.cachedTarget = null;
+                       var el = Roo.get(targets[0].getEl());
+                       var box = el.getBox(true);
+                       targets[0].onNodeDrop(el.dom, {
+                               target: el.dom,
+                               xy: [box.x, box.y + box.height - 1]
+                       }, null, this.getDragData(e));
+                   }
+               }
+        }
+    },
+    
+    handleSelection: function(e) {
+               this.dragZone.cachedTarget = null;
+        var item = this.findItemFromChild(e.getTarget());
+        if (!item) {
+               this.clearSelections(true);
+               return;
+        }
+               if (item && (this.multiSelect || this.singleSelect)){
+                       if(this.multiSelect && e.shiftKey && (!e.ctrlKey) && this.lastSelection){
+                               this.select(this.getNodes(this.indexOf(this.lastSelection), item.nodeIndex), false);
+                       }else if (this.isSelected(this.getNode(item)) && e.ctrlKey){
+                               this.unselect(item);
+                       } else {
+                               this.select(item, this.multiSelect && e.ctrlKey);
+                               this.lastSelection = item;
+                       }
+               }
+    },
+
+    onItemClick : function(item, index, e){
+               if(this.fireEvent("beforeclick", this, index, item, e) === false){
+                       return false;
+               }
+               return true;
+    },
+
+    unselect : function(nodeInfo, suppressEvent){
+               var node = this.getNode(nodeInfo);
+               if(node && this.isSelected(node)){
+                       if(this.fireEvent("beforeselect", this, node, this.selections) !== false){
+                               Roo.fly(node).removeClass(this.selectedClass);
+                               this.selections.remove(node);
+                               if(!suppressEvent){
+                                       this.fireEvent("selectionchange", this, this.selections);
+                               }
+                       }
+               }
+    }
+});
+
+function initializePage() {
+       var collection=[
+               {'id':'40','entityImageUrl':'../shared/icons/fam/user_add.png','componentDescription':'Add User'},
+               {'id':'27','entityImageUrl':'../shared/icons/fam/user_delete.png','componentDescription':'Delete User'},
+               {'id':'28','entityImageUrl':'../shared/icons/fam/user_comment.png','componentDescription':'Comment on User'}
+       ];
+       var rec=Roo.data.Record.create([
+               {name:'id'},
+               {name:'entityImageUrl'},
+               {name:'componentDescription'}
+       ]);
+       var reader=new Roo.data.JsonReader({
+               root:'collection',
+               id:'id'
+       },rec);
+       var ds=new Roo.data.Store({
+               proxy:new Roo.data.MemoryProxy({collection:collection}),
+               reader:reader
+       });
+       var view=new Roo.ux.DDView('left-view-container','<div id=\u0027subcomponent_{id}\u0027 class=\u0027Subcomponent\u0027><img align=\u0027top\u0027 height=\u002716px\u0027 width=\u002716px\u0027 src=\u0027{entityImageUrl}\u0027>{componentDescription}</div>',{
+               isFormField:true,
+               name:'subComponents',
+               dragGroup:'availComponentDDGroup,subComponentDDGroup',
+               dropGroup:'availComponentDDGroup,subComponentDDGroup',
+               selectedClass: 'asp-selected',
+               jsonRoot: 'collection',
+               store: ds
+       });
+       ds.load();
+
+       collection=[];
+       rec=Roo.data.Record.create([
+               {name:'id'},
+               {name:'entityImageUrl'},
+               {name:'componentDescription'}
+       ]);
+       reader=new Roo.data.JsonReader({
+               root:'collection',
+               id:'id'
+       },rec);
+       ds=new Roo.data.Store({
+               proxy:new Roo.data.MemoryProxy({collection:collection}),
+               reader:reader
+       });
+       view=new Roo.ux.DDView('right-view-container','<div id=\u0027component_{id}\u0027 class=\u0027Component\u0027><img align=\u0027top\u0027 height=\u002716px\u0027 width=\u002716px\u0027 src=\u0027{entityImageUrl}\u0027>{componentDescription}</div>',{
+               isFormField:true,
+               name:'availableSubComponents',
+               multiSelect: true,
+               dragGroup:'subComponentDDGroup',
+               dropGroup:'availComponentDDGroup',
+               selectedClass: 'asp-selected',
+               jsonRoot: 'collection',
+               store: ds
+       });
+       ds.load();
+}
+Roo.onReady(initializePage);
\ No newline at end of file