3 * Copyright(c) 2006-2009 Ext JS, LLC
5 * http://www.extjs.com/license
8 * @class Ext.layout.ToolbarLayout
\r
9 * @extends Ext.layout.ContainerLayout
\r
10 * Layout manager implicitly used by Ext.Toolbar.
\r
12 Ext.layout.ToolbarLayout = Ext.extend(Ext.layout.ContainerLayout, {
\r
13 monitorResize : true,
\r
15 lastOverflow : false,
\r
17 noItemsMenuText : '<div class="x-toolbar-no-items">(None)</div>',
\r
19 onLayout : function(ct, target){
\r
21 target.addClass('x-toolbar-layout-ct');
\r
22 target.insertHtml('beforeEnd',
\r
23 '<table cellspacing="0" class="x-toolbar-ct"><tbody><tr><td class="x-toolbar-left" align="left"><table cellspacing="0"><tbody><tr class="x-toolbar-left-row"></tr></tbody></table></td><td class="x-toolbar-right" align="right"><table cellspacing="0" class="x-toolbar-right-ct"><tbody><tr><td><table cellspacing="0"><tbody><tr class="x-toolbar-right-row"></tr></tbody></table></td><td><table cellspacing="0"><tbody><tr class="x-toolbar-extras-row"></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>');
\r
24 this.leftTr = target.child('tr.x-toolbar-left-row', true);
\r
25 this.rightTr = target.child('tr.x-toolbar-right-row', true);
\r
26 this.extrasTr = target.child('tr.x-toolbar-extras-row', true);
\r
28 var side = this.leftTr;
\r
31 var items = ct.items.items;
\r
32 for(var i = 0, len = items.length, c; i < len; i++, pos++) {
\r
35 side = this.rightTr;
\r
37 }else if(!c.rendered){
\r
38 c.render(this.insertCell(c, side, pos));
\r
40 if(!c.xtbHidden && !this.isValidParent(c, side.childNodes[pos])){
\r
41 var td = this.insertCell(c, side, pos);
\r
42 td.appendChild(c.getDomPositionEl().dom);
\r
43 c.container = Ext.get(td);
\r
47 //strip extra empty cells
\r
48 this.cleanup(this.leftTr);
\r
49 this.cleanup(this.rightTr);
\r
50 this.cleanup(this.extrasTr);
\r
51 this.fitToSize(target);
\r
54 cleanup : function(row){
\r
55 var cn = row.childNodes;
\r
56 for(var i = cn.length-1, c; i >= 0 && (c = cn[i]); i--){
\r
63 insertCell : function(c, side, pos){
\r
64 var td = document.createElement('td');
\r
65 td.className='x-toolbar-cell';
\r
66 side.insertBefore(td, side.childNodes[pos]||null);
\r
70 hideItem : function(item){
\r
71 var h = (this.hiddens = this.hiddens || []);
\r
73 item.xtbHidden = true;
\r
74 item.xtbWidth = item.getDomPositionEl().dom.parentNode.offsetWidth;
\r
78 unhideItem : function(item){
\r
80 item.xtbHidden = false;
\r
81 this.hiddens.remove(item);
\r
82 if(this.hiddens.length < 1){
\r
83 delete this.hiddens;
\r
87 getItemWidth : function(c){
\r
88 return c.hidden ? (c.xtbWidth || 0) : c.getDomPositionEl().dom.parentNode.offsetWidth;
\r
91 fitToSize : function(t){
\r
92 if(this.container.enableOverflow === false){
\r
95 var w = t.dom.clientWidth;
\r
96 var lw = this.lastWidth || 0;
\r
98 var iw = t.dom.firstChild.offsetWidth;
\r
100 var clipWidth = w - this.triggerWidth;
\r
101 var hideIndex = -1;
\r
103 if(iw > w || (this.hiddens && w >= lw)){
\r
104 var i, items = this.container.items.items, len = items.length, c;
\r
106 for(i = 0; i < len; i++) {
\r
109 loopWidth += this.getItemWidth(c);
\r
110 if(loopWidth > clipWidth){
\r
116 this.unhideItem(c);
\r
124 if(!this.lastOverflow){
\r
125 this.container.fireEvent('overflowchange', this.container, true);
\r
126 this.lastOverflow = true;
\r
128 }else if(this.more){
\r
130 this.more.destroy();
\r
132 if(this.lastOverflow){
\r
133 this.container.fireEvent('overflowchange', this.container, false);
\r
134 this.lastOverflow = false;
\r
139 createMenuConfig : function(c, hideOnClick){
\r
140 var cfg = Ext.apply({}, c.initialConfig),
\r
141 group = c.toggleGroup;
\r
144 text: c.overflowText || c.text,
\r
145 iconCls: c.iconCls,
\r
148 disabled: c.disabled,
\r
149 handler: c.handler,
\r
152 hideOnClick: hideOnClick
\r
154 if(group || c.enableToggle){
\r
157 checked: c.pressed,
\r
159 checkchange: function(item, checked){
\r
171 addComponentToMenu : function(m, c){
\r
172 if(c instanceof Ext.Toolbar.Separator){
\r
174 }else if(Ext.isFunction(c.isXType)){
\r
175 if(c.isXType('splitbutton')){
\r
176 m.add(this.createMenuConfig(c, true));
\r
177 }else if(c.isXType('button')){
\r
178 m.add(this.createMenuConfig(c, !c.menu));
\r
179 }else if(c.isXType('buttongroup')){
\r
180 c.items.each(function(item){
\r
181 this.addComponentToMenu(m, item);
\r
187 clearMenu : function(){
\r
188 var m = this.moreMenu;
\r
190 this.moreMenu.items.each(function(item){
\r
197 beforeMoreShow : function(m){
\r
198 var h = this.container.items.items,
\r
202 needsSep = function(group, item){
\r
203 return group.isXType('buttongroup') && !(item instanceof Ext.Toolbar.Separator);
\r
208 for(var i = 0; i < len; i++){
\r
211 if(prev && (needsSep(c, prev) || needsSep(prev, c))){
\r
214 this.addComponentToMenu(m, c);
\r
218 // put something so the menu isn't empty
\r
219 // if no compatible items found
\r
220 if(m.items.length < 1){
\r
221 m.add(this.noItemsMenuText);
\r
225 initMore : function(){
\r
227 this.moreMenu = new Ext.menu.Menu({
\r
229 beforeshow: this.beforeMoreShow,
\r
233 this.more = new Ext.Button({
\r
234 iconCls: 'x-toolbar-more-icon',
\r
235 cls: 'x-toolbar-more',
\r
236 menu: this.moreMenu
\r
238 var td = this.insertCell(this.more, this.extrasTr, 100);
\r
239 this.more.render(td);
\r
243 destroy : function(){
\r
244 Ext.destroy(this.more, this.moreMenu);
\r
245 Ext.layout.ToolbarLayout.superclass.destroy.call(this);
\r
248 * @property activeItem
\r
253 Ext.Container.LAYOUTS.toolbar = Ext.layout.ToolbarLayout;
\r
256 * @class Ext.Toolbar
\r
257 * @extends Ext.Container
\r
258 * <p>Basic Toolbar class. Although the <tt>{@link Ext.Container#defaultType defaultType}</tt> for Toolbar
\r
259 * is <tt>{@link Ext.Button button}</tt>, Toolbar elements (child items for the Toolbar container) may
\r
260 * be virtually any type of Component. Toolbar elements can be created explicitly via their constructors,
\r
261 * or implicitly via their xtypes, and can be <tt>{@link #add}</tt>ed dynamically.</p>
\r
262 * <p>Some items have shortcut strings for creation:</p>
\r
264 <u>Shortcut</u> <u>xtype</u> <u>Class</u> <u>Description</u>
\r
265 '->' 'tbfill' {@link Ext.Toolbar.Fill} begin using the right-justified button container
\r
266 '-' 'tbseparator' {@link Ext.Toolbar.Separator} add a vertical separator bar between toolbar items
\r
267 ' ' 'tbspacer' {@link Ext.Toolbar.Spacer} add horiztonal space between elements
\r
270 * Example usage of various elements:
\r
272 var tb = new Ext.Toolbar({
\r
273 renderTo: document.body,
\r
278 // xtype: 'button', // default for Toolbars, same as 'tbbutton'
\r
282 xtype: 'splitbutton', // same as 'tbsplitbutton'
\r
283 text: 'Split Button'
\r
285 // begin using the right-justified button container
\r
286 '->', // same as {xtype: 'tbfill'}, // Ext.Toolbar.Fill
\r
288 xtype: 'textfield',
\r
290 emptyText: 'enter search term'
\r
292 // add a vertical separator bar between toolbar items
\r
293 '-', // same as {xtype: 'tbseparator'} to create Ext.Toolbar.Separator
\r
294 'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.Toolbar.TextItem
\r
295 {xtype: 'tbspacer'},// same as ' ' to create Ext.Toolbar.Spacer
\r
297 {xtype: 'tbspacer', width: 50}, // add a 50px space
\r
302 * Example adding a ComboBox within a menu of a button:
\r
304 // ComboBox creation
\r
305 var combo = new Ext.form.ComboBox({
\r
306 store: new Ext.data.ArrayStore({
\r
308 fields: ['initials', 'fullname'],
\r
310 ['FF', 'Fred Flintstone'],
\r
311 ['BR', 'Barney Rubble']
\r
314 displayField: 'fullname',
\r
317 forceSelection: true,
\r
318 triggerAction: 'all',
\r
319 emptyText: 'Select a name...',
\r
320 selectOnFocus: true,
\r
322 getListParent: function() {
\r
323 return this.el.up('.x-menu');
\r
325 iconCls: 'no-icon' //use iconCls if placing within menu to shift to right side of menu
\r
328 // put ComboBox in a Menu
\r
329 var menu = new Ext.menu.Menu({
\r
332 combo // A Field in a Menu
\r
336 // add a Button with the menu
\r
338 text:'Button w/ Menu',
\r
339 menu: menu // assign menu by instance
\r
344 * Creates a new Toolbar
\r
345 * @param {Object/Array} config A config object or an array of buttons to <tt>{@link #add}</tt>
\r
348 Ext.Toolbar = function(config){
\r
349 if(Ext.isArray(config)){
\r
350 config = {items: config, layout: 'toolbar'};
\r
352 config = Ext.apply({
\r
355 if(config.buttons) {
\r
356 config.items = config.buttons;
\r
359 Ext.Toolbar.superclass.constructor.call(this, config);
\r
364 var T = Ext.Toolbar;
\r
366 Ext.extend(T, Ext.Container, {
\r
368 defaultType: 'button',
\r
371 internalDefaults: {removeMode: 'container', hideParent: true},
\r
372 toolbarCls: 'x-toolbar',
\r
374 initComponent : function(){
\r
375 T.superclass.initComponent.call(this);
\r
378 * @event overflowchange
\r
379 * Fires after the overflow state has changed.
\r
380 * @param {Object} c The Container
\r
381 * @param {Boolean} lastOverflow overflow state
\r
383 this.addEvents('overflowchange');
\r
387 onRender : function(ct, position){
\r
389 if(!this.autoCreate){
\r
390 this.autoCreate = {
\r
391 cls: this.toolbarCls + ' x-small-editor'
\r
394 this.el = ct.createChild(Ext.apply({ id: this.id },this.autoCreate), position);
\r
399 * Adds element(s) to the toolbar -- this function takes a variable number of
\r
400 * arguments of mixed type and adds them to the toolbar.
\r
401 * @param {Mixed} arg1 The following types of arguments are all valid:<br />
\r
403 * <li>{@link Ext.Button} config: A valid button config object (equivalent to {@link #addButton})</li>
\r
404 * <li>HtmlElement: Any standard HTML element (equivalent to {@link #addElement})</li>
\r
405 * <li>Field: Any form field (equivalent to {@link #addField})</li>
\r
406 * <li>Item: Any subclass of {@link Ext.Toolbar.Item} (equivalent to {@link #addItem})</li>
\r
407 * <li>String: Any generic string (gets wrapped in a {@link Ext.Toolbar.TextItem}, equivalent to {@link #addText}).
\r
408 * Note that there are a few special strings that are treated differently as explained next.</li>
\r
409 * <li>'-': Creates a separator element (equivalent to {@link #addSeparator})</li>
\r
410 * <li>' ': Creates a spacer element (equivalent to {@link #addSpacer})</li>
\r
411 * <li>'->': Creates a fill element (equivalent to {@link #addFill})</li>
\r
413 * @param {Mixed} arg2
\r
414 * @param {Mixed} etc.
\r
419 lookupComponent : function(c){
\r
420 if(Ext.isString(c)){
\r
422 c = new T.Separator();
\r
423 }else if(c == ' '){
\r
424 c = new T.Spacer();
\r
425 }else if(c == '->'){
\r
428 c = new T.TextItem(c);
\r
430 this.applyDefaults(c);
\r
432 if(c.isFormField || c.render){ // some kind of form field, some kind of Toolbar.Item
\r
433 c = this.constructItem(c);
\r
434 }else if(c.tag){ // DomHelper spec
\r
435 c = new T.Item({autoEl: c});
\r
436 }else if(c.tagName){ // element
\r
437 c = new T.Item({el:c});
\r
438 }else if(Ext.isObject(c)){ // must be button config?
\r
439 c = c.xtype ? this.constructItem(c) : this.constructButton(c);
\r
446 applyDefaults : function(c){
\r
447 if(!Ext.isString(c)){
\r
448 c = Ext.Toolbar.superclass.applyDefaults.call(this, c);
\r
449 var d = this.internalDefaults;
\r
451 Ext.applyIf(c.initialConfig, d);
\r
461 constructItem : function(item, type){
\r
462 return Ext.create(item, type || this.defaultType);
\r
467 * @return {Ext.Toolbar.Item} The separator {@link Ext.Toolbar.Item item}
\r
469 addSeparator : function(){
\r
470 return this.add(new T.Separator());
\r
474 * Adds a spacer element
\r
475 * @return {Ext.Toolbar.Spacer} The spacer item
\r
477 addSpacer : function(){
\r
478 return this.add(new T.Spacer());
\r
482 * Forces subsequent additions into the float:right toolbar
\r
484 addFill : function(){
\r
485 this.add(new T.Fill());
\r
489 * Adds any standard HTML element to the toolbar
\r
490 * @param {Mixed} el The element or id of the element to add
\r
491 * @return {Ext.Toolbar.Item} The element's item
\r
493 addElement : function(el){
\r
494 return this.addItem(new T.Item({el:el}));
\r
498 * Adds any Toolbar.Item or subclass
\r
499 * @param {Ext.Toolbar.Item} item
\r
500 * @return {Ext.Toolbar.Item} The item
\r
502 addItem : function(item){
\r
503 return Ext.Toolbar.superclass.add.apply(this, arguments);
\r
507 * Adds a button (or buttons). See {@link Ext.Button} for more info on the config.
\r
508 * @param {Object/Array} config A button config or array of configs
\r
509 * @return {Ext.Button/Array}
\r
511 addButton : function(config){
\r
512 if(Ext.isArray(config)){
\r
514 for(var i = 0, len = config.length; i < len; i++) {
\r
515 buttons.push(this.addButton(config[i]));
\r
519 return this.add(this.constructButton(config));
\r
523 * Adds text to the toolbar
\r
524 * @param {String} text The text to add
\r
525 * @return {Ext.Toolbar.Item} The element's item
\r
527 addText : function(text){
\r
528 return this.addItem(new T.TextItem(text));
\r
532 * Adds a new element to the toolbar from the passed {@link Ext.DomHelper} config
\r
533 * @param {Object} config
\r
534 * @return {Ext.Toolbar.Item} The element's item
\r
536 addDom : function(config){
\r
537 return this.add(new T.Item({autoEl: config}));
\r
541 * Adds a dynamically rendered Ext.form field (TextField, ComboBox, etc). Note: the field should not have
\r
542 * been rendered yet. For a field that has already been rendered, use {@link #addElement}.
\r
543 * @param {Ext.form.Field} field
\r
544 * @return {Ext.Toolbar.Item}
\r
546 addField : function(field){
\r
547 return this.add(field);
\r
551 * Inserts any {@link Ext.Toolbar.Item}/{@link Ext.Button} at the specified index.
\r
552 * @param {Number} index The index where the item is to be inserted
\r
553 * @param {Object/Ext.Toolbar.Item/Ext.Button/Array} item The button, or button config object to be
\r
554 * inserted, or an array of buttons/configs.
\r
555 * @return {Ext.Button/Item}
\r
557 insertButton : function(index, item){
\r
558 if(Ext.isArray(item)){
\r
560 for(var i = 0, len = item.length; i < len; i++) {
\r
561 buttons.push(this.insertButton(index + i, item[i]));
\r
565 return Ext.Toolbar.superclass.insert.call(this, index, item);
\r
569 initMenuTracking : function(item){
\r
570 if(this.trackMenus && item.menu){
\r
572 'menutriggerover' : this.onButtonTriggerOver,
\r
573 'menushow' : this.onButtonMenuShow,
\r
574 'menuhide' : this.onButtonMenuHide,
\r
581 constructButton : function(item){
\r
582 var b = item.events ? item : this.constructItem(item, item.split ? 'splitbutton' : this.defaultType);
\r
583 this.initMenuTracking(b);
\r
588 onDisable : function(){
\r
589 this.items.each(function(item){
\r
597 onEnable : function(){
\r
598 this.items.each(function(item){
\r
606 onButtonTriggerOver : function(btn){
\r
607 if(this.activeMenuBtn && this.activeMenuBtn != btn){
\r
608 this.activeMenuBtn.hideMenu();
\r
610 this.activeMenuBtn = btn;
\r
615 onButtonMenuShow : function(btn){
\r
616 this.activeMenuBtn = btn;
\r
620 onButtonMenuHide : function(btn){
\r
621 delete this.activeMenuBtn;
\r
624 Ext.reg('toolbar', Ext.Toolbar);
\r
627 * @class Ext.Toolbar.Item
\r
628 * @extends Ext.BoxComponent
\r
629 * The base class that other non-interacting Toolbar Item classes should extend in order to
\r
630 * get some basic common toolbar item functionality.
\r
632 * Creates a new Item
\r
633 * @param {HTMLElement} el
\r
636 T.Item = Ext.extend(Ext.BoxComponent, {
\r
637 hideParent: true, // Hiding a Toolbar.Item hides its containing TD
\r
638 enable:Ext.emptyFn,
\r
639 disable:Ext.emptyFn,
\r
642 * @cfg {String} overflowText Text to be used for the menu if the item is overflowed.
\r
645 Ext.reg('tbitem', T.Item);
\r
648 * @class Ext.Toolbar.Separator
\r
649 * @extends Ext.Toolbar.Item
\r
650 * A simple class that adds a vertical separator bar between toolbar items
\r
651 * (css class:<tt>'xtb-sep'</tt>). Example usage:
\r
656 {xtype: 'tbseparator'}, // or '-'
\r
662 * Creates a new Separator
\r
663 * @xtype tbseparator
\r
665 T.Separator = Ext.extend(T.Item, {
\r
666 onRender : function(ct, position){
\r
667 this.el = ct.createChild({tag:'span', cls:'xtb-sep'}, position);
\r
670 Ext.reg('tbseparator', T.Separator);
\r
673 * @class Ext.Toolbar.Spacer
\r
674 * @extends Ext.Toolbar.Item
\r
675 * A simple element that adds extra horizontal space between items in a toolbar.
\r
676 * By default a 2px wide space is added via css specification:<pre><code>
\r
677 .x-toolbar .xtb-spacer {
\r
681 * <p>Example usage:</p>
\r
686 {xtype: 'tbspacer'}, // or ' '
\r
688 // space width is also configurable via javascript
\r
689 {xtype: 'tbspacer', width: 50}, // add a 50px space
\r
695 * Creates a new Spacer
\r
698 T.Spacer = Ext.extend(T.Item, {
\r
700 * @cfg {Number} width
\r
701 * The width of the spacer in pixels (defaults to 2px via css style <tt>.x-toolbar .xtb-spacer</tt>).
\r
704 onRender : function(ct, position){
\r
705 this.el = ct.createChild({tag:'div', cls:'xtb-spacer', style: this.width?'width:'+this.width+'px':''}, position);
\r
708 Ext.reg('tbspacer', T.Spacer);
\r
711 * @class Ext.Toolbar.Fill
\r
712 * @extends Ext.Toolbar.Spacer
\r
713 * A non-rendering placeholder item which instructs the Toolbar's Layout to begin using
\r
714 * the right-justified button container.
\r
719 {xtype: 'tbfill'}, // or '->'
\r
725 * Creates a new Fill
\r
728 T.Fill = Ext.extend(T.Item, {
\r
730 render : Ext.emptyFn,
\r
733 Ext.reg('tbfill', T.Fill);
\r
736 * @class Ext.Toolbar.TextItem
\r
737 * @extends Ext.Toolbar.Item
\r
738 * A simple class that renders text directly into a toolbar
\r
739 * (with css class:<tt>'xtb-text'</tt>). Example usage:
\r
743 {xtype: 'tbtext', text: 'Item 1'} // or simply 'Item 1'
\r
748 * Creates a new TextItem
\r
749 * @param {String/Object} text A text string, or a config object containing a <tt>text</tt> property
\r
752 T.TextItem = Ext.extend(T.Item, {
\r
753 constructor: function(config){
\r
754 if (Ext.isString(config)) {
\r
755 config = { autoEl: {cls: 'xtb-text', html: config }};
\r
757 config.autoEl = {cls: 'xtb-text', html: config.text || ''};
\r
759 T.TextItem.superclass.constructor.call(this, config);
\r
762 * Updates this item's text, setting the text to be used as innerHTML.
\r
763 * @param {String} t The text to display (html accepted).
\r
765 setText : function(t) {
\r
766 if (this.rendered) {
\r
767 this.el.dom.innerHTML = t;
\r
769 this.autoEl.html = t;
\r
773 Ext.reg('tbtext', T.TextItem);
\r
775 // backwards compat
\r
776 T.Button = Ext.extend(Ext.Button, {});
\r
777 T.SplitButton = Ext.extend(Ext.SplitButton, {});
\r
778 Ext.reg('tbbutton', T.Button);
\r
779 Ext.reg('tbsplit', T.SplitButton);
\r