4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
14 * Basic Toolbar class.
16 * Creates a new Toolbar
17 * @param {Object} config The config object
19 Roo.Toolbar = function(container, buttons, config)
21 /// old consturctor format still supported..
22 if(container instanceof Array){ // omit the container for later rendering
27 if (typeof(container) == 'object' && container.xtype) {
29 container = config.container;
30 buttons = config.buttons; // not really - use items!!
33 if (config && config.items) {
34 xitems = config.items;
37 Roo.apply(this, config);
38 this.buttons = buttons;
41 this.render(container);
43 Roo.each(xitems, function(b) {
49 Roo.Toolbar.prototype = {
51 * @cfg {Roo.data.Store} items
52 * array of button configs or elements to add
56 * @cfg {String/HTMLElement/Element} container
57 * The id or element that will contain the toolbar
60 render : function(ct){
61 this.el = Roo.get(ct);
63 this.el.addClass(this.cls);
65 // using a table allows for vertical alignment
66 // 100% width is needed by Safari...
67 this.el.update('<div class="x-toolbar x-small-editor"><table cellspacing="0"><tr></tr></table></div>');
68 this.tr = this.el.child("tr", true);
70 this.items = new Roo.util.MixedCollection(false, function(o){
71 return o.id || ("item" + (++autoId));
74 this.add.apply(this, this.buttons);
80 * Adds element(s) to the toolbar -- this function takes a variable number of
81 * arguments of mixed type and adds them to the toolbar.
82 * @param {Mixed} arg1 The following types of arguments are all valid:<br />
84 * <li>{@link Roo.Toolbar.Button} config: A valid button config object (equivalent to {@link #addButton})</li>
85 * <li>HtmlElement: Any standard HTML element (equivalent to {@link #addElement})</li>
86 * <li>Field: Any form field (equivalent to {@link #addField})</li>
87 * <li>Item: Any subclass of {@link Roo.Toolbar.Item} (equivalent to {@link #addItem})</li>
88 * <li>String: Any generic string (gets wrapped in a {@link Roo.Toolbar.TextItem}, equivalent to {@link #addText}).
89 * Note that there are a few special strings that are treated differently as explained nRoo.</li>
90 * <li>'separator' or '-': Creates a separator element (equivalent to {@link #addSeparator})</li>
91 * <li>' ': Creates a spacer element (equivalent to {@link #addSpacer})</li>
92 * <li>'->': Creates a fill element (equivalent to {@link #addFill})</li>
98 var a = arguments, l = a.length;
99 for(var i = 0; i < l; i++){
104 _add : function(el) {
107 el = Roo.factory(el, typeof(Roo.Toolbar[el.xtype]) == 'undefined' ? Roo.form : Roo.Toolbar);
110 if (el.applyTo){ // some kind of form field
111 return this.addField(el);
113 if (el.render){ // some kind of Toolbar.Item
114 return this.addItem(el);
116 if (typeof el == "string"){ // string
117 if(el == "separator" || el == "-"){
118 return this.addSeparator();
121 return this.addSpacer();
124 return this.addFill();
126 return this.addText(el);
129 if(el.tagName){ // element
130 return this.addElement(el);
132 if(typeof el == "object"){ // must be button config?
133 return this.addButton(el);
141 * Add an Xtype element
142 * @param {Object} xtype Xtype Object
143 * @return {Object} created Object
145 addxtype : function(e){
150 * Returns the Element for this toolbar.
151 * @return {Roo.Element}
159 * @return {Roo.Toolbar.Item} The separator item
161 addSeparator : function(){
162 return this.addItem(new Roo.Toolbar.Separator());
166 * Adds a spacer element
167 * @return {Roo.Toolbar.Spacer} The spacer item
169 addSpacer : function(){
170 return this.addItem(new Roo.Toolbar.Spacer());
174 * Adds a fill element that forces subsequent additions to the right side of the toolbar
175 * @return {Roo.Toolbar.Fill} The fill item
177 addFill : function(){
178 return this.addItem(new Roo.Toolbar.Fill());
182 * Adds any standard HTML element to the toolbar
183 * @param {String/HTMLElement/Element} el The element or id of the element to add
184 * @return {Roo.Toolbar.Item} The element's item
186 addElement : function(el){
187 return this.addItem(new Roo.Toolbar.Item(el));
190 * Collection of items on the toolbar.. (only Toolbar Items, so use fields to retrieve fields)
191 * @type Roo.util.MixedCollection
196 * Adds any Toolbar.Item or subclass
197 * @param {Roo.Toolbar.Item} item
198 * @return {Roo.Toolbar.Item} The item
200 addItem : function(item){
201 var td = this.nextBlock();
203 this.items.add(item);
208 * Adds a button (or buttons). See {@link Roo.Toolbar.Button} for more info on the config.
209 * @param {Object/Array} config A button config or array of configs
210 * @return {Roo.Toolbar.Button/Array}
212 addButton : function(config){
213 if(config instanceof Array){
215 for(var i = 0, len = config.length; i < len; i++) {
216 buttons.push(this.addButton(config[i]));
221 if(!(config instanceof Roo.Toolbar.Button)){
223 new Roo.Toolbar.SplitButton(config) :
224 new Roo.Toolbar.Button(config);
226 var td = this.nextBlock();
233 * Adds text to the toolbar
234 * @param {String} text The text to add
235 * @return {Roo.Toolbar.Item} The element's item
237 addText : function(text){
238 return this.addItem(new Roo.Toolbar.TextItem(text));
242 * Inserts any {@link Roo.Toolbar.Item}/{@link Roo.Toolbar.Button} at the specified index.
243 * @param {Number} index The index where the item is to be inserted
244 * @param {Object/Roo.Toolbar.Item/Roo.Toolbar.Button (may be Array)} item The button, or button config object to be inserted.
245 * @return {Roo.Toolbar.Button/Item}
247 insertButton : function(index, item){
248 if(item instanceof Array){
250 for(var i = 0, len = item.length; i < len; i++) {
251 buttons.push(this.insertButton(index + i, item[i]));
255 if (!(item instanceof Roo.Toolbar.Button)){
256 item = new Roo.Toolbar.Button(item);
258 var td = document.createElement("td");
259 this.tr.insertBefore(td, this.tr.childNodes[index]);
261 this.items.insert(index, item);
266 * Adds a new element to the toolbar from the passed {@link Roo.DomHelper} config.
267 * @param {Object} config
268 * @return {Roo.Toolbar.Item} The element's item
270 addDom : function(config, returnEl){
271 var td = this.nextBlock();
272 Roo.DomHelper.overwrite(td, config);
273 var ti = new Roo.Toolbar.Item(td.firstChild);
280 * Collection of fields on the toolbar.. usefull for quering (value is false if there are no fields)
281 * @type Roo.util.MixedCollection
286 * Adds a dynamically rendered Roo.form field (TextField, ComboBox, etc). Note: the field should not have
287 * been rendered yet. For a field that has already been rendered, use {@link #addElement}.
288 * @param {Roo.form.Field} field
289 * @return {Roo.ToolbarItem}
293 addField : function(field) {
296 this.fields = new Roo.util.MixedCollection(false, function(o){
297 return o.id || ("item" + (++autoId));
302 var td = this.nextBlock();
304 var ti = new Roo.Toolbar.Item(td.firstChild);
307 this.fields.add(field);
318 this.el.child('div').setVisibilityMode(Roo.Element.DISPLAY);
319 this.el.child('div').hide();
327 this.el.child('div').show();
331 nextBlock : function(){
332 var td = document.createElement("td");
333 this.tr.appendChild(td);
338 destroy : function(){
339 if(this.items){ // rendered?
340 Roo.destroy.apply(Roo, this.items.items);
342 if(this.fields){ // rendered?
343 Roo.destroy.apply(Roo, this.fields.items);
345 Roo.Element.uncache(this.el, this.tr);
350 * @class Roo.Toolbar.Item
351 * The base class that other classes should extend in order to get some basic common toolbar item functionality.
354 * @param {HTMLElement} el
356 Roo.Toolbar.Item = function(el){
357 this.el = Roo.getDom(el);
358 this.id = Roo.id(this.el);
362 Roo.Toolbar.Item.prototype = {
365 * Get this item's HTML Element
366 * @return {HTMLElement}
373 render : function(td){
375 td.appendChild(this.el);
379 * Removes and destroys this item.
381 destroy : function(){
382 this.td.parentNode.removeChild(this.td);
390 this.td.style.display = "";
398 this.td.style.display = "none";
402 * Convenience function for boolean show/hide.
403 * @param {Boolean} visible true to show/false to hide
405 setVisible: function(visible){
414 * Try to focus this item.
417 Roo.fly(this.el).focus();
421 * Disables this item.
423 disable : function(){
424 Roo.fly(this.td).addClass("x-item-disabled");
425 this.disabled = true;
426 this.el.disabled = true;
433 Roo.fly(this.td).removeClass("x-item-disabled");
434 this.disabled = false;
435 this.el.disabled = false;
441 * @class Roo.Toolbar.Separator
442 * @extends Roo.Toolbar.Item
443 * A simple toolbar separator class
445 * Creates a new Separator
447 Roo.Toolbar.Separator = function(){
448 var s = document.createElement("span");
449 s.className = "ytb-sep";
450 Roo.Toolbar.Separator.superclass.constructor.call(this, s);
452 Roo.extend(Roo.Toolbar.Separator, Roo.Toolbar.Item, {
459 * @class Roo.Toolbar.Spacer
460 * @extends Roo.Toolbar.Item
461 * A simple element that adds extra horizontal space to a toolbar.
463 * Creates a new Spacer
465 Roo.Toolbar.Spacer = function(){
466 var s = document.createElement("div");
467 s.className = "ytb-spacer";
468 Roo.Toolbar.Spacer.superclass.constructor.call(this, s);
470 Roo.extend(Roo.Toolbar.Spacer, Roo.Toolbar.Item, {
477 * @class Roo.Toolbar.Fill
478 * @extends Roo.Toolbar.Spacer
479 * A simple element that adds a greedy (100% width) horizontal space to a toolbar.
481 * Creates a new Spacer
483 Roo.Toolbar.Fill = Roo.extend(Roo.Toolbar.Spacer, {
485 render : function(td){
486 td.style.width = '100%';
487 Roo.Toolbar.Fill.superclass.render.call(this, td);
492 * @class Roo.Toolbar.TextItem
493 * @extends Roo.Toolbar.Item
494 * A simple class that renders text directly into a toolbar.
496 * Creates a new TextItem
497 * @param {String} text
499 Roo.Toolbar.TextItem = function(text){
500 if (typeof(text) == 'object') {
503 var s = document.createElement("span");
504 s.className = "ytb-text";
506 Roo.Toolbar.TextItem.superclass.constructor.call(this, s);
508 Roo.extend(Roo.Toolbar.TextItem, Roo.Toolbar.Item, {
515 * @class Roo.Toolbar.Button
516 * @extends Roo.Button
517 * A button that renders into a toolbar.
519 * Creates a new Button
520 * @param {Object} config A standard {@link Roo.Button} config object
522 Roo.Toolbar.Button = function(config){
523 Roo.Toolbar.Button.superclass.constructor.call(this, null, config);
525 Roo.extend(Roo.Toolbar.Button, Roo.Button, {
526 render : function(td){
528 Roo.Toolbar.Button.superclass.render.call(this, td);
532 * Removes and destroys this button
534 destroy : function(){
535 Roo.Toolbar.Button.superclass.destroy.call(this);
536 this.td.parentNode.removeChild(this.td);
544 this.td.style.display = "";
552 this.td.style.display = "none";
558 disable : function(){
559 Roo.fly(this.td).addClass("x-item-disabled");
560 this.disabled = true;
567 Roo.fly(this.td).removeClass("x-item-disabled");
568 this.disabled = false;
572 Roo.ToolbarButton = Roo.Toolbar.Button;
575 * @class Roo.Toolbar.SplitButton
576 * @extends Roo.SplitButton
577 * A menu button that renders into a toolbar.
579 * Creates a new SplitButton
580 * @param {Object} config A standard {@link Roo.SplitButton} config object
582 Roo.Toolbar.SplitButton = function(config){
583 Roo.Toolbar.SplitButton.superclass.constructor.call(this, null, config);
585 Roo.extend(Roo.Toolbar.SplitButton, Roo.SplitButton, {
586 render : function(td){
588 Roo.Toolbar.SplitButton.superclass.render.call(this, td);
592 * Removes and destroys this button
594 destroy : function(){
595 Roo.Toolbar.SplitButton.superclass.destroy.call(this);
596 this.td.parentNode.removeChild(this.td);
604 this.td.style.display = "";
612 this.td.style.display = "none";
617 Roo.Toolbar.MenuButton = Roo.Toolbar.SplitButton;