Toolbar.js

/**
 * @class Ext.Toolbar
 * Basic Toolbar used by the Grid to create the paging toolbar. This class is reusable but functionality
 * is limited. Look for more functionality in a future version. 
 * @constructor
 * @param {String/HTMLElement/Element} container
 * @param {Array} buttons (optional) array of button configs or elements to add
 */ 
 Ext.Toolbar = function(container, buttons, config){
     Ext.apply(this, config);
     this.el = Ext.get(container);
     if(this.cls){
         this.el.addClass(this.cls);
     }
     // using a table allows for vertical alignment
     this.el.update('<div class="x-toolbar"><table cellspacing="0"><tr></tr></table></div>');
     this.tr = this.el.child('tr', true);
     var autoId = 0;
     this.items = new Ext.util.MixedCollection(false, function(o){
         return o.id || ('item' + (++autoId));
     });
     if(buttons){
         this.add.apply(this, buttons);
     }
     
};

Ext.Toolbar.prototype = {
    /**
     * Adds element(s) to the toolbar - this function takes a variable number of 
     * arguments of mixed type and adds them to the toolbar...
     * 
     * @param {Mixed} arg1 If arg is a Toolbar.Button, it is added. If arg is a string, it is wrapped 
     * in a ytb-text element and added unless the text is "separator" in which case a separator
     * is added. Otherwise, it is assumed the element is an HTMLElement and it is added directly.
     * @param {Mixed} arg2
     * @param {Mixed} etc
     */
    add : function(){
        var a = arguments, l = a.length;
        for(var i = 0; i < l; i++){
            var el = a[i];
            if(el.render){ // some kind of Toolbar.Item
                this.addItem(el);
            }else if(typeof el == 'string'){ // string
                if(el == 'separator' || el == '-'){
                    this.addSeparator();
                }else{
                    this.addText(el);
                }
            }else if(el.tagName){ // element
                this.addElement(el);
            }else if(typeof el == 'object'){ // must be button config?
                this.addButton(el);
            }
        }
    },
    
    /**
     * Returns the element for this toolbar
     * @return {Ext.Element}
     */
    getEl : function(){
        return this.el;  
    },
    
    /**
     * Adds a separator
     * @return {Ext.Toolbar.Item} The separator item
     */
    addSeparator : function(){
        return this.addItem(new Ext.Toolbar.Separator());
    },
    
    /**
     * Adds any standard HTML element to the toolbar
     * @param {String/HTMLElement/Element} el The element or id of the element to add
     * @return {Ext.Toolbar.Item} The element's item
     */
    addElement : function(el){
        return this.addItem(new Ext.Toolbar.Item(el));
    },
    
    /**
     * Adds any Toolbar.Item or subclass
     * @param {Toolbar.Item} item
     * @return {Ext.Toolbar.Item} The item
     */
    addItem : function(item){
        var td = this.nextBlock();
        item.render(td);
        this.items.add(item);
        return item;
    },
    
    /**
     * Add a button (or buttons), see {@link Ext.Toolbar.Button} for more info on the config
     * @param {Object/Array} config A button config or array of configs
     * @return {Ext.Toolbar.Button/Array}
     */
    addButton : function(config){
        if(config instanceof Array){
            var buttons = [];
            for(var i = 0, len = config.length; i < len; i++) {
            	buttons.push(this.addButton(config[i]));
            }
            return buttons;
        }
        var b = config;
        if(!(config instanceof Ext.Toolbar.Button)){
             b = new Ext.Toolbar.Button(config);
        }
        var td = this.nextBlock();
        b.render(td);
        this.items.add(b);
        return b;
    },
    
    /**
     * Adds text to the toolbar
     * @param {String} text The text to add
     * @return {Ext.Toolbar.Item} The element's item
     */
    addText : function(text){
        return this.addItem(new Ext.Toolbar.TextItem(text));
    },
    
    /**
     * Inserts any Toolbar.Item/Toolbar.Button at the specified index
     * @param {Number} index The index where the item is to be inserted
     * @param {Toolbar.Item/Toolbar.Button} item
     * @return {Ext.Toolbar.Button/Item} 
     */
    insertButton : function(index, item){
        var td = document.createElement('td');
        this.tr.insertBefore(td, this.tr.childNodes[index]);
        item.render(td);
        this.items.insert(index, item);
        return item;
    },
    
    /**
     * Adds a new element to the toolbar from the passed DomHelper config
     * @param {Object} config
     * @return {Ext.Toolbar.Item} The element's item
     */
    addDom : function(config, returnEl){
        var td = document.createElement('td');
        this.tr.appendChild(td);
        Ext.DomHelper.overwrite(td, config);
        var ti = new Ext.Toolbar.Item(td.firstChild);
        ti.render(td);
        this.items.add(ti);
        return ti;
    },
    
    // private
    nextBlock : function(){
        var td = document.createElement('td');
        this.tr.appendChild(td);
        return td;
    }
};

