-<div class="body-wrap" xmlns:ext="http://www.extjs.com"><div class="top-tools"><a class="inner-link" href="#Ext.Toolbar-props"><img src="resources/images/default/s.gif" class="item-icon icon-prop">Properties</a> <a class="inner-link" href="#Ext.Toolbar-methods"><img src="resources/images/default/s.gif" class="item-icon icon-method">Methods</a> <a class="inner-link" href="#Ext.Toolbar-events"><img src="resources/images/default/s.gif" class="item-icon icon-event">Events</a> <a class="inner-link" href="#Ext.Toolbar-configs"><img src="resources/images/default/s.gif" class="item-icon icon-config">Config Options</a> <a class="bookmark" href="../docs/?class=Ext.Toolbar"><img src="resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a> </div><div class="inheritance res-block"><pre class="res-block-inner"><a href="output/Ext.util.Observable.html" ext:member="" ext:cls="Ext.util.Observable">Observable</a> <img src="resources/elbow-end.gif"><a href="output/Ext.Component.html" ext:member="" ext:cls="Ext.Component">Component</a> <img src="resources/elbow-end.gif"><a href="output/Ext.BoxComponent.html" ext:member="" ext:cls="Ext.BoxComponent">BoxComponent</a> <img src="resources/elbow-end.gif"><a href="output/Ext.Container.html" ext:member="" ext:cls="Ext.Container">Container</a> <img src="resources/elbow-end.gif">Toolbar</pre></div><h1>Class <a href="source/Toolbar.html#cls-Ext.Toolbar">Ext.Toolbar</a></h1><table cellspacing="0"><tr><td class="label">Package:</td><td class="hd-info">Ext</td></tr><tr><td class="label">Defined In:</td><td class="hd-info">Toolbar.js</td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/Toolbar.html#cls-Ext.Toolbar">Toolbar</a></td></tr><tr><td class="label">Subclasses:</td><td class="hd-info"><a href="output/Ext.PagingToolbar.html" ext:cls="Ext.PagingToolbar">PagingToolbar</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a href="output/Ext.Container.html" ext:cls="Ext.Container" ext:member="">Container</a></td></tr><tr><td class="label">xtype:</td><td class="hd-info">toolbar</td></tr></table><div class="description"><p>Basic Toolbar class. Although the <tt><a href="output/Ext.Container.html#Ext.Container-defaultType" ext:member="defaultType" ext:cls="Ext.Container">defaultType</a></tt> for Toolbar\r
-is <tt><a href="output/Ext.Button.html" ext:cls="Ext.Button">button</a></tt>, Toolbar elements (child items for the Toolbar container) may\r
-be virtually any type of Component. Toolbar elements can be created explicitly via their constructors,\r
-or implicitly via their xtypes, and can be <tt><a href="output/Ext.Toolbar.html#Ext.Toolbar-add" ext:member="add" ext:cls="Ext.Toolbar">add</a></tt>ed dynamically.</p>\r
-<p>Some items have shortcut strings for creation:</p>\r
-<pre>\r
-<u>Shortcut</u> <u>xtype</u> <u>Class</u> <u>Description</u>\r
-'->' 'tbfill' <a href="output/Ext.Toolbar.Fill.html" ext:cls="Ext.Toolbar.Fill">Ext.Toolbar.Fill</a> begin using the right-justified button container\r
-'-' 'tbseparator' <a href="output/Ext.Toolbar.Separator.html" ext:cls="Ext.Toolbar.Separator">Ext.Toolbar.Separator</a> add a vertical separator bar between toolbar items\r
-' ' 'tbspacer' <a href="output/Ext.Toolbar.Spacer.html" ext:cls="Ext.Toolbar.Spacer">Ext.Toolbar.Spacer</a> add horiztonal space between elements\r
-</pre>\r
-Example usage of various elements:\r
-<pre><code><b>var</b> tb = <b>new</b> Ext.Toolbar({\r
- renderTo: document.body,\r
- width: 600,\r
- height: 100,\r
- items: [\r
- {\r
- <i>// xtype: <em>'button'</em>, // <b>default</b> <b>for</b> Toolbars, same as <em>'tbbutton'</em>\r</i>
- text: <em>'Button'</em>\r
- },\r
- {\r
- xtype: <em>'splitbutton'</em>, <i>// same as <em>'tbsplitbutton'</em>\r</i>
- text: <em>'Split Button'</em>\r
- },\r
- <i>// begin using the right-justified button container\r</i>
- <em>'->'</em>, <i>// same as {xtype: <em>'tbfill'</em>}, // Ext.Toolbar.Fill\r</i>
- {\r
- xtype: <em>'textfield'</em>,\r
- name: <em>'field1'</em>,\r
- emptyText: <em>'enter search term'</em>\r
- },\r
- <i>// add a vertical separator bar between toolbar items\r</i>
- <em>'-'</em>, <i>// same as {xtype: <em>'tbseparator'</em>} to create Ext.Toolbar.Separator\r</i>
- <em>'text 1'</em>, <i>// same as {xtype: <em>'tbtext'</em>, text: <em>'text1'</em>} to create Ext.Toolbar.TextItem\r</i>
- {xtype: <em>'tbspacer'</em>},<i>// same as <em>' '</em> to create Ext.Toolbar.Spacer\r</i>
- <em>'text 2'</em>,\r
- {xtype: <em>'tbspacer'</em>, width: 50}, <i>// add a 50px space\r</i>
- <em>'text 3'</em>\r
- ]\r
-});</code></pre>\r
-Example adding a ComboBox within a menu of a button:\r
-<pre><code><i>// ComboBox creation\r</i>
-<b>var</b> combo = <b>new</b> Ext.form.ComboBox({\r
- store: <b>new</b> Ext.data.ArrayStore({\r
- autoDestroy: true,\r
- fields: [<em>'initials'</em>, <em>'fullname'</em>],\r
- data : [\r
- [<em>'FF'</em>, <em>'Fred Flintstone'</em>],\r
- [<em>'BR'</em>, <em>'Barney Rubble'</em>]\r
- ]\r
- }),\r
- displayField: <em>'fullname'</em>,\r
- typeAhead: true,\r
- mode: <em>'local'</em>,\r
- forceSelection: true,\r
- triggerAction: <em>'all'</em>,\r
- emptyText: <em>'Select a name...'</em>,\r
- selectOnFocus: true,\r
- width: 135,\r
- getListParent: <b>function</b>() {\r
- <b>return</b> this.el.up(<em>'.x-menu'</em>);\r
- },\r
- iconCls: <em>'no-icon'</em> <i>//use iconCls <b>if</b> placing within menu to shift to right side of menu\r</i>
-});\r
-\r
-<i>// put ComboBox <b>in</b> a Menu\r</i>
-<b>var</b> menu = <b>new</b> Ext.menu.Menu({\r
- id: <em>'mainMenu'</em>,\r
- items: [\r
- combo <i>// A Field <b>in</b> a Menu\r</i>
- ]\r
-});\r
-\r
-<i>// add a Button <b>with</b> the menu\r</i>
-tb.add({\r
- text:<em>'Button w/ Menu'</em>,\r
- menu: menu <i>// assign menu by instance\r</i>
- });\r
+<div class="body-wrap" xmlns:ext="http://www.extjs.com"><div class="top-tools"><a class="inner-link" href="#Ext.Toolbar-props"><img src="../resources/images/default/s.gif" class="item-icon icon-prop">Properties</a> <a class="inner-link" href="#Ext.Toolbar-methods"><img src="../resources/images/default/s.gif" class="item-icon icon-method">Methods</a> <a class="inner-link" href="#Ext.Toolbar-events"><img src="../resources/images/default/s.gif" class="item-icon icon-event">Events</a> <a class="inner-link" href="#Ext.Toolbar-configs"><img src="../resources/images/default/s.gif" class="item-icon icon-config">Config Options</a> <a class="bookmark" href="../docs/?class=Ext.Toolbar"><img src="../resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a> </div><div class="inheritance res-block"><pre class="res-block-inner"><a href="output/Ext.util.Observable.html" ext:member="" ext:cls="Ext.util.Observable">Observable</a> <img src="resources/elbow-end.gif"><a href="output/Ext.Component.html" ext:member="" ext:cls="Ext.Component">Component</a> <img src="resources/elbow-end.gif"><a href="output/Ext.BoxComponent.html" ext:member="" ext:cls="Ext.BoxComponent">BoxComponent</a> <img src="resources/elbow-end.gif"><a href="output/Ext.Container.html" ext:member="" ext:cls="Ext.Container">Container</a> <img src="resources/elbow-end.gif">Toolbar</pre></div><h1>Class <a href="source/Toolbar.html#cls-Ext.Toolbar">Ext.Toolbar</a></h1><table cellspacing="0"><tr><td class="label">Package:</td><td class="hd-info">Ext</td></tr><tr><td class="label">Defined In:</td><td class="hd-info"><a href="source/Toolbar.html#cls-Ext.Toolbar">Toolbar.js</a></td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/Toolbar.html#cls-Ext.Toolbar">Toolbar</a></td></tr><tr><td class="label">Subclasses:</td><td class="hd-info"><a href="output/Ext.PagingToolbar.html" ext:cls="Ext.PagingToolbar">PagingToolbar</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a href="output/Ext.Container.html" ext:cls="Ext.Container" ext:member="">Container</a></td></tr></table><div class="description"><p>Basic Toolbar class. Although the <tt><a href="output/Ext.Container.html#Ext.Container-defaultType" ext:member="defaultType" ext:cls="Ext.Container">defaultType</a></tt> for Toolbar
+is <tt><a href="output/Ext.Button.html" ext:cls="Ext.Button">button</a></tt>, Toolbar elements (child items for the Toolbar container) may
+be virtually any type of Component. Toolbar elements can be created explicitly via their constructors,
+or implicitly via their xtypes, and can be <tt><a href="output/Ext.Toolbar.html#Ext.Toolbar-add" ext:member="add" ext:cls="Ext.Toolbar">add</a></tt>ed dynamically.</p>
+<p>Some items have shortcut strings for creation:</p>
+<pre>
+<u>Shortcut</u> <u>xtype</u> <u>Class</u> <u>Description</u>
+'->' 'tbfill' <a href="output/Ext.Toolbar.Fill.html" ext:cls="Ext.Toolbar.Fill">Ext.Toolbar.Fill</a> begin using the right-justified button container
+'-' 'tbseparator' <a href="output/Ext.Toolbar.Separator.html" ext:cls="Ext.Toolbar.Separator">Ext.Toolbar.Separator</a> add a vertical separator bar between toolbar items
+' ' 'tbspacer' <a href="output/Ext.Toolbar.Spacer.html" ext:cls="Ext.Toolbar.Spacer">Ext.Toolbar.Spacer</a> add horiztonal space between elements
+</pre>
+Example usage of various elements:
+<pre><code><b>var</b> tb = <b>new</b> Ext.Toolbar({
+ renderTo: document.body,
+ width: 600,
+ height: 100,
+ items: [
+ {
+ <i>// xtype: <em>'button'</em>, // <b>default</b> <b>for</b> Toolbars, same as <em>'tbbutton'</em></i>
+ text: <em>'Button'</em>
+ },
+ {
+ xtype: <em>'splitbutton'</em>, <i>// same as <em>'tbsplitbutton'</em></i>
+ text: <em>'Split Button'</em>
+ },
+ <i>// begin using the right-justified button container</i>
+ <em>'->'</em>, <i>// same as {xtype: <em>'tbfill'</em>}, // Ext.Toolbar.Fill</i>
+ {
+ xtype: <em>'textfield'</em>,
+ name: <em>'field1'</em>,
+ emptyText: <em>'enter search term'</em>
+ },
+ <i>// add a vertical separator bar between toolbar items</i>
+ <em>'-'</em>, <i>// same as {xtype: <em>'tbseparator'</em>} to create Ext.Toolbar.Separator</i>
+ <em>'text 1'</em>, <i>// same as {xtype: <em>'tbtext'</em>, text: <em>'text1'</em>} to create Ext.Toolbar.TextItem</i>
+ {xtype: <em>'tbspacer'</em>},<i>// same as <em>' '</em> to create Ext.Toolbar.Spacer</i>
+ <em>'text 2'</em>,
+ {xtype: <em>'tbspacer'</em>, width: 50}, <i>// add a 50px space</i>
+ <em>'text 3'</em>
+ ]
+});</code></pre>
+Example adding a ComboBox within a menu of a button:
+<pre><code><i>// ComboBox creation</i>
+<b>var</b> combo = <b>new</b> Ext.form.ComboBox({
+ store: <b>new</b> Ext.data.ArrayStore({
+ autoDestroy: true,
+ fields: [<em>'initials'</em>, <em>'fullname'</em>],
+ data : [
+ [<em>'FF'</em>, <em>'Fred Flintstone'</em>],
+ [<em>'BR'</em>, <em>'Barney Rubble'</em>]
+ ]
+ }),
+ displayField: <em>'fullname'</em>,
+ typeAhead: true,
+ mode: <em>'local'</em>,
+ forceSelection: true,
+ triggerAction: <em>'all'</em>,
+ emptyText: <em>'Select a name...'</em>,
+ selectOnFocus: true,
+ width: 135,
+ getListParent: <b>function</b>() {
+ <b>return</b> this.el.up(<em>'.x-menu'</em>);
+ },
+ iconCls: <em>'no-icon'</em> <i>//use iconCls <b>if</b> placing within menu to shift to right side of menu</i>
+});
+
+<i>// put ComboBox <b>in</b> a Menu</i>
+<b>var</b> menu = <b>new</b> Ext.menu.Menu({
+ id: <em>'mainMenu'</em>,
+ items: [
+ combo <i>// A Field <b>in</b> a Menu</i>
+ ]
+});
+
+<i>// add a Button <b>with</b> the menu</i>
+tb.add({
+ text:<em>'Button w/ Menu'</em>,
+ menu: menu <i>// assign menu by instance</i>
+ });
git.ithinksw.org / extjs.git / blobdiff