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

   1 <html><head><title>Roo/Toolbar.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * &lt;script type=&quot;text/javascript&quot;&gt;
  10  */
  11
  12 /**
  13  * @class Roo.Toolbar
  14  * Basic Toolbar class.
  15  * @constructor
  16  * Creates a new Toolbar
  17  * @param {Object} container The config object
  18  */
  19 </span><span class="jsdoc-var">Roo.Toolbar </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">container</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">buttons</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">)
  20 {
  21     </span><span class="jsdoc-comment">/// old consturctor format still supported..
  22     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">container </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// omit the container for later rendering
  23         </span><span class="jsdoc-var">buttons </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">container</span><span class="jsdoc-syntax">;
  24         </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">buttons</span><span class="jsdoc-syntax">;
  25         </span><span class="jsdoc-var">container </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
  26     }
  27     </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">container</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'object' </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">container.xtype</span><span class="jsdoc-syntax">) {
  28         </span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">container</span><span class="jsdoc-syntax">;
  29         </span><span class="jsdoc-var">container </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.container</span><span class="jsdoc-syntax">;
  30         </span><span class="jsdoc-var">buttons </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.buttons </span><span class="jsdoc-syntax">|| []; </span><span class="jsdoc-comment">// not really - use items!!
  31     </span><span class="jsdoc-syntax">}
  32     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">xitems </span><span class="jsdoc-syntax">= [];
  33     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">config.items</span><span class="jsdoc-syntax">) {
  34         </span><span class="jsdoc-var">xitems </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.items</span><span class="jsdoc-syntax">;
  35         </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">config.items</span><span class="jsdoc-syntax">;
  36     }
  37     </span><span class="jsdoc-var">Roo.apply</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">);
  38     </span><span class="jsdoc-var">this.buttons </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">buttons</span><span class="jsdoc-syntax">;
  39
  40     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">container</span><span class="jsdoc-syntax">){
  41         </span><span class="jsdoc-var">this.render</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">container</span><span class="jsdoc-syntax">);
  42     }
  43     </span><span class="jsdoc-var">this.xitems </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">xitems</span><span class="jsdoc-syntax">;
  44     </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xitems</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">) {
  45         </span><span class="jsdoc-var">this.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">);
  46     }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
  47
  48 };
  49
  50 </span><span class="jsdoc-var">Roo.Toolbar.prototype </span><span class="jsdoc-syntax">= {
  51     </span><span class="jsdoc-comment">/**
  52      * @cfg {Array} items
  53      * array of button configs or elements to add (will be converted to a MixedCollection)
  54      */
  55
  56     /**
  57      * @cfg {String/HTMLElement/Element} container
  58      * The id or element that will contain the toolbar
  59      */
  60     // private
  61     </span><span class="jsdoc-var">render </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">){
  62         </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">);
  63         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">){
  64             </span><span class="jsdoc-var">this.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">);
  65         }
  66         </span><span class="jsdoc-comment">// using a table allows for vertical alignment
  67         // 100% width is needed by Safari...
  68         </span><span class="jsdoc-var">this.el.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'&lt;div class=&quot;x-toolbar x-small-editor&quot;&gt;&lt;table cellspacing=&quot;0&quot;&gt;&lt;tr&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;'</span><span class="jsdoc-syntax">);
  69         </span><span class="jsdoc-var">this.tr </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;tr&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
  70         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">autoId </span><span class="jsdoc-syntax">= 0;
  71         </span><span class="jsdoc-var">this.items </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.util.MixedCollection</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
  72             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">o.id </span><span class="jsdoc-syntax">|| (</span><span class="jsdoc-string">&quot;item&quot; </span><span class="jsdoc-syntax">+ (++</span><span class="jsdoc-var">autoId</span><span class="jsdoc-syntax">));
  73         });
  74         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.buttons</span><span class="jsdoc-syntax">){
  75             </span><span class="jsdoc-var">this.add.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.buttons</span><span class="jsdoc-syntax">);
  76             </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.buttons</span><span class="jsdoc-syntax">;
  77         }
  78     },
  79
  80     </span><span class="jsdoc-comment">/**
  81      * Adds element(s) to the toolbar -- this function takes a variable number of
  82      * arguments of mixed type and adds them to the toolbar.
  83      * @param {Mixed} arg1 The following types of arguments are all valid:&lt;br /&gt;
  84      * &lt;ul&gt;
  85      * &lt;li&gt;{@link Roo.Toolbar.Button} config: A valid button config object (equivalent to {@link #addButton})&lt;/li&gt;
  86      * &lt;li&gt;HtmlElement: Any standard HTML element (equivalent to {@link #addElement})&lt;/li&gt;
  87      * &lt;li&gt;Field: Any form field (equivalent to {@link #addField})&lt;/li&gt;
  88      * &lt;li&gt;Item: Any subclass of {@link Roo.Toolbar.Item} (equivalent to {@link #addItem})&lt;/li&gt;
  89      * &lt;li&gt;String: Any generic string (gets wrapped in a {@link Roo.Toolbar.TextItem}, equivalent to {@link #addText}).
  90      * Note that there are a few special strings that are treated differently as explained nRoo.&lt;/li&gt;
  91      * &lt;li&gt;'separator' or '-': Creates a separator element (equivalent to {@link #addSeparator})&lt;/li&gt;
  92      * &lt;li&gt;' ': Creates a spacer element (equivalent to {@link #addSpacer})&lt;/li&gt;
  93      * &lt;li&gt;'-&gt;': Creates a fill element (equivalent to {@link #addFill})&lt;/li&gt;
  94      * &lt;/ul&gt;
  95      * @param {Mixed} arg2
  96      * @param {Mixed} etc.
  97      */
  98     </span><span class="jsdoc-var">add </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
  99         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">l </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">a.length</span><span class="jsdoc-syntax">;
 100         </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">l</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++){
 101             </span><span class="jsdoc-var">this._add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]);
 102         }
 103     },
 104     </span><span class="jsdoc-comment">// private..
 105     </span><span class="jsdoc-var">_add </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">) {
 106
 107         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.xtype</span><span class="jsdoc-syntax">) {
 108             </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.factory</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Toolbar</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">el.xtype</span><span class="jsdoc-syntax">]) == </span><span class="jsdoc-string">'undefined' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">Roo.form </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.Toolbar</span><span class="jsdoc-syntax">);
 109         }
 110
 111         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.applyTo</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// some kind of form field
 112             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.addField</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
 113         }
 114         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.render</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// some kind of Toolbar.Item
 115             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.addItem</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
 116         }
 117         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;string&quot;</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// string
 118             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;separator&quot; </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;-&quot;</span><span class="jsdoc-syntax">){
 119                 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.addSeparator</span><span class="jsdoc-syntax">();
 120             }
 121             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot; &quot;</span><span class="jsdoc-syntax">){
 122                 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.addSpacer</span><span class="jsdoc-syntax">();
 123             }
 124             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;-&gt;&quot;</span><span class="jsdoc-syntax">){
 125                 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.addFill</span><span class="jsdoc-syntax">();
 126             }
 127             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.addText</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
 128
 129         }
 130         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.tagName</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// element
 131             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.addElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
 132         }
 133         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;object&quot;</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// must be button config?
 134             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.addButton</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
 135         }
 136         </span><span class="jsdoc-comment">// and now what?!?!
 137         </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
 138
 139     },
 140
 141     </span><span class="jsdoc-comment">/**
 142      * Add an Xtype element
 143      * @param {Object} xtype Xtype Object
 144      * @return {Object} created Object
 145      */
 146     </span><span class="jsdoc-var">addxtype </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">){
 147         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
 148     },
 149
 150     </span><span class="jsdoc-comment">/**
 151      * Returns the Element for this toolbar.
 152      * @return {Roo.Element}
 153      */
 154     </span><span class="jsdoc-var">getEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 155         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
 156     },
 157
 158     </span><span class="jsdoc-comment">/**
 159      * Adds a separator
 160      * @return {Roo.Toolbar.Item} The separator item
 161      */
 162     </span><span class="jsdoc-var">addSeparator </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 163         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.addItem</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Toolbar.Separator</span><span class="jsdoc-syntax">());
 164     },
 165
 166     </span><span class="jsdoc-comment">/**
 167      * Adds a spacer element
 168      * @return {Roo.Toolbar.Spacer} The spacer item
 169      */
 170     </span><span class="jsdoc-var">addSpacer </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 171         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.addItem</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Toolbar.Spacer</span><span class="jsdoc-syntax">());
 172     },
 173
 174     </span><span class="jsdoc-comment">/**
 175      * Adds a fill element that forces subsequent additions to the right side of the toolbar
 176      * @return {Roo.Toolbar.Fill} The fill item
 177      */
 178     </span><span class="jsdoc-var">addFill </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 179         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.addItem</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Toolbar.Fill</span><span class="jsdoc-syntax">());
 180     },
 181
 182     </span><span class="jsdoc-comment">/**
 183      * Adds any standard HTML element to the toolbar
 184      * @param {String/HTMLElement/Element} el The element or id of the element to add
 185      * @return {Roo.Toolbar.Item} The element's item
 186      */
 187     </span><span class="jsdoc-var">addElement </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">){
 188         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.addItem</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Toolbar.Item</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">));
 189     },
 190     </span><span class="jsdoc-comment">/**
 191      * Collection of items on the toolbar.. (only Toolbar Items, so use fields to retrieve fields)
 192      * @type Roo.util.MixedCollection
 193      */
 194     </span><span class="jsdoc-var">items </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 195
 196     </span><span class="jsdoc-comment">/**
 197      * Adds any Toolbar.Item or subclass
 198      * @param {Roo.Toolbar.Item} item
 199      * @return {Roo.Toolbar.Item} The item
 200      */
 201     </span><span class="jsdoc-var">addItem </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">){
 202         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">td </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.nextBlock</span><span class="jsdoc-syntax">();
 203         </span><span class="jsdoc-var">item.render</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">td</span><span class="jsdoc-syntax">);
 204         </span><span class="jsdoc-var">this.items.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">);
 205         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">;
 206     },
 207
 208     </span><span class="jsdoc-comment">/**
 209      * Adds a button (or buttons). See {@link Roo.Toolbar.Button} for more info on the config.
 210      * @param {Object/Array} config A button config or array of configs
 211      * @return {Roo.Toolbar.Button/Array}
 212      */
 213     </span><span class="jsdoc-var">addButton </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
 214         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">){
 215             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">buttons </span><span class="jsdoc-syntax">= [];
 216             </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
 217                 </span><span class="jsdoc-var">buttons.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.addButton</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]));
 218             }
 219             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">buttons</span><span class="jsdoc-syntax">;
 220         }
 221         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">;
 222         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!(</span><span class="jsdoc-var">config </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Roo.Toolbar.Button</span><span class="jsdoc-syntax">)){
 223             </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.split </span><span class="jsdoc-syntax">?
 224                 </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Toolbar.SplitButton</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">) :
 225                 </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Toolbar.Button</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
 226         }
 227         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">td </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.nextBlock</span><span class="jsdoc-syntax">();
 228         </span><span class="jsdoc-var">b.render</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">td</span><span class="jsdoc-syntax">);
 229         </span><span class="jsdoc-var">this.items.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">);
 230         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">;
 231     },
 232
 233     </span><span class="jsdoc-comment">/**
 234      * Adds text to the toolbar
 235      * @param {String} text The text to add
 236      * @return {Roo.Toolbar.Item} The element's item
 237      */
 238     </span><span class="jsdoc-var">addText </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">){
 239         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.addItem</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Toolbar.TextItem</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">));
 240     },
 241
 242     </span><span class="jsdoc-comment">/**
 243      * Inserts any {@link Roo.Toolbar.Item}/{@link Roo.Toolbar.Button} at the specified index.
 244      * @param {Number} index The index where the item is to be inserted
 245      * @param {Object/Roo.Toolbar.Item/Roo.Toolbar.Button (may be Array)} item The button, or button config object to be inserted.
 246      * @return {Roo.Toolbar.Button/Item}
 247      */
 248     </span><span class="jsdoc-var">insertButton </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">){
 249         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">){
 250             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">buttons </span><span class="jsdoc-syntax">= [];
 251             </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">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">item.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
 252                </span><span class="jsdoc-var">buttons.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.insertButton</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]));
 253             }
 254             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">buttons</span><span class="jsdoc-syntax">;
 255         }
 256         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!(</span><span class="jsdoc-var">item </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Roo.Toolbar.Button</span><span class="jsdoc-syntax">)){
 257            </span><span class="jsdoc-var">item </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Toolbar.Button</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">);
 258         }
 259         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">td </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;td&quot;</span><span class="jsdoc-syntax">);
 260         </span><span class="jsdoc-var">this.tr.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">td</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.tr.childNodes</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">]);
 261         </span><span class="jsdoc-var">item.render</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">td</span><span class="jsdoc-syntax">);
 262         </span><span class="jsdoc-var">this.items.insert</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">);
 263         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">;
 264     },
 265
 266     </span><span class="jsdoc-comment">/**
 267      * Adds a new element to the toolbar from the passed {@link Roo.DomHelper} config.
 268      * @param {Object} config
 269      * @return {Roo.Toolbar.Item} The element's item
 270      */
 271     </span><span class="jsdoc-var">addDom </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">returnEl</span><span class="jsdoc-syntax">){
 272         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">td </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.nextBlock</span><span class="jsdoc-syntax">();
 273         </span><span class="jsdoc-var">Roo.DomHelper.overwrite</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">td</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
 274         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ti </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Toolbar.Item</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">td.firstChild</span><span class="jsdoc-syntax">);
 275         </span><span class="jsdoc-var">ti.render</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">td</span><span class="jsdoc-syntax">);
 276         </span><span class="jsdoc-var">this.items.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ti</span><span class="jsdoc-syntax">);
 277         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">ti</span><span class="jsdoc-syntax">;
 278     },
 279
 280     </span><span class="jsdoc-comment">/**
 281      * Collection of fields on the toolbar.. usefull for quering (value is false if there are no fields)
 282      * @type Roo.util.MixedCollection
 283      */
 284     </span><span class="jsdoc-var">fields </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 285
 286     </span><span class="jsdoc-comment">/**
 287      * Adds a dynamically rendered Roo.form field (TextField, ComboBox, etc).
 288      * Note: the field should not have been rendered yet. For a field that has already been
 289      * rendered, use {@link #addElement}.
 290      * @param {Roo.form.Field} field
 291      * @return {Roo.ToolbarItem}
 292      */
 293
 294
 295     </span><span class="jsdoc-var">addField </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">field</span><span class="jsdoc-syntax">) {
 296         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.fields</span><span class="jsdoc-syntax">) {
 297             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">autoId </span><span class="jsdoc-syntax">= 0;
 298             </span><span class="jsdoc-var">this.fields </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.util.MixedCollection</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
 299                 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">o.id </span><span class="jsdoc-syntax">|| (</span><span class="jsdoc-string">&quot;item&quot; </span><span class="jsdoc-syntax">+ (++</span><span class="jsdoc-var">autoId</span><span class="jsdoc-syntax">));
 300             });
 301
 302         }
 303
 304         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">td </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.nextBlock</span><span class="jsdoc-syntax">();
 305         </span><span class="jsdoc-var">field.render</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">td</span><span class="jsdoc-syntax">);
 306         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ti </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Toolbar.Item</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">td.firstChild</span><span class="jsdoc-syntax">);
 307         </span><span class="jsdoc-var">ti.render</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">td</span><span class="jsdoc-syntax">);
 308         </span><span class="jsdoc-var">this.items.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ti</span><span class="jsdoc-syntax">);
 309         </span><span class="jsdoc-var">this.fields.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">field</span><span class="jsdoc-syntax">);
 310         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">ti</span><span class="jsdoc-syntax">;
 311     },
 312     </span><span class="jsdoc-comment">/**
 313      * Hide the toolbar
 314      * @method hide
 315      */
 316
 317
 318     </span><span class="jsdoc-var">hide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 319     {
 320         </span><span class="jsdoc-var">this.el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.setVisibilityMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Element.DISPLAY</span><span class="jsdoc-syntax">);
 321         </span><span class="jsdoc-var">this.el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.hide</span><span class="jsdoc-syntax">();
 322     },
 323     </span><span class="jsdoc-comment">/**
 324      * Show the toolbar
 325      * @method show
 326      */
 327     </span><span class="jsdoc-var">show </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 328     {
 329         </span><span class="jsdoc-var">this.el.child</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.show</span><span class="jsdoc-syntax">();
 330     },
 331
 332     </span><span class="jsdoc-comment">// private
 333     </span><span class="jsdoc-var">nextBlock </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 334         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">td </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;td&quot;</span><span class="jsdoc-syntax">);
 335         </span><span class="jsdoc-var">this.tr.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">td</span><span class="jsdoc-syntax">);
 336         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">td</span><span class="jsdoc-syntax">;
 337     },
 338
 339     </span><span class="jsdoc-comment">// private
 340     </span><span class="jsdoc-var">destroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 341         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.items</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// rendered?
 342             </span><span class="jsdoc-var">Roo.destroy.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.items.items</span><span class="jsdoc-syntax">);
 343         }
 344         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fields</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// rendered?
 345             </span><span class="jsdoc-var">Roo.destroy.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.fields.items</span><span class="jsdoc-syntax">);
 346         }
 347         </span><span class="jsdoc-var">Roo.Element.uncache</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.tr</span><span class="jsdoc-syntax">);
 348     }
 349 };
 350
 351 </span><span class="jsdoc-comment">/**
 352  * @class Roo.Toolbar.Item
 353  * The base class that other classes should extend in order to get some basic common toolbar item functionality.
 354  * @constructor
 355  * Creates a new Item
 356  * @param {HTMLElement} el
 357  */
 358 </span><span class="jsdoc-var">Roo.Toolbar.Item </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">){
 359     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= {};
 360     </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">el.xtype</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) {
 361         </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">;
 362         </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cfg.el</span><span class="jsdoc-syntax">;
 363     }
 364
 365     </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.getDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
 366     </span><span class="jsdoc-var">this.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">);
 367     </span><span class="jsdoc-var">this.hidden </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 368
 369     </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
 370          </span><span class="jsdoc-comment">/**
 371              * @event render
 372              * Fires when the button is rendered
 373              * @param {Button} this
 374              */
 375         </span><span class="jsdoc-string">'render'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
 376     </span><span class="jsdoc-syntax">});
 377     </span><span class="jsdoc-var">Roo.Toolbar.Item.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">);
 378 };
 379 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Toolbar.Item</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.util.Observable</span><span class="jsdoc-syntax">, {
 380 </span><span class="jsdoc-comment">//Roo.Toolbar.Item.prototype = {
 381
 382     /**
 383      * Get this item's HTML Element
 384      * @return {HTMLElement}
 385      */
 386     </span><span class="jsdoc-var">getEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 387        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
 388     },
 389
 390     </span><span class="jsdoc-comment">// private
 391     </span><span class="jsdoc-var">render </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">td</span><span class="jsdoc-syntax">){
 392
 393          </span><span class="jsdoc-var">this.td </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">td</span><span class="jsdoc-syntax">;
 394         </span><span class="jsdoc-var">td.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">);
 395
 396         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'render'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 397     },
 398
 399     </span><span class="jsdoc-comment">/**
 400      * Removes and destroys this item.
 401      */
 402     </span><span class="jsdoc-var">destroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 403         </span><span class="jsdoc-var">this.td.parentNode.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.td</span><span class="jsdoc-syntax">);
 404     },
 405
 406     </span><span class="jsdoc-comment">/**
 407      * Shows this item.
 408      */
 409     </span><span class="jsdoc-var">show</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 410         </span><span class="jsdoc-var">this.hidden </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 411         </span><span class="jsdoc-var">this.td.style.display </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">;
 412     },
 413
 414     </span><span class="jsdoc-comment">/**
 415      * Hides this item.
 416      */
 417     </span><span class="jsdoc-var">hide</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 418         </span><span class="jsdoc-var">this.hidden </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 419         </span><span class="jsdoc-var">this.td.style.display </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;none&quot;</span><span class="jsdoc-syntax">;
 420     },
 421
 422     </span><span class="jsdoc-comment">/**
 423      * Convenience function for boolean show/hide.
 424      * @param {Boolean} visible true to show/false to hide
 425      */
 426     </span><span class="jsdoc-var">setVisible</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">visible</span><span class="jsdoc-syntax">){
 427         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">visible</span><span class="jsdoc-syntax">) {
 428             </span><span class="jsdoc-var">this.show</span><span class="jsdoc-syntax">();
 429         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 430             </span><span class="jsdoc-var">this.hide</span><span class="jsdoc-syntax">();
 431         }
 432     },
 433
 434     </span><span class="jsdoc-comment">/**
 435      * Try to focus this item.
 436      */
 437     </span><span class="jsdoc-var">focus </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 438         </span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.focus</span><span class="jsdoc-syntax">();
 439     },
 440
 441     </span><span class="jsdoc-comment">/**
 442      * Disables this item.
 443      */
 444     </span><span class="jsdoc-var">disable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 445         </span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.td</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-item-disabled&quot;</span><span class="jsdoc-syntax">);
 446         </span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 447         </span><span class="jsdoc-var">this.el.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 448     },
 449
 450     </span><span class="jsdoc-comment">/**
 451      * Enables this item.
 452      */
 453     </span><span class="jsdoc-var">enable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 454         </span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.td</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-item-disabled&quot;</span><span class="jsdoc-syntax">);
 455         </span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 456         </span><span class="jsdoc-var">this.el.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 457     }
 458 });
 459
 460
 461 </span><span class="jsdoc-comment">/**
 462  * @class Roo.Toolbar.Separator
 463  * @extends Roo.Toolbar.Item
 464  * A simple toolbar separator class
 465  * @constructor
 466  * Creates a new Separator
 467  */
 468 </span><span class="jsdoc-var">Roo.Toolbar.Separator </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">){
 469
 470     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;span&quot;</span><span class="jsdoc-syntax">);
 471     </span><span class="jsdoc-var">s.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;ytb-sep&quot;</span><span class="jsdoc-syntax">;
 472     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">) {
 473         </span><span class="jsdoc-var">cfg.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">;
 474     }
 475
 476     </span><span class="jsdoc-var">Roo.Toolbar.Separator.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">);
 477 };
 478 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Toolbar.Separator</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.Toolbar.Item</span><span class="jsdoc-syntax">, {
 479     </span><span class="jsdoc-var">enable</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">Roo.emptyFn</span><span class="jsdoc-syntax">,
 480     </span><span class="jsdoc-var">disable</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">Roo.emptyFn</span><span class="jsdoc-syntax">,
 481     </span><span class="jsdoc-var">focus</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">Roo.emptyFn
 482 </span><span class="jsdoc-syntax">});
 483
 484 </span><span class="jsdoc-comment">/**
 485  * @class Roo.Toolbar.Spacer
 486  * @extends Roo.Toolbar.Item
 487  * A simple element that adds extra horizontal space to a toolbar.
 488  * @constructor
 489  * Creates a new Spacer
 490  */
 491 </span><span class="jsdoc-var">Roo.Toolbar.Spacer </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">){
 492     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;div&quot;</span><span class="jsdoc-syntax">);
 493     </span><span class="jsdoc-var">s.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;ytb-spacer&quot;</span><span class="jsdoc-syntax">;
 494     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">) {
 495         </span><span class="jsdoc-var">cfg.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">;
 496     }
 497     </span><span class="jsdoc-var">Roo.Toolbar.Spacer.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">);
 498 };
 499 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Toolbar.Spacer</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.Toolbar.Item</span><span class="jsdoc-syntax">, {
 500     </span><span class="jsdoc-var">enable</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">Roo.emptyFn</span><span class="jsdoc-syntax">,
 501     </span><span class="jsdoc-var">disable</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">Roo.emptyFn</span><span class="jsdoc-syntax">,
 502     </span><span class="jsdoc-var">focus</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">Roo.emptyFn
 503 </span><span class="jsdoc-syntax">});
 504
 505 </span><span class="jsdoc-comment">/**
 506  * @class Roo.Toolbar.Fill
 507  * @extends Roo.Toolbar.Spacer
 508  * A simple element that adds a greedy (100% width) horizontal space to a toolbar.
 509  * @constructor
 510  * Creates a new Spacer
 511  */
 512 </span><span class="jsdoc-var">Roo.Toolbar.Fill </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Toolbar.Spacer</span><span class="jsdoc-syntax">, {
 513     </span><span class="jsdoc-comment">// private
 514     </span><span class="jsdoc-var">render </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">td</span><span class="jsdoc-syntax">){
 515         </span><span class="jsdoc-var">td.style.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'100%'</span><span class="jsdoc-syntax">;
 516         </span><span class="jsdoc-var">Roo.Toolbar.Fill.superclass.render.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">td</span><span class="jsdoc-syntax">);
 517     }
 518 });
 519
 520 </span><span class="jsdoc-comment">/**
 521  * @class Roo.Toolbar.TextItem
 522  * @extends Roo.Toolbar.Item
 523  * A simple class that renders text directly into a toolbar.
 524  * @constructor
 525  * Creates a new TextItem
 526  * @param {String} text
 527  */
 528 </span><span class="jsdoc-var">Roo.Toolbar.TextItem </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">){
 529     </span><span class="jsdoc-keyword">var  </span><span class="jsdoc-var">text </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">;
 530     </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">cfg</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'object'</span><span class="jsdoc-syntax">) {
 531         </span><span class="jsdoc-var">text </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cfg.text </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">;
 532     }  </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
 533         </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
 534     }
 535     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;span&quot;</span><span class="jsdoc-syntax">);
 536     </span><span class="jsdoc-var">s.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;ytb-text&quot;</span><span class="jsdoc-syntax">;
 537     </span><span class="jsdoc-var">s.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">;
 538     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">) {
 539         </span><span class="jsdoc-var">cfg.el  </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">;
 540     }
 541
 542     </span><span class="jsdoc-var">Roo.Toolbar.TextItem.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">||  </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">);
 543 };
 544 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Toolbar.TextItem</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.Toolbar.Item</span><span class="jsdoc-syntax">, {
 545
 546
 547     </span><span class="jsdoc-var">enable</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">Roo.emptyFn</span><span class="jsdoc-syntax">,
 548     </span><span class="jsdoc-var">disable</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">Roo.emptyFn</span><span class="jsdoc-syntax">,
 549     </span><span class="jsdoc-var">focus</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">Roo.emptyFn
 550 </span><span class="jsdoc-syntax">});
 551
 552 </span><span class="jsdoc-comment">/**
 553  * @class Roo.Toolbar.Button
 554  * @extends Roo.Button
 555  * A button that renders into a toolbar.
 556  * @constructor
 557  * Creates a new Button
 558  * @param {Object} config A standard {@link Roo.Button} config object
 559  */
 560 </span><span class="jsdoc-var">Roo.Toolbar.Button </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">){
 561     </span><span class="jsdoc-var">Roo.Toolbar.Button.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
 562 };
 563 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Toolbar.Button</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.Button</span><span class="jsdoc-syntax">, {
 564     </span><span class="jsdoc-var">render </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">td</span><span class="jsdoc-syntax">){
 565         </span><span class="jsdoc-var">this.td </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">td</span><span class="jsdoc-syntax">;
 566         </span><span class="jsdoc-var">Roo.Toolbar.Button.superclass.render.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">td</span><span class="jsdoc-syntax">);
 567     },
 568
 569     </span><span class="jsdoc-comment">/**
 570      * Removes and destroys this button
 571      */
 572     </span><span class="jsdoc-var">destroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 573         </span><span class="jsdoc-var">Roo.Toolbar.Button.superclass.destroy.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 574         </span><span class="jsdoc-var">this.td.parentNode.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.td</span><span class="jsdoc-syntax">);
 575     },
 576
 577     </span><span class="jsdoc-comment">/**
 578      * Shows this button
 579      */
 580     </span><span class="jsdoc-var">show</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 581         </span><span class="jsdoc-var">this.hidden </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 582         </span><span class="jsdoc-var">this.td.style.display </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">;
 583     },
 584
 585     </span><span class="jsdoc-comment">/**
 586      * Hides this button
 587      */
 588     </span><span class="jsdoc-var">hide</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 589         </span><span class="jsdoc-var">this.hidden </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 590         </span><span class="jsdoc-var">this.td.style.display </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;none&quot;</span><span class="jsdoc-syntax">;
 591     },
 592
 593     </span><span class="jsdoc-comment">/**
 594      * Disables this item
 595      */
 596     </span><span class="jsdoc-var">disable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 597         </span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.td</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-item-disabled&quot;</span><span class="jsdoc-syntax">);
 598         </span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 599     },
 600
 601     </span><span class="jsdoc-comment">/**
 602      * Enables this item
 603      */
 604     </span><span class="jsdoc-var">enable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 605         </span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.td</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;x-item-disabled&quot;</span><span class="jsdoc-syntax">);
 606         </span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 607     }
 608 });
 609 </span><span class="jsdoc-comment">// backwards compat
 610 </span><span class="jsdoc-var">Roo.ToolbarButton </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.Toolbar.Button</span><span class="jsdoc-syntax">;
 611
 612 </span><span class="jsdoc-comment">/**
 613  * @class Roo.Toolbar.SplitButton
 614  * @extends Roo.SplitButton
 615  * A menu button that renders into a toolbar.
 616  * @constructor
 617  * Creates a new SplitButton
 618  * @param {Object} config A standard {@link Roo.SplitButton} config object
 619  */
 620 </span><span class="jsdoc-var">Roo.Toolbar.SplitButton </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">){
 621     </span><span class="jsdoc-var">Roo.Toolbar.SplitButton.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
 622 };
 623 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Toolbar.SplitButton</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.SplitButton</span><span class="jsdoc-syntax">, {
 624     </span><span class="jsdoc-var">render </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">td</span><span class="jsdoc-syntax">){
 625         </span><span class="jsdoc-var">this.td </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">td</span><span class="jsdoc-syntax">;
 626         </span><span class="jsdoc-var">Roo.Toolbar.SplitButton.superclass.render.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">td</span><span class="jsdoc-syntax">);
 627     },
 628
 629     </span><span class="jsdoc-comment">/**
 630      * Removes and destroys this button
 631      */
 632     </span><span class="jsdoc-var">destroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 633         </span><span class="jsdoc-var">Roo.Toolbar.SplitButton.superclass.destroy.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 634         </span><span class="jsdoc-var">this.td.parentNode.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.td</span><span class="jsdoc-syntax">);
 635     },
 636
 637     </span><span class="jsdoc-comment">/**
 638      * Shows this button
 639      */
 640     </span><span class="jsdoc-var">show</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 641         </span><span class="jsdoc-var">this.hidden </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 642         </span><span class="jsdoc-var">this.td.style.display </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">;
 643     },
 644
 645     </span><span class="jsdoc-comment">/**
 646      * Hides this button
 647      */
 648     </span><span class="jsdoc-var">hide</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 649         </span><span class="jsdoc-var">this.hidden </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 650         </span><span class="jsdoc-var">this.td.style.display </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;none&quot;</span><span class="jsdoc-syntax">;
 651     }
 652 });
 653
 654 </span><span class="jsdoc-comment">// backwards compat
 655 </span><span class="jsdoc-var">Roo.Toolbar.MenuButton </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.Toolbar.SplitButton</span><span class="jsdoc-syntax">;</span></code></body></html>