/**
 * @class Ext.Toolbar.Item
 * @constructor
 * @param {HTMLElement} el 
 */
Ext.Toolbar.Item = function(el){
    this.el = el.dom || YAHOO.util.Dom.get(el);
    this.id = YAHOO.util.Dom.generateId(this.el);
    this.hidden = false;
};

Ext.Toolbar.Item.prototype = {
    
    /**
     * Get this item's HTML Element
     * @return {HTMLElement}
     */
    getEl : function(){
       return this.el;  
    },
    
    render : function(td){
        this.td = td;
        td.appendChild(this.el);
    },
    
    /**
     * Remove and destroy this button
     */
    destroy : function(){
        this.td.parentNode.removeChild(this.td);
    },
    
    /**
     * Show this item
     */
    show: function(){
        this.hidden = false;
        this.td.style.display = '';
    },
    
    /**
     * Hide this item
     */
    hide: function(){
        this.hidden = true;
        this.td.style.display = 'none';
    },
    
    /**
     * Convenience function for boolean show/hide
     * @param {Boolean} visible true to show/false to hide
     */
    setVisible: function(visible){
        if(visible) {
            this.show();
        }else{
            this.hide();
        }
    },
    
    /**
     * Try to focus this item
     */
    focus : function(){
        Ext.fly(this.el).focus();
    },
    
    /**
     * Disable this item
     */
    disable : function(){
        Ext.fly(this.td).addClass('ytb-item-disabled');
        this.disabled = true;
        this.el.disabled = true;
    },
    
    /**
     * Enable this item
     */
    enable : function(){
        Ext.fly(this.td).removeClass('ytb-item-disabled');
        this.disabled = false;
        this.el.disabled = false;
    }
};


/**
 * @class Ext.Toolbar.Separator
 * @extends Ext.Toolbar.Item
 * @constructor
 */
Ext.Toolbar.Separator = function(){
    var s = document.createElement('span');
    s.className = 'ytb-sep';
    Ext.Toolbar.Separator.superclass.constructor.call(this, s);
};
Ext.extend(Ext.Toolbar.Separator, Ext.Toolbar.Item);

/**
 * @class Ext.Toolbar.TextItem
 * @extends Ext.Toolbar.Item
 * @constructor
 * @param {String} text
 */
Ext.Toolbar.TextItem = function(text){
    var s = document.createElement('span');
    s.className = 'ytb-text';
    s.innerHTML = text;
    Ext.Toolbar.TextItem.superclass.constructor.call(this, s);
};
Ext.extend(Ext.Toolbar.TextItem, Ext.Toolbar.Item);

/**
 * @class Ext.Toolbar.Button
 * @extends Ext.Button
 * @constructor
 * @param {Object} config
 */
Ext.Toolbar.Button = function(config){
    Ext.Toolbar.Button.superclass.constructor.call(this, null, config);
};
Ext.extend(Ext.Toolbar.Button, Ext.Button, {
    render : function(td){
        this.td = td;
        Ext.Toolbar.Button.superclass.render.call(this, td);
    },
    
    /**
     * Remove and destroy this button
     */
    destroy : function(){
        Ext.Toolbar.Button.superclass.destroy.call(this);
        this.td.parentNode.removeChild(this.td);
    },
    
    /**
     * Show this button
     */
    show: function(){
        this.hidden = false;
        this.td.style.display = '';
    },
    
    /**
     * Hide this button
     */
    hide: function(){
        this.hidden = true;
        this.td.style.display = 'none';
    },

    disable : function(){
        Ext.fly(this.td).addClass('ytb-item-disabled');
        this.disabled = true;
    },

    /**
     * Enable this item
     */
    enable : function(){
        Ext.fly(this.td).removeClass('ytb-item-disabled');
        this.disabled = false;
    }
});
// backwards compat
Ext.ToolbarButton = Ext.Toolbar.Button;

/**
 * @class Ext.Toolbar.MenuButton
 * @extends Ext.MenuButton
 * @constructor
 * @param {Object} config
 */
Ext.Toolbar.MenuButton = function(config){
    Ext.Toolbar.MenuButton.superclass.constructor.call(this, null, config);
};
Ext.extend(Ext.Toolbar.MenuButton, Ext.MenuButton, {
    render : function(td){
        this.td = td;
        Ext.Toolbar.MenuButton.superclass.render.call(this, td);
    },
    
    /**
     * Remove and destroy this button
     */
    destroy : function(){
        Ext.Toolbar.MenuButton.superclass.destroy.call(this);
        this.td.parentNode.removeChild(this.td);
    },
    
    /**
     * Show this button
     */
    show: function(){
        this.hidden = false;
        this.td.style.display = '';
    },
    
    /**
     * Hide this button
     */
    hide: function(){
        this.hidden = true;
        this.td.style.display = 'none';
    }
});


yui-ext - Copyright © 2006 Jack Slocum. | Yahoo! UI - Copyright © 2006 Yahoo! Inc.
All rights reserved.