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