From: Edward <edward@roojs.com>
Date: Thu, 15 May 2014 10:23:54 +0000 (+0800)
Subject: Roo/bootstrap/PagingToolbar.js
X-Git-Url: http://git.roojs.org/?a=commitdiff_plain;h=65e550fb6f9061976c066b31540ca6ca848c6161;p=roojs1

Roo/bootstrap/PagingToolbar.js
Roo/bootstrap/SplitButton.js
Roo/bootstrap/Toolbar.js
---

diff --git a/Roo/bootstrap/PagingToolbar.js b/Roo/bootstrap/PagingToolbar.js
deleted file mode 100644
index 6699332162..0000000000
--- a/Roo/bootstrap/PagingToolbar.js
+++ /dev/null
@@ -1,308 +0,0 @@
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
- 
-/**
- * @class Roo.bootstrap.PagingToolbar
- * @extends Roo.bootstrap.Toolbar
- * A specialized toolbar that is bound to a {@link Roo.data.Store} and provides automatic paging controls.
- * @constructor
- * Create a new PagingToolbar
- * @param {Object} config The config object
- */
-Roo.bootstrap.PagingToolbar = function(el, ds, config)
-{
-    // old args format still supported... - xtype is prefered..
-    if (typeof(el) == 'object' && el.xtype) {
-        // created from xtype...
-        config = el;
-        ds = el.dataSource;
-        el = config.container;
-    }
-    var items = [];
-    if (config.items) {
-        items = config.items;
-        config.items = [];
-    }
-    
-    Roo.bootstrap.PagingToolbar.superclass.constructor.call(this, el, null, config);
-    this.ds = ds;
-    this.cursor = 0;
-    this.renderButtons(this.el);
-    this.bind(ds);
-    
-    // supprot items array.
-   
-    Roo.each(items, function(e) {
-        this.add(Roo.factory(e));
-    },this);
-    
-};
-
-Roo.extend(Roo.bootstrap.PagingToolbar, Roo.bootstrap.Toolbar, {
-    /**
-     * @cfg {Roo.data.Store} dataSource
-     * The underlying data store providing the paged data
-     */
-    /**
-     * @cfg {String/HTMLElement/Element} container
-     * container The id or element that will contain the toolbar
-     */
-    /**
-     * @cfg {Boolean} displayInfo
-     * True to display the displayMsg (defaults to false)
-     */
-    /**
-     * @cfg {Number} pageSize
-     * The number of records to display per page (defaults to 20)
-     */
-    pageSize: 20,
-    /**
-     * @cfg {String} displayMsg
-     * The paging status message to display (defaults to "Displaying {start} - {end} of {total}")
-     */
-    displayMsg : 'Displaying {0} - {1} of {2}',
-    /**
-     * @cfg {String} emptyMsg
-     * The message to display when no records are found (defaults to "No data to display")
-     */
-    emptyMsg : 'No data to display',
-    /**
-     * Customizable piece of the default paging text (defaults to "Page")
-     * @type String
-     */
-    beforePageText : "Page",
-    /**
-     * Customizable piece of the default paging text (defaults to "of %0")
-     * @type String
-     */
-    afterPageText : "of {0}",
-    /**
-     * Customizable piece of the default paging text (defaults to "First Page")
-     * @type String
-     */
-    firstText : "First Page",
-    /**
-     * Customizable piece of the default paging text (defaults to "Previous Page")
-     * @type String
-     */
-    prevText : "Previous Page",
-    /**
-     * Customizable piece of the default paging text (defaults to "Next Page")
-     * @type String
-     */
-    nextText : "Next Page",
-    /**
-     * Customizable piece of the default paging text (defaults to "Last Page")
-     * @type String
-     */
-    lastText : "Last Page",
-    /**
-     * Customizable piece of the default paging text (defaults to "Refresh")
-     * @type String
-     */
-    refreshText : "Refresh",
-
-    // private
-    renderButtons : function(el){
-        Roo.bootstrap.PagingToolbar.superclass.render.call(this, el);
-        this.first = this.addButton({
-            tooltip: this.firstText,
-            cls: "x-btn-icon x-grid-page-first",
-            disabled: true,
-            handler: this.onClick.createDelegate(this, ["first"])
-        });
-        this.prev = this.addButton({
-            tooltip: this.prevText,
-            cls: "x-btn-icon x-grid-page-prev",
-            disabled: true,
-            handler: this.onClick.createDelegate(this, ["prev"])
-        });
-        //this.addSeparator();
-        this.add(this.beforePageText);
-        this.field = Roo.get(this.addDom({
-           tag: "input",
-           type: "text",
-           size: "3",
-           value: "1",
-           cls: "x-grid-page-number"
-        }).el);
-        this.field.on("keydown", this.onPagingKeydown, this);
-        this.field.on("focus", function(){this.dom.select();});
-        this.afterTextEl = this.addText(String.format(this.afterPageText, 1));
-        this.field.setHeight(18);
-        //this.addSeparator();
-        this.next = this.addButton({
-            tooltip: this.nextText,
-            cls: "x-btn-icon x-grid-page-next",
-            disabled: true,
-            handler: this.onClick.createDelegate(this, ["next"])
-        });
-        this.last = this.addButton({
-            tooltip: this.lastText,
-            cls: "x-btn-icon x-grid-page-last",
-            disabled: true,
-            handler: this.onClick.createDelegate(this, ["last"])
-        });
-        //this.addSeparator();
-        this.loading = this.addButton({
-            tooltip: this.refreshText,
-            cls: "x-btn-icon x-grid-loading",
-            handler: this.onClick.createDelegate(this, ["refresh"])
-        });
-
-        if(this.displayInfo){
-            this.displayEl = Roo.fly(this.el.dom.firstChild).createChild({cls:'x-paging-info'});
-        }
-    },
-
-    // private
-    updateInfo : function(){
-        if(this.displayEl){
-            var count = this.ds.getCount();
-            var msg = count == 0 ?
-                this.emptyMsg :
-                String.format(
-                    this.displayMsg,
-                    this.cursor+1, this.cursor+count, this.ds.getTotalCount()    
-                );
-            this.displayEl.update(msg);
-        }
-    },
-
-    // private
-    onLoad : function(ds, r, o){
-       this.cursor = o.params ? o.params.start : 0;
-       var d = this.getPageData(), ap = d.activePage, ps = d.pages;
-
-       this.afterTextEl.el.innerHTML = String.format(this.afterPageText, d.pages);
-       this.field.dom.value = ap;
-       this.first.setDisabled(ap == 1);
-       this.prev.setDisabled(ap == 1);
-       this.next.setDisabled(ap == ps);
-       this.last.setDisabled(ap == ps);
-       this.loading.enable();
-       this.updateInfo();
-    },
-
-    // private
-    getPageData : function(){
-        var total = this.ds.getTotalCount();
-        return {
-            total : total,
-            activePage : Math.ceil((this.cursor+this.pageSize)/this.pageSize),
-            pages :  total < this.pageSize ? 1 : Math.ceil(total/this.pageSize)
-        };
-    },
-
-    // private
-    onLoadError : function(){
-        this.loading.enable();
-    },
-
-    // private
-    onPagingKeydown : function(e){
-        var k = e.getKey();
-        var d = this.getPageData();
-        if(k == e.RETURN){
-            var v = this.field.dom.value, pageNum;
-            if(!v || isNaN(pageNum = parseInt(v, 10))){
-                this.field.dom.value = d.activePage;
-                return;
-            }
-            pageNum = Math.min(Math.max(1, pageNum), d.pages) - 1;
-            this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
-            e.stopEvent();
-        }
-        else if(k == e.HOME || (k == e.UP && e.ctrlKey) || (k == e.PAGEUP && e.ctrlKey) || (k == e.RIGHT && e.ctrlKey) || k == e.END || (k == e.DOWN && e.ctrlKey) || (k == e.LEFT && e.ctrlKey) || (k == e.PAGEDOWN && e.ctrlKey))
-        {
-          var pageNum = (k == e.HOME || (k == e.DOWN && e.ctrlKey) || (k == e.LEFT && e.ctrlKey) || (k == e.PAGEDOWN && e.ctrlKey)) ? 1 : d.pages;
-          this.field.dom.value = pageNum;
-          this.ds.load({params:{start: (pageNum - 1) * this.pageSize, limit: this.pageSize}});
-          e.stopEvent();
-        }
-        else if(k == e.UP || k == e.RIGHT || k == e.PAGEUP || k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN)
-        {
-          var v = this.field.dom.value, pageNum; 
-          var increment = (e.shiftKey) ? 10 : 1;
-          if(k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN)
-            increment *= -1;
-          if(!v || isNaN(pageNum = parseInt(v, 10))) {
-            this.field.dom.value = d.activePage;
-            return;
-          }
-          else if(parseInt(v, 10) + increment >= 1 & parseInt(v, 10) + increment <= d.pages)
-          {
-            this.field.dom.value = parseInt(v, 10) + increment;
-            pageNum = Math.min(Math.max(1, pageNum + increment), d.pages) - 1;
-            this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
-          }
-          e.stopEvent();
-        }
-    },
-
-    // private
-    beforeLoad : function(){
-        if(this.loading){
-            this.loading.disable();
-        }
-    },
-
-    // private
-    onClick : function(which){
-        var ds = this.ds;
-        switch(which){
-            case "first":
-                ds.load({params:{start: 0, limit: this.pageSize}});
-            break;
-            case "prev":
-                ds.load({params:{start: Math.max(0, this.cursor-this.pageSize), limit: this.pageSize}});
-            break;
-            case "next":
-                ds.load({params:{start: this.cursor+this.pageSize, limit: this.pageSize}});
-            break;
-            case "last":
-                var total = ds.getTotalCount();
-                var extra = total % this.pageSize;
-                var lastStart = extra ? (total - extra) : total-this.pageSize;
-                ds.load({params:{start: lastStart, limit: this.pageSize}});
-            break;
-            case "refresh":
-                ds.load({params:{start: this.cursor, limit: this.pageSize}});
-            break;
-        }
-    },
-
-    /**
-     * Unbinds the paging toolbar from the specified {@link Roo.data.Store}
-     * @param {Roo.data.Store} store The data store to unbind
-     */
-    unbind : function(ds){
-        ds.un("beforeload", this.beforeLoad, this);
-        ds.un("load", this.onLoad, this);
-        ds.un("loadexception", this.onLoadError, this);
-        ds.un("remove", this.updateInfo, this);
-        ds.un("add", this.updateInfo, this);
-        this.ds = undefined;
-    },
-
-    /**
-     * Binds the paging toolbar to the specified {@link Roo.data.Store}
-     * @param {Roo.data.Store} store The data store to bind
-     */
-    bind : function(ds){
-        ds.on("beforeload", this.beforeLoad, this);
-        ds.on("load", this.onLoad, this);
-        ds.on("loadexception", this.onLoadError, this);
-        ds.on("remove", this.updateInfo, this);
-        ds.on("add", this.updateInfo, this);
-        this.ds = ds;
-    }
-});
\ No newline at end of file
diff --git a/Roo/bootstrap/SplitButton.js b/Roo/bootstrap/SplitButton.js
deleted file mode 100644
index 47f859f7e4..0000000000
--- a/Roo/bootstrap/SplitButton.js
+++ /dev/null
@@ -1,194 +0,0 @@
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
- 
-/**
- * @class Roo.bootstrap.SplitButton
- * @extends Roo.bootstrap.Button
- * A split button that provides a built-in dropdown arrow that can fire an event separately from the default
- * click event of the button.  Typically this would be used to display a dropdown menu that provides additional
- * options to the primary button action, but any custom handler can provide the arrowclick implementation.
- * @cfg {Function} arrowHandler A function called when the arrow button is clicked (can be used instead of click event)
- * @cfg {String} arrowTooltip The title attribute of the arrow
- * @constructor
- * Create a new menu button
- * @param {String/HTMLElement/Element} renderTo The element to append the button to
- * @param {Object} config The config object
- */
-Roo.bootstrap.SplitButton = function(renderTo, config){
-    Roo.bootstrap.SplitButton.superclass.constructor.call(this, renderTo, config);
-    /**
-     * @event arrowclick
-     * Fires when this button's arrow is clicked
-     * @param {SplitButton} this
-     * @param {EventObject} e The click event
-     */
-    this.addEvents({"arrowclick":true});
-};
-
-Roo.extend(Roo.bootstrap.SplitButton, Roo.bootstrap.Button, {
-    render : function(renderTo){
-        // this is one sweet looking template!
-        var tpl = new Roo.Template(
-            '<table cellspacing="0" class="x-btn-menu-wrap x-btn"><tr><td>',
-            '<table cellspacing="0" class="x-btn-wrap x-btn-menu-text-wrap"><tbody>',
-            '<tr><td class="x-btn-left"><i>&#160;</i></td><td class="x-btn-center"><button class="x-btn-text" type="{1}">{0}</button></td></tr>',
-            "</tbody></table></td><td>",
-            '<table cellspacing="0" class="x-btn-wrap x-btn-menu-arrow-wrap"><tbody>',
-            '<tr><td class="x-btn-center"><button class="x-btn-menu-arrow-el" type="button">&#160;</button></td><td class="x-btn-right"><i>&#160;</i></td></tr>',
-            "</tbody></table></td></tr></table>"
-        );
-        var btn = tpl.append(renderTo, [this.text, this.type], true);
-        var btnEl = btn.child("button");
-        if(this.cls){
-            btn.addClass(this.cls);
-        }
-        if(this.icon){
-            btnEl.setStyle('background-image', 'url(' +this.icon +')');
-        }
-        if(this.iconCls){
-            btnEl.addClass(this.iconCls);
-            if(!this.cls){
-                btn.addClass(this.text ? 'x-btn-text-icon' : 'x-btn-icon');
-            }
-        }
-        this.el = btn;
-        if(this.handleMouseEvents){
-            btn.on("mouseover", this.onMouseOver, this);
-            btn.on("mouseout", this.onMouseOut, this);
-            btn.on("mousedown", this.onMouseDown, this);
-            btn.on("mouseup", this.onMouseUp, this);
-        }
-        btn.on(this.clickEvent, this.onClick, this);
-        if(this.tooltip){
-            if(typeof this.tooltip == 'object'){
-                Roo.QuickTips.tips(Roo.apply({
-                      target: btnEl.id
-                }, this.tooltip));
-            } else {
-                btnEl.dom[this.tooltipType] = this.tooltip;
-            }
-        }
-        if(this.arrowTooltip){
-            btn.child("button:nth(2)").dom[this.tooltipType] = this.arrowTooltip;
-        }
-        if(this.hidden){
-            this.hide();
-        }
-        if(this.disabled){
-            this.disable();
-        }
-        if(this.pressed){
-            this.el.addClass("x-btn-pressed");
-        }
-        if(Roo.isIE && !Roo.isIE7){
-            this.autoWidth.defer(1, this);
-        }else{
-            this.autoWidth();
-        }
-        if(this.menu){
-            this.menu.on("show", this.onMenuShow, this);
-            this.menu.on("hide", this.onMenuHide, this);
-        }
-        this.fireEvent('render', this);
-    },
-
-    // private
-    autoWidth : function(){
-        if(this.el){
-            var tbl = this.el.child("table:first");
-            var tbl2 = this.el.child("table:last");
-            this.el.setWidth("auto");
-            tbl.setWidth("auto");
-            if(Roo.isIE7 && Roo.isStrict){
-                var ib = this.el.child('button:first');
-                if(ib && ib.getWidth() > 20){
-                    ib.clip();
-                    ib.setWidth(Roo.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr'));
-                }
-            }
-            if(this.minWidth){
-                if(this.hidden){
-                    this.el.beginMeasure();
-                }
-                if((tbl.getWidth()+tbl2.getWidth()) < this.minWidth){
-                    tbl.setWidth(this.minWidth-tbl2.getWidth());
-                }
-                if(this.hidden){
-                    this.el.endMeasure();
-                }
-            }
-            this.el.setWidth(tbl.getWidth()+tbl2.getWidth());
-        } 
-    },
-    /**
-     * Sets this button's click handler
-     * @param {Function} handler The function to call when the button is clicked
-     * @param {Object} scope (optional) Scope for the function passed above
-     */
-    setHandler : function(handler, scope){
-        this.handler = handler;
-        this.scope = scope;  
-    },
-    
-    /**
-     * Sets this button's arrow click handler
-     * @param {Function} handler The function to call when the arrow is clicked
-     * @param {Object} scope (optional) Scope for the function passed above
-     */
-    setArrowHandler : function(handler, scope){
-        this.arrowHandler = handler;
-        this.scope = scope;  
-    },
-    
-    /**
-     * Focus the button
-     */
-    focus : function(){
-        if(this.el){
-            this.el.child("button:first").focus();
-        }
-    },
-
-    // private
-    onClick : function(e){
-        e.preventDefault();
-        if(!this.disabled){
-            if(e.getTarget(".x-btn-menu-arrow-wrap")){
-                if(this.menu && !this.menu.isVisible()){
-                    this.menu.show(this.el, this.menuAlign);
-                }
-                this.fireEvent("arrowclick", this, e);
-                if(this.arrowHandler){
-                    this.arrowHandler.call(this.scope || this, this, e);
-                }
-            }else{
-                this.fireEvent("click", this, e);
-                if(this.handler){
-                    this.handler.call(this.scope || this, this, e);
-                }
-            }
-        }
-    },
-    // private
-    onMouseDown : function(e){
-        if(!this.disabled){
-            Roo.fly(e.getTarget("table")).addClass("x-btn-click");
-        }
-    },
-    // private
-    onMouseUp : function(e){
-        Roo.fly(e.getTarget("table")).removeClass("x-btn-click");
-    }   
-});
-
-
-// backwards compat
-Roo.bootstrap.MenuButton = Roo.bootstrap.SplitButton;
\ No newline at end of file
diff --git a/Roo/bootstrap/Toolbar.js b/Roo/bootstrap/Toolbar.js
deleted file mode 100644
index 83fc41e654..0000000000
--- a/Roo/bootstrap/Toolbar.js
+++ /dev/null
@@ -1,619 +0,0 @@
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-/**
- * @class Roo.bootstrap.Toolbar
- * Basic Toolbar class.
- * @constructor
- * Creates a new Toolbar
- * @param {Object} container The config object
- */ 
-Roo.bootstrap.Toolbar = function(container, buttons, config)
-{
-    /// old consturctor format still supported..
-    if(container instanceof Array){ // omit the container for later rendering
-        buttons = container;
-        config = buttons;
-        container = null;
-    }
-    if (typeof(container) == 'object' && container.xtype) {
-        config = container;
-        container = config.container;
-        buttons = config.buttons || []; // not really - use items!!
-    }
-    var xitems = [];
-    if (config && config.items) {
-        xitems = config.items;
-        delete config.items;
-    }
-    Roo.apply(this, config);
-    this.buttons = buttons;
-    
-    if(container){
-        this.render(container);
-    }
-    this.xitems = xitems;
-    Roo.each(xitems, function(b) {
-        this.add(b);
-    }, this);
-    
-};
-
-Roo.bootstrap.Toolbar.prototype = {
-    /**
-     * @cfg {Array} items
-     * array of button configs or elements to add (will be converted to a MixedCollection)
-     */
-    
-    /**
-     * @cfg {String/HTMLElement/Element} container
-     * The id or element that will contain the toolbar
-     */
-    // private
-    render : function(ct){
-        this.el = Roo.get(ct);
-        if(this.cls){
-            this.el.addClass(this.cls);
-        }
-        // using a table allows for vertical alignment
-        // 100% width is needed by Safari...
-        this.el.update('<div class="x-toolbar x-small-editor"><table cellspacing="0"><tr></tr></table></div>');
-        this.tr = this.el.child("tr", true);
-        var autoId = 0;
-        this.items = new Roo.util.MixedCollection(false, function(o){
-            return o.id || ("item" + (++autoId));
-        });
-        if(this.buttons){
-            this.add.apply(this, this.buttons);
-            delete this.buttons;
-        }
-    },
-
-    /**
-     * 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 The following types of arguments are all valid:<br />
-     * <ul>
-     * <li>{@link Roo.bootstrap.Toolbar.Button} config: A valid button config object (equivalent to {@link #addButton})</li>
-     * <li>HtmlElement: Any standard HTML element (equivalent to {@link #addElement})</li>
-     * <li>Field: Any form field (equivalent to {@link #addField})</li>
-     * <li>Item: Any subclass of {@link Roo.bootstrap.Toolbar.Item} (equivalent to {@link #addItem})</li>
-     * <li>String: Any generic string (gets wrapped in a {@link Roo.bootstrap.Toolbar.TextItem}, equivalent to {@link #addText}).
-     * Note that there are a few special strings that are treated differently as explained nRoo.</li>
-     * <li>'separator' or '-': Creates a separator element (equivalent to {@link #addSeparator})</li>
-     * <li>' ': Creates a spacer element (equivalent to {@link #addSpacer})</li>
-     * <li>'->': Creates a fill element (equivalent to {@link #addFill})</li>
-     * </ul>
-     * @param {Mixed} arg2
-     * @param {Mixed} etc.
-     */
-    add : function(){
-        var a = arguments, l = a.length;
-        for(var i = 0; i < l; i++){
-            this._add(a[i]);
-        }
-    },
-    // private..
-    _add : function(el) {
-        
-        if (el.xtype) {
-            el = Roo.factory(el, typeof(Roo.bootstrap.Toolbar[el.xtype]) == 'undefined' ? Roo.bootstrap.form : Roo.bootstrap.Toolbar);
-        }
-        
-        if (el.applyTo){ // some kind of form field
-            return this.addField(el);
-        } 
-        if (el.render){ // some kind of Toolbar.Item
-            return this.addItem(el);
-        }
-        if (typeof el == "string"){ // string
-            if(el == "separator" || el == "-"){
-                return this.addSeparator();
-            }
-            if (el == " "){
-                return this.addSpacer();
-            }
-            if(el == "->"){
-                return this.addFill();
-            }
-            return this.addText(el);
-            
-        }
-        if(el.tagName){ // element
-            return this.addElement(el);
-        }
-        if(typeof el == "object"){ // must be button config?
-            return this.addButton(el);
-        }
-        // and now what?!?!
-        return false;
-        
-    },
-    
-    /**
-     * Add an Xtype element
-     * @param {Object} xtype Xtype Object
-     * @return {Object} created Object
-     */
-    addxtype : function(e){
-        return this.add(e);  
-    },
-    
-    /**
-     * Returns the Element for this toolbar.
-     * @return {Roo.bootstrap.Element}
-     */
-    getEl : function(){
-        return this.el;  
-    },
-    
-    /**
-     * Adds a separator
-     * @return {Roo.bootstrap.Toolbar.Item} The separator item
-     */
-    addSeparator : function(){
-        return this.addItem(new Roo.bootstrap.Toolbar.Separator());
-    },
-
-    /**
-     * Adds a spacer element
-     * @return {Roo.bootstrap.Toolbar.Spacer} The spacer item
-     */
-    addSpacer : function(){
-        return this.addItem(new Roo.bootstrap.Toolbar.Spacer());
-    },
-
-    /**
-     * Adds a fill element that forces subsequent additions to the right side of the toolbar
-     * @return {Roo.bootstrap.Toolbar.Fill} The fill item
-     */
-    addFill : function(){
-        return this.addItem(new Roo.bootstrap.Toolbar.Fill());
-    },
-
-    /**
-     * Adds any standard HTML element to the toolbar
-     * @param {String/HTMLElement/Element} el The element or id of the element to add
-     * @return {Roo.bootstrap.Toolbar.Item} The element's item
-     */
-    addElement : function(el){
-        return this.addItem(new Roo.bootstrap.Toolbar.Item(el));
-    },
-    /**
-     * Collection of items on the toolbar.. (only Toolbar Items, so use fields to retrieve fields)
-     * @type Roo.util.MixedCollection  
-     */
-    items : false,
-     
-    /**
-     * Adds any Toolbar.Item or subclass
-     * @param {Roo.bootstrap.Toolbar.Item} item
-     * @return {Roo.bootstrap.Toolbar.Item} The item
-     */
-    addItem : function(item){
-        var td = this.nextBlock();
-        item.render(td);
-        this.items.add(item);
-        return item;
-    },
-    
-    /**
-     * Adds a button (or buttons). See {@link Roo.Toolbar.Button} for more info on the config.
-     * @param {Object/Array} config A button config or array of configs
-     * @return {Roo.bootstrap.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 Roo.bootstrap.Toolbar.Button)){
-            b = config.split ?
-                new Roo.bootstrap.Toolbar.SplitButton(config) :
-                new Roo.bootstrap.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 {Roo.bootstrap.Toolbar.Item} The element's item
-     */
-    addText : function(text){
-        return this.addItem(new Roo.bootstrap.Toolbar.TextItem(text));
-    },
-    
-    /**
-     * Inserts any {@link Roo.Toolbar.Item}/{@link Roo.Toolbar.Button} at the specified index.
-     * @param {Number} index The index where the item is to be inserted
-     * @param {Object/Roo.bootstrap.Toolbar.Item/Roo.bootstrap.Toolbar.Button (may be Array)} item The button, or button config object to be inserted.
-     * @return {Roo.bootstrap.Toolbar.Button/Item}
-     */
-    insertButton : function(index, item){
-        if(item instanceof Array){
-            var buttons = [];
-            for(var i = 0, len = item.length; i < len; i++) {
-               buttons.push(this.insertButton(index + i, item[i]));
-            }
-            return buttons;
-        }
-        if (!(item instanceof Roo.bootstrap.Toolbar.Button)){
-           item = new Roo.bootstrap.Toolbar.Button(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 {@link Roo.DomHelper} config.
-     * @param {Object} config
-     * @return {Roo.bootstrap.Toolbar.Item} The element's item
-     */
-    addDom : function(config, returnEl){
-        var td = this.nextBlock();
-        Roo.DomHelper.overwrite(td, config);
-        var ti = new Roo.bootstrap.Toolbar.Item(td.firstChild);
-        ti.render(td);
-        this.items.add(ti);
-        return ti;
-    },
-
-    /**
-     * Collection of fields on the toolbar.. usefull for quering (value is false if there are no fields)
-     * @type Roo.util.MixedCollection  
-     */
-    fields : false,
-    
-    /**
-     * Adds a dynamically rendered Roo.form field (TextField, ComboBox, etc).
-     * Note: the field should not have been rendered yet. For a field that has already been
-     * rendered, use {@link #addElement}.
-     * @param {Roo.bootstrap.form.Field} field
-     * @return {Roo.bootstrap.ToolbarItem}
-     */
-     
-      
-    addField : function(field) {
-        if (!this.fields) {
-            var autoId = 0;
-            this.fields = new Roo.util.MixedCollection(false, function(o){
-                return o.id || ("item" + (++autoId));
-            });
-
-        }
-        
-        var td = this.nextBlock();
-        field.render(td);
-        var ti = new Roo.bootstrap.Toolbar.Item(td.firstChild);
-        ti.render(td);
-        this.items.add(ti);
-        this.fields.add(field);
-        return ti;
-    },
-    /**
-     * Hide the toolbar
-     * @method hide
-     */
-     
-      
-    hide : function()
-    {
-        this.el.child('div').setVisibilityMode(Roo.Element.DISPLAY);
-        this.el.child('div').hide();
-    },
-    /**
-     * Show the toolbar
-     * @method show
-     */
-    show : function()
-    {
-        this.el.child('div').show();
-    },
-      
-    // private
-    nextBlock : function(){
-        var td = document.createElement("td");
-        this.tr.appendChild(td);
-        return td;
-    },
-
-    // private
-    destroy : function(){
-        if(this.items){ // rendered?
-            Roo.destroy.apply(Roo, this.items.items);
-        }
-        if(this.fields){ // rendered?
-            Roo.destroy.apply(Roo, this.fields.items);
-        }
-        Roo.Element.uncache(this.el, this.tr);
-    }
-};
-
-/**
- * @class Roo.Toolbar.Item
- * The base class that other classes should extend in order to get some basic common toolbar item functionality.
- * @constructor
- * Creates a new Item
- * @param {HTMLElement} el 
- */
-Roo.bootstrap.Toolbar.Item = function(el){
-    this.el = Roo.getDom(el);
-    this.id = Roo.id(this.el);
-    this.hidden = false;
-};
-
-Roo.bootstrap.Toolbar.Item.prototype = {
-    
-    /**
-     * Get this item's HTML Element
-     * @return {HTMLElement}
-     */
-    getEl : function(){
-       return this.el;  
-    },
-
-    // private
-    render : function(td){
-        this.td = td;
-        td.appendChild(this.el);
-    },
-    
-    /**
-     * Removes and destroys this item.
-     */
-    destroy : function(){
-        this.td.parentNode.removeChild(this.td);
-    },
-    
-    /**
-     * Shows this item.
-     */
-    show: function(){
-        this.hidden = false;
-        this.td.style.display = "";
-    },
-    
-    /**
-     * Hides 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(){
-        Roo.fly(this.el).focus();
-    },
-    
-    /**
-     * Disables this item.
-     */
-    disable : function(){
-        Roo.fly(this.td).addClass("x-item-disabled");
-        this.disabled = true;
-        this.el.disabled = true;
-    },
-    
-    /**
-     * Enables this item.
-     */
-    enable : function(){
-        Roo.fly(this.td).removeClass("x-item-disabled");
-        this.disabled = false;
-        this.el.disabled = false;
-    }
-};
-
-
-/**
- * @class Roo.bootstrap.Toolbar.Separator
- * @extends Roo.bootstrap.Toolbar.Item
- * A simple toolbar separator class
- * @constructor
- * Creates a new Separator
- */
-Roo.bootstrap.Toolbar.Separator = function(){
-    var s = document.createElement("span");
-    s.className = "ytb-sep";
-    Roo.bootstrap.Toolbar.Separator.superclass.constructor.call(this, s);
-};
-Roo.extend(Roo.bootstrap.Toolbar.Separator, Roo.bootstrap.Toolbar.Item, {
-    enable:Roo.emptyFn,
-    disable:Roo.emptyFn,
-    focus:Roo.emptyFn
-});
-
-/**
- * @class Roo.bootstrap.Toolbar.Spacer
- * @extends Roo.bootstrap.Toolbar.Item
- * A simple element that adds extra horizontal space to a toolbar.
- * @constructor
- * Creates a new Spacer
- */
-Roo.bootstrap.Toolbar.Spacer = function(){
-    var s = document.createElement("div");
-    s.className = "ytb-spacer";
-    Roo.bootstrap.Toolbar.Spacer.superclass.constructor.call(this, s);
-};
-Roo.extend(Roo.bootstrap.Toolbar.Spacer, Roo.bootstrap.Toolbar.Item, {
-    enable:Roo.emptyFn,
-    disable:Roo.emptyFn,
-    focus:Roo.emptyFn
-});
-
-/**
- * @class Roo.bootstrap.Toolbar.Fill
- * @extends Roo.bootstrap.Toolbar.Spacer
- * A simple element that adds a greedy (100% width) horizontal space to a toolbar.
- * @constructor
- * Creates a new Spacer
- */
-Roo.bootstrap.Toolbar.Fill = Roo.extend(Roo.bootstrap.Toolbar.Spacer, {
-    // private
-    render : function(td){
-        td.style.width = '100%';
-        Roo.bootstrap.Toolbar.Fill.superclass.render.call(this, td);
-    }
-});
-
-/**
- * @class Roo.bootstrap.Toolbar.TextItem
- * @extends Roo.bootstrap.Toolbar.Item
- * A simple class that renders text directly into a toolbar.
- * @constructor
- * Creates a new TextItem
- * @param {String} text
- */
-Roo.bootstrap.Toolbar.TextItem = function(text){
-    if (typeof(text) == 'object') {
-        text = text.text;
-    }
-    var s = document.createElement("span");
-    s.className = "ytb-text";
-    s.innerHTML = text;
-    Roo.bootstrap.Toolbar.TextItem.superclass.constructor.call(this, s);
-};
-Roo.extend(Roo.bootstrap.Toolbar.TextItem, Roo.bootstrap.Toolbar.Item, {
-    enable:Roo.emptyFn,
-    disable:Roo.emptyFn,
-    focus:Roo.emptyFn
-});
-
-/**
- * @class Roo.bootstrap.Toolbar.Button
- * @extends Roo.Button
- * A button that renders into a toolbar.
- * @constructor
- * Creates a new Button
- * @param {Object} config A standard {@link Roo.Button} config object
- */
-Roo.bootstrap.Toolbar.Button = function(config){
-    Roo.bootstrap.Toolbar.Button.superclass.constructor.call(this, null, config);
-};
-Roo.extend(Roo.bootstrap.Toolbar.Button, Roo.bootstrap.Button, {
-    render : function(td){
-        this.td = td;
-        Roo.bootstrap.Toolbar.Button.superclass.render.call(this, td);
-    },
-    
-    /**
-     * Removes and destroys this button
-     */
-    destroy : function(){
-        Roo.bootstrap.Toolbar.Button.superclass.destroy.call(this);
-        this.td.parentNode.removeChild(this.td);
-    },
-    
-    /**
-     * Shows this button
-     */
-    show: function(){
-        this.hidden = false;
-        this.td.style.display = "";
-    },
-    
-    /**
-     * Hides this button
-     */
-    hide: function(){
-        this.hidden = true;
-        this.td.style.display = "none";
-    },
-
-    /**
-     * Disables this item
-     */
-    disable : function(){
-        Roo.fly(this.td).addClass("x-item-disabled");
-        this.disabled = true;
-    },
-
-    /**
-     * Enables this item
-     */
-    enable : function(){
-        Roo.fly(this.td).removeClass("x-item-disabled");
-        this.disabled = false;
-    }
-});
-// backwards compat
-Roo.bootstrap.ToolbarButton = Roo.bootstrap.Toolbar.Button;
-
-/**
- * @class Roo.bootstrap.Toolbar.SplitButton
- * @extends Roo.bootstrap.SplitButton
- * A menu button that renders into a toolbar.
- * @constructor
- * Creates a new SplitButton
- * @param {Object} config A standard {@link Roo.bootstrap.SplitButton} config object
- */
-Roo.bootstrap.Toolbar.SplitButton = function(config){
-    Roo.bootstrap.Toolbar.SplitButton.superclass.constructor.call(this, null, config);
-};
-Roo.extend(Roo.bootstrap.Toolbar.SplitButton, Roo.bootstrap.SplitButton, {
-    render : function(td){
-        this.td = td;
-        Roo.bootstrap.Toolbar.SplitButton.superclass.render.call(this, td);
-    },
-    
-    /**
-     * Removes and destroys this button
-     */
-    destroy : function(){
-        Roo.bootstrap.Toolbar.SplitButton.superclass.destroy.call(this);
-        this.td.parentNode.removeChild(this.td);
-    },
-    
-    /**
-     * Shows this button
-     */
-    show: function(){
-        this.hidden = false;
-        this.td.style.display = "";
-    },
-    
-    /**
-     * Hides this button
-     */
-    hide: function(){
-        this.hidden = true;
-        this.td.style.display = "none";
-    }
-});
-
-// backwards compat
-Roo.bootstrap.Toolbar.MenuButton = Roo.bootstrap.Toolbar.SplitButton;
\ No newline at end of file