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 * @children Roo.Toolbar.Item Roo.Toolbar.Button Roo.Toolbar.SplitButton Roo.form.Field
15 * Basic Toolbar class.
17 * Creates a new Toolbar
18 * @param {Object} container The config object
20 Roo.Toolbar = function(container, buttons, config)
22 /// old consturctor format still supported..
23 if(container instanceof Array){ // omit the container for later rendering
28 if (typeof(container) == 'object' && container.xtype) {
30 container = config.container;
31 buttons = config.buttons || []; // not really - use items!!
34 if (config && config.items) {
35 xitems = config.items;
38 Roo.apply(this, config);
39 this.buttons = buttons;
42 this.render(container);
45 Roo.each(xitems, function(b) {
51 Roo.Toolbar.prototype = {
54 * array of button configs or elements to add (will be converted to a MixedCollection)
58 * @cfg {String/HTMLElement/Element} container
59 * The id or element that will contain the toolbar
62 render : function(ct){
63 this.el = Roo.get(ct);
65 this.el.addClass(this.cls);
67 // using a table allows for vertical alignment
68 // 100% width is needed by Safari...
69 this.el.update('<div class="x-toolbar x-small-editor"><table cellspacing="0"><tr></tr></table></div>');
70 this.tr = this.el.child("tr", true);
72 this.items = new Roo.util.MixedCollection(false, function(o){
73 return o.id || ("item" + (++autoId));
76 this.add.apply(this, this.buttons);
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:<br />
86 * <li>{@link Roo.Toolbar.Button} config: A valid button config object (equivalent to {@link #addButton})</li>
87 * <li>HtmlElement: Any standard HTML element (equivalent to {@link #addElement})</li>
88 * <li>Field: Any form field (equivalent to {@link #addField})</li>
89 * <li>Item: Any subclass of {@link Roo.Toolbar.Item} (equivalent to {@link #addItem})</li>
90 * <li>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.</li>
92 * <li>'separator' or '-': Creates a separator element (equivalent to {@link #addSeparator})</li>
93 * <li>' ': Creates a spacer element (equivalent to {@link #addSpacer})</li>
94 * <li>'->': Creates a fill element (equivalent to {@link #addFill})</li>
100 var a = arguments, l = a.length;
101 for(var i = 0; i < l; i++){
106 _add : function(el) {
109 el = Roo.factory(el, typeof(Roo.Toolbar[el.xtype]) == 'undefined' ? Roo.form : Roo.Toolbar);
112 if (el.applyTo){ // some kind of form field
113 return this.addField(el);
115 if (el.render){ // some kind of Toolbar.Item
116 return this.addItem(el);
118 if (typeof el == "string"){ // string
119 if(el == "separator" || el == "-"){
120 return this.addSeparator();
123 return this.addSpacer();
126 return this.addFill();
128 return this.addText(el);
131 if(el.tagName){ // element
132 return this.addElement(el);
134 if(typeof el == "object"){ // must be button config?
135 return this.addButton(el);
143 * Add an Xtype element
144 * @param {Object} xtype Xtype Object
145 * @return {Object} created Object
147 addxtype : function(e){
152 * Returns the Element for this toolbar.
153 * @return {Roo.Element}
161 * @return {Roo.Toolbar.Item} The separator item
163 addSeparator : function(){
164 return this.addItem(new Roo.Toolbar.Separator());
168 * Adds a spacer element
169 * @return {Roo.Toolbar.Spacer} The spacer item
171 addSpacer : function(){
172 return this.addItem(new Roo.Toolbar.Spacer());
176 * Adds a fill element that forces subsequent additions to the right side of the toolbar
177 * @return {Roo.Toolbar.Fill} The fill item
179 addFill : function(){
180 return this.addItem(new Roo.Toolbar.Fill());
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
188 addElement : function(el){
189 return this.addItem(new Roo.Toolbar.Item(el));
192 * Collection of items on the toolbar.. (only Toolbar Items, so use fields to retrieve fields)
193 * @type Roo.util.MixedCollection
198 * Adds any Toolbar.Item or subclass
199 * @param {Roo.Toolbar.Item} item
200 * @return {Roo.Toolbar.Item} The item
202 addItem : function(item){
203 var td = this.nextBlock();
205 this.items.add(item);
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}
214 addButton : function(config){
215 if(config instanceof Array){
217 for(var i = 0, len = config.length; i < len; i++) {
218 buttons.push(this.addButton(config[i]));
223 if(!(config instanceof Roo.Toolbar.Button)){
225 new Roo.Toolbar.SplitButton(config) :
226 new Roo.Toolbar.Button(config);
228 var td = this.nextBlock();
235 * Adds text to the toolbar
236 * @param {String} text The text to add
237 * @return {Roo.Toolbar.Item} The element's item
239 addText : function(text){
240 return this.addItem(new Roo.Toolbar.TextItem(text));
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}
249 insertButton : function(index, item){
250 if(item instanceof Array){
252 for(var i = 0, len = item.length; i < len; i++) {
253 buttons.push(this.insertButton(index + i, item[i]));
257 if (!(item instanceof Roo.Toolbar.Button)){
258 item = new Roo.Toolbar.Button(item);
260 var td = document.createElement("td");
261 this.tr.insertBefore(td, this.tr.childNodes[index]);
263 this.items.insert(index, item);
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
272 addDom : function(config, returnEl){
273 var td = this.nextBlock();
274 Roo.DomHelper.overwrite(td, config);
275 var ti = new Roo.Toolbar.Item(td.firstChild);
282 * Collection of fields on the toolbar.. usefull for quering (value is false if there are no fields)
283 * @type Roo.util.MixedCollection
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}
296 addField : function(field) {
299 this.fields = new Roo.util.MixedCollection(false, function(o){
300 return o.id || ("item" + (++autoId));
305 var td = this.nextBlock();
307 var ti = new Roo.Toolbar.Item(td.firstChild);
310 this.fields.add(field);
321 this.el.child('div').setVisibilityMode(Roo.Element.DISPLAY);
322 this.el.child('div').hide();
330 this.el.child('div').show();
334 nextBlock : function(){
335 var td = document.createElement("td");
336 this.tr.appendChild(td);
341 destroy : function(){
342 if(this.items){ // rendered?
343 Roo.destroy.apply(Roo, this.items.items);
345 if(this.fields){ // rendered?
346 Roo.destroy.apply(Roo, this.fields.items);
348 Roo.Element.uncache(this.el, this.tr);
353 * @class Roo.Toolbar.Item
354 * The base class that other classes should extend in order to get some basic common toolbar item functionality.
357 * @param {HTMLElement} el
359 Roo.Toolbar.Item = function(el){
361 if (typeof (el.xtype) != 'undefined') {
366 this.el = Roo.getDom(el);
367 this.id = Roo.id(this.el);
373 * Fires when the button is rendered
374 * @param {Button} this
378 Roo.Toolbar.Item.superclass.constructor.call(this,cfg);
380 Roo.extend(Roo.Toolbar.Item, Roo.util.Observable, {
381 //Roo.Toolbar.Item.prototype = {
384 * Get this item's HTML Element
385 * @return {HTMLElement}
392 render : function(td){
395 td.appendChild(this.el);
397 this.fireEvent('render', this);
401 * Removes and destroys this item.
403 destroy : function(){
404 this.td.parentNode.removeChild(this.td);
412 this.td.style.display = "";
420 this.td.style.display = "none";
424 * Convenience function for boolean show/hide.
425 * @param {Boolean} visible true to show/false to hide
427 setVisible: function(visible){
436 * Try to focus this item.
439 Roo.fly(this.el).focus();
443 * Disables this item.
445 disable : function(){
446 Roo.fly(this.td).addClass("x-item-disabled");
447 this.disabled = true;
448 this.el.disabled = true;
455 Roo.fly(this.td).removeClass("x-item-disabled");
456 this.disabled = false;
457 this.el.disabled = false;
463 * @class Roo.Toolbar.Separator
464 * @extends Roo.Toolbar.Item
465 * A simple toolbar separator class
467 * Creates a new Separator
469 Roo.Toolbar.Separator = function(cfg){
471 var s = document.createElement("span");
472 s.className = "ytb-sep";
477 Roo.Toolbar.Separator.superclass.constructor.call(this, cfg || s);
479 Roo.extend(Roo.Toolbar.Separator, Roo.Toolbar.Item, {
486 * @class Roo.Toolbar.Spacer
487 * @extends Roo.Toolbar.Item
488 * A simple element that adds extra horizontal space to a toolbar.
490 * Creates a new Spacer
492 Roo.Toolbar.Spacer = function(cfg){
493 var s = document.createElement("div");
494 s.className = "ytb-spacer";
498 Roo.Toolbar.Spacer.superclass.constructor.call(this, cfg || s);
500 Roo.extend(Roo.Toolbar.Spacer, Roo.Toolbar.Item, {
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.
511 * Creates a new Spacer
513 Roo.Toolbar.Fill = Roo.extend(Roo.Toolbar.Spacer, {
515 render : function(td){
516 td.style.width = '100%';
517 Roo.Toolbar.Fill.superclass.render.call(this, td);
522 * @class Roo.Toolbar.TextItem
523 * @extends Roo.Toolbar.Item
524 * A simple class that renders text directly into a toolbar.
526 * Creates a new TextItem
529 Roo.Toolbar.TextItem = function(cfg){
530 var text = cfg || "";
531 if (typeof(cfg) == 'object') {
532 text = cfg.text || "";
536 var s = document.createElement("span");
537 s.className = "ytb-text";
543 Roo.Toolbar.TextItem.superclass.constructor.call(this, cfg || s);
545 Roo.extend(Roo.Toolbar.TextItem, Roo.Toolbar.Item, {
556 this.el.style.display = "";
564 this.el.style.display = "none";
570 * @class Roo.Toolbar.Button
571 * @extends Roo.Button
572 * A button that renders into a toolbar.
574 * Creates a new Button
575 * @param {Object} config A standard {@link Roo.Button} config object
577 Roo.Toolbar.Button = function(config){
578 Roo.Toolbar.Button.superclass.constructor.call(this, null, config);
580 Roo.extend(Roo.Toolbar.Button, Roo.Button,
584 render : function(td){
586 Roo.Toolbar.Button.superclass.render.call(this, td);
590 * Removes and destroys this button
592 destroy : function(){
593 Roo.Toolbar.Button.superclass.destroy.call(this);
594 this.td.parentNode.removeChild(this.td);
602 this.td.style.display = "";
610 this.td.style.display = "none";
616 disable : function(){
617 Roo.fly(this.td).addClass("x-item-disabled");
618 this.disabled = true;
625 Roo.fly(this.td).removeClass("x-item-disabled");
626 this.disabled = false;
630 Roo.ToolbarButton = Roo.Toolbar.Button;
633 * @class Roo.Toolbar.SplitButton
634 * @extends Roo.SplitButton
635 * A menu button that renders into a toolbar.
637 * Creates a new SplitButton
638 * @param {Object} config A standard {@link Roo.SplitButton} config object
640 Roo.Toolbar.SplitButton = function(config){
641 Roo.Toolbar.SplitButton.superclass.constructor.call(this, null, config);
643 Roo.extend(Roo.Toolbar.SplitButton, Roo.SplitButton, {
644 render : function(td){
646 Roo.Toolbar.SplitButton.superclass.render.call(this, td);
650 * Removes and destroys this button
652 destroy : function(){
653 Roo.Toolbar.SplitButton.superclass.destroy.call(this);
654 this.td.parentNode.removeChild(this.td);
662 this.td.style.display = "";
670 this.td.style.display = "none";
675 Roo.Toolbar.MenuButton = Roo.Toolbar.SplitButton;