lpmp 1.0.0

data/public/ext-3.0.0/pkgs/pkg-tips.js

@@ -0,0 +1,7 @@
+/*
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+Ext.Tip=Ext.extend(Ext.Panel,{minWidth:40,maxWidth:300,shadow:"sides",defaultAlign:"tl-bl?",autoRender:true,quickShowInterval:250,frame:true,hidden:true,baseCls:"x-tip",floating:{shadow:true,shim:true,useDisplay:true,constrain:false},autoHeight:true,closeAction:"hide",initComponent:function(){Ext.Tip.superclass.initComponent.call(this);if(this.closable&&!this.title){this.elements+=",header"}},afterRender:function(){Ext.Tip.superclass.afterRender.call(this);if(this.closable){this.addTool({id:"close",handler:this[this.closeAction],scope:this})}},showAt:function(a){Ext.Tip.superclass.show.call(this);if(this.measureWidth!==false&&(!this.initialConfig||typeof this.initialConfig.width!="number")){this.doAutoWidth()}if(this.constrainPosition){a=this.el.adjustForConstraints(a)}this.setPagePosition(a[0],a[1])},doAutoWidth:function(){var a=this.body.getTextWidth();if(this.title){a=Math.max(a,this.header.child("span").getTextWidth(this.title))}a+=this.getFrameWidth()+(this.closable?20:0)+this.body.getPadding("lr");this.setWidth(a.constrain(this.minWidth,this.maxWidth));if(Ext.isIE7&&!this.repainted){this.el.repaint();this.repainted=true}},showBy:function(a,b){if(!this.rendered){this.render(Ext.getBody())}this.showAt(this.el.getAlignToXY(a,b||this.defaultAlign))},initDraggable:function(){this.dd=new Ext.Tip.DD(this,typeof this.draggable=="boolean"?null:this.draggable);this.header.addClass("x-tip-draggable")}});Ext.Tip.DD=function(b,a){Ext.apply(this,a);this.tip=b;Ext.Tip.DD.superclass.constructor.call(this,b.el.id,"WindowDD-"+b.id);this.setHandleElId(b.header.id);this.scroll=false};Ext.extend(Ext.Tip.DD,Ext.dd.DD,{moveOnly:true,scroll:false,headerOffsets:[100,25],startDrag:function(){this.tip.el.disableShadow()},endDrag:function(a){this.tip.el.enableShadow(true)}});Ext.ToolTip=Ext.extend(Ext.Tip,{showDelay:500,hideDelay:200,dismissDelay:5000,trackMouse:false,anchorToTarget:true,anchorOffset:0,targetCounter:0,constrainPosition:false,initComponent:function(){Ext.ToolTip.superclass.initComponent.call(this);this.lastActive=new Date();this.initTarget(this.target);this.origAnchor=this.anchor},onRender:function(b,a){Ext.ToolTip.superclass.onRender.call(this,b,a);this.anchorCls="x-tip-anchor-"+this.getAnchorPosition();this.anchorEl=this.el.createChild({cls:"x-tip-anchor "+this.anchorCls})},afterRender:function(){Ext.ToolTip.superclass.afterRender.call(this);this.anchorEl.setStyle("z-index",this.el.getZIndex()+1)},initTarget:function(b){var a;if((a=Ext.get(b))){if(this.target){this.target=Ext.get(this.target);this.target.un("mouseover",this.onTargetOver,this);this.target.un("mouseout",this.onTargetOut,this);this.target.un("mousemove",this.onMouseMove,this)}this.mon(a,{mouseover:this.onTargetOver,mouseout:this.onTargetOut,mousemove:this.onMouseMove,scope:this});this.target=a}if(this.anchor){this.anchorTarget=this.target}},onMouseMove:function(b){var a=this.delegate?b.getTarget(this.delegate):this.triggerElement=true;if(a){this.targetXY=b.getXY();if(a===this.triggerElement){if(!this.hidden&&this.trackMouse){this.setPagePosition(this.getTargetXY())}}else{this.hide();this.lastActive=new Date(0);this.onTargetOver(b)}}else{if(!this.closable&&this.isVisible()){this.hide()}}},getTargetXY:function(){if(this.anchor){this.targetCounter++;var c=this.getOffsets();var i=(this.anchorToTarget&&!this.trackMouse)?this.el.getAlignToXY(this.anchorTarget,this.getAnchorAlign()):this.targetXY;var a=Ext.lib.Dom.getViewWidth()-5;var f=Ext.lib.Dom.getViewHeight()-5;var h=(document.documentElement.scrollLeft||document.body.scrollLeft||0)+5;var g=(document.documentElement.scrollTop||document.body.scrollTop||0)+5;var b=[i[0]+c[0],i[1]+c[1]];var e=this.getSize();this.anchorEl.removeClass(this.anchorCls);if(this.targetCounter<2){if(b[0]<h){if(this.anchorToTarget){this.defaultAlign="l-r";if(this.mouseOffset){this.mouseOffset[0]*=-1}}this.anchor="left";return this.getTargetXY()}if(b[0]+e.width>a){if(this.anchorToTarget){this.defaultAlign="r-l";if(this.mouseOffset){this.mouseOffset[0]*=-1}}this.anchor="right";return this.getTargetXY()}if(b[1]<g){if(this.anchorToTarget){this.defaultAlign="t-b";if(this.mouseOffset){this.mouseOffset[1]*=-1}}this.anchor="top";return this.getTargetXY()}if(b[1]+e.height>f){if(this.anchorToTarget){this.defaultAlign="b-t";if(this.mouseOffset){this.mouseOffset[1]*=-1}}this.anchor="bottom";return this.getTargetXY()}}this.anchorCls="x-tip-anchor-"+this.getAnchorPosition();this.anchorEl.addClass(this.anchorCls);this.targetCounter=0;return b}else{var d=this.getMouseOffset();return[this.targetXY[0]+d[0],this.targetXY[1]+d[1]]}},getMouseOffset:function(){var a=this.anchor?[0,0]:[15,18];if(this.mouseOffset){a[0]+=this.mouseOffset[0];a[1]+=this.mouseOffset[1]}return a},getAnchorPosition:function(){if(this.anchor){this.tipAnchor=this.anchor.charAt(0)}else{var a=this.defaultAlign.match(/^([a-z]+)-([a-z]+)(\?)?$/);if(!a){throw"AnchorTip.defaultAlign is invalid"}this.tipAnchor=a[1].charAt(0)}switch(this.tipAnchor){case"t":return"top";case"b":return"bottom";case"r":return"right"}return"left"},getAnchorAlign:function(){switch(this.anchor){case"top":return"tl-bl";case"left":return"tl-tr";case"right":return"tr-tl";default:return"bl-tl"}},getOffsets:function(){var b,a=this.getAnchorPosition().charAt(0);if(this.anchorToTarget&&!this.trackMouse){switch(a){case"t":b=[0,9];break;case"b":b=[0,-13];break;case"r":b=[-13,0];break;default:b=[9,0];break}}else{switch(a){case"t":b=[-15-this.anchorOffset,30];break;case"b":b=[-19-this.anchorOffset,-13-this.el.dom.offsetHeight];break;case"r":b=[-15-this.el.dom.offsetWidth,-13-this.anchorOffset];break;default:b=[25,-13-this.anchorOffset];break}}var c=this.getMouseOffset();b[0]+=c[0];b[1]+=c[1];return b},onTargetOver:function(b){if(this.disabled||b.within(this.target.dom,true)){return}var a=b.getTarget(this.delegate);if(a){this.triggerElement=a;this.clearTimer("hide");this.targetXY=b.getXY();this.delayShow()}},delayShow:function(){if(this.hidden&&!this.showTimer){if(this.lastActive.getElapsed()<this.quickShowInterval){this.show()}else{this.showTimer=this.show.defer(this.showDelay,this)}}else{if(!this.hidden&&this.autoHide!==false){this.show()}}},onTargetOut:function(a){if(this.disabled||a.within(this.target.dom,true)){return}this.clearTimer("show");if(this.autoHide!==false){this.delayHide()}},delayHide:function(){if(!this.hidden&&!this.hideTimer){this.hideTimer=this.hide.defer(this.hideDelay,this)}},hide:function(){this.clearTimer("dismiss");this.lastActive=new Date();if(this.anchorEl){this.anchorEl.hide()}Ext.ToolTip.superclass.hide.call(this);delete this.triggerElement},show:function(){if(this.anchor){this.showAt([-1000,-1000]);this.origConstrainPosition=this.constrainPosition;this.constrainPosition=false;this.anchor=this.origAnchor}this.showAt(this.getTargetXY());if(this.anchor){this.syncAnchor();this.anchorEl.show();this.constrainPosition=this.origConstrainPosition}else{this.anchorEl.hide()}},showAt:function(a){this.lastActive=new Date();this.clearTimers();Ext.ToolTip.superclass.showAt.call(this,a);if(this.dismissDelay&&this.autoHide!==false){this.dismissTimer=this.hide.defer(this.dismissDelay,this)}},syncAnchor:function(){var a,b,c;switch(this.tipAnchor.charAt(0)){case"t":a="b";b="tl";c=[20+this.anchorOffset,2];break;case"r":a="l";b="tr";c=[-2,11+this.anchorOffset];break;case"b":a="t";b="bl";c=[20+this.anchorOffset,-2];break;default:a="r";b="tl";c=[2,11+this.anchorOffset];break}this.anchorEl.alignTo(this.el,a+"-"+b,c)},setPagePosition:function(a,b){Ext.ToolTip.superclass.setPagePosition.call(this,a,b);if(this.anchor){this.syncAnchor()}},clearTimer:function(a){a=a+"Timer";clearTimeout(this[a]);delete this[a]},clearTimers:function(){this.clearTimer("show");this.clearTimer("dismiss");this.clearTimer("hide")},onShow:function(){Ext.ToolTip.superclass.onShow.call(this);Ext.getDoc().on("mousedown",this.onDocMouseDown,this)},onHide:function(){Ext.ToolTip.superclass.onHide.call(this);Ext.getDoc().un("mousedown",this.onDocMouseDown,this)},onDocMouseDown:function(a){if(this.autoHide!==true&&!this.closable&&!a.within(this.el.dom)){this.disable();this.enable.defer(100,this)}},onDisable:function(){this.clearTimers();this.hide()},adjustPosition:function(a,d){if(this.contstrainPosition){var c=this.targetXY[1],b=this.getSize().height;if(d<=c&&(d+b)>=c){d=c-b-5}}return{x:a,y:d}},onDestroy:function(){Ext.getDoc().un("mousedown",this.onDocMouseDown,this);Ext.ToolTip.superclass.onDestroy.call(this)}});Ext.QuickTip=Ext.extend(Ext.ToolTip,{interceptTitles:false,tagConfig:{namespace:"ext",attribute:"qtip",width:"qwidth",target:"target",title:"qtitle",hide:"hide",cls:"qclass",align:"qalign",anchor:"anchor"},initComponent:function(){this.target=this.target||Ext.getDoc();this.targets=this.targets||{};Ext.QuickTip.superclass.initComponent.call(this)},register:function(e){var g=Ext.isArray(e)?e:arguments;for(var f=0,a=g.length;f<a;f++){var k=g[f];var h=k.target;if(h){if(Ext.isArray(h)){for(var d=0,b=h.length;d<b;d++){this.targets[Ext.id(h[d])]=k}}else{this.targets[Ext.id(h)]=k}}}},unregister:function(a){delete this.targets[Ext.id(a)]},cancelShow:function(b){var a=this.activeTarget;b=Ext.get(b).dom;if(this.isVisible()){if(a&&a.el==b){this.hide()}}else{if(a&&a.el==b){this.clearTimer("show")}}},onTargetOver:function(h){if(this.disabled){return}this.targetXY=h.getXY();var c=h.getTarget();if(!c||c.nodeType!==1||c==document||c==document.body){return}if(this.activeTarget&&c==this.activeTarget.el){this.clearTimer("hide");this.show();return}if(c&&this.targets[c.id]){this.activeTarget=this.targets[c.id];this.activeTarget.el=c;this.anchor=this.activeTarget.anchor;if(this.anchor){this.anchorTarget=c}this.delayShow();return}var f,g=Ext.fly(c),b=this.tagConfig;var d=b.namespace;if(this.interceptTitles&&c.title){f=c.title;c.qtip=f;c.removeAttribute("title");h.preventDefault()}else{f=c.qtip||g.getAttribute(b.attribute,d)}if(f){var a=g.getAttribute(b.hide,d);this.activeTarget={el:c,text:f,width:g.getAttribute(b.width,d),autoHide:a!="user"&&a!=="false",title:g.getAttribute(b.title,d),cls:g.getAttribute(b.cls,d),align:g.getAttribute(b.align,d)};this.anchor=g.getAttribute(b.anchor,d);if(this.anchor){this.anchorTarget=c}this.delayShow()}},onTargetOut:function(a){this.clearTimer("show");if(this.autoHide!==false){this.delayHide()}},showAt:function(b){var a=this.activeTarget;if(a){if(!this.rendered){this.render(Ext.getBody());this.activeTarget=a}if(a.width){this.setWidth(a.width);this.body.setWidth(this.adjustBodyWidth(a.width-this.getFrameWidth()));this.measureWidth=false}else{this.measureWidth=true}this.setTitle(a.title||"");this.body.update(a.text);this.autoHide=a.autoHide;this.dismissDelay=a.dismissDelay||this.dismissDelay;if(this.lastCls){this.el.removeClass(this.lastCls);delete this.lastCls}if(a.cls){this.el.addClass(a.cls);this.lastCls=a.cls}if(this.anchor){this.constrainPosition=false}else{if(a.align){b=this.el.getAlignToXY(a.el,a.align);this.constrainPosition=false}else{this.constrainPosition=true}}}Ext.QuickTip.superclass.showAt.call(this,b)},hide:function(){delete this.activeTarget;Ext.QuickTip.superclass.hide.call(this)}});Ext.QuickTips=function(){var b,a=[];return{init:function(c){if(!b){if(!Ext.isReady){Ext.onReady(function(){Ext.QuickTips.init(c)});return}b=new Ext.QuickTip({elements:"header,body"});if(c!==false){b.render(Ext.getBody())}}},enable:function(){if(b){a.pop();if(a.length<1){b.enable()}}},disable:function(){if(b){b.disable()}a.push(1)},isEnabled:function(){return b!==undefined&&!b.disabled},getQuickTip:function(){return b},register:function(){b.register.apply(b,arguments)},unregister:function(){b.unregister.apply(b,arguments)},tips:function(){b.register.apply(b,arguments)}}}();

data/public/ext-3.0.0/pkgs/pkg-toolbars-debug.js

@@ -0,0 +1,1374 @@
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+/**
+ * @class Ext.layout.ToolbarLayout
+ * @extends Ext.layout.ContainerLayout
+ * Layout manager implicitly used by Ext.Toolbar.
+ */
+Ext.layout.ToolbarLayout = Ext.extend(Ext.layout.ContainerLayout, {
+    monitorResize : true,
+    triggerWidth : 18,
+    lastOverflow : false,
+
+    noItemsMenuText : '<div class="x-toolbar-no-items">(None)</div>',
+    // private
+    onLayout : function(ct, target){
+        if(!this.leftTr){
+            target.addClass('x-toolbar-layout-ct');
+            target.insertHtml('beforeEnd',
+                 '<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>');
+            this.leftTr = target.child('tr.x-toolbar-left-row', true);
+            this.rightTr = target.child('tr.x-toolbar-right-row', true);
+            this.extrasTr = target.child('tr.x-toolbar-extras-row', true);
+        }
+        var side = this.leftTr;
+        var pos = 0;
+
+        var items = ct.items.items;
+        for(var i = 0, len = items.length, c; i < len; i++, pos++) {
+            c = items[i];
+            if(c.isFill){
+                side = this.rightTr;
+                pos = -1;
+            }else if(!c.rendered){
+                c.render(this.insertCell(c, side, pos));
+            }else{
+                if(!c.xtbHidden && !this.isValidParent(c, side.childNodes[pos])){
+                    var td = this.insertCell(c, side, pos);
+                    td.appendChild(c.getDomPositionEl().dom);
+                    c.container = Ext.get(td);
+                }
+            }
+        }
+        //strip extra empty cells
+        this.cleanup(this.leftTr);
+        this.cleanup(this.rightTr);
+        this.cleanup(this.extrasTr);
+        this.fitToSize(target);
+    },
+
+    cleanup : function(row){
+        var cn = row.childNodes;
+        for(var i = cn.length-1, c; i >= 0 && (c = cn[i]); i--){
+            if(!c.firstChild){
+                row.removeChild(c);
+            }
+        }
+    },
+
+    insertCell : function(c, side, pos){
+        var td = document.createElement('td');
+        td.className='x-toolbar-cell';
+        side.insertBefore(td, side.childNodes[pos]||null);
+        return td;
+    },
+
+    hideItem : function(item){
+        var h = (this.hiddens = this.hiddens || []);
+        h.push(item);
+        item.xtbHidden = true;
+        item.xtbWidth = item.getDomPositionEl().dom.parentNode.offsetWidth;
+        item.hide();
+    },
+
+    unhideItem : function(item){
+        item.show();
+        item.xtbHidden = false;
+        this.hiddens.remove(item);
+        if(this.hiddens.length < 1){
+            delete this.hiddens;
+        }
+    },
+
+    getItemWidth : function(c){
+        return c.hidden ? (c.xtbWidth || 0) : c.getDomPositionEl().dom.parentNode.offsetWidth;
+    },
+
+    fitToSize : function(t){
+        if(this.container.enableOverflow === false){
+            return;
+        }
+        var w = t.dom.clientWidth;
+        var lw = this.lastWidth || 0;
+        this.lastWidth = w;
+        var iw = t.dom.firstChild.offsetWidth;
+
+        var clipWidth = w - this.triggerWidth;
+        var hideIndex = -1;
+
+        if(iw > w || (this.hiddens && w >= lw)){
+            var i, items = this.container.items.items, len = items.length, c;
+            var loopWidth = 0;
+            for(i = 0; i < len; i++) {
+                c = items[i];
+                if(!c.isFill){
+                    loopWidth += this.getItemWidth(c);
+                    if(loopWidth > clipWidth){
+                        if(!c.xtbHidden){
+                            this.hideItem(c);
+                        }
+                    }else{
+                        if(c.xtbHidden){
+                            this.unhideItem(c);
+                        }
+                    }
+                }
+            }
+        }
+        if(this.hiddens){
+            this.initMore();
+            if(!this.lastOverflow){
+                this.container.fireEvent('overflowchange', this.container, true);
+                this.lastOverflow = true;
+            }
+        }else if(this.more){
+            this.clearMenu();
+            this.more.destroy();
+            delete this.more;
+            if(this.lastOverflow){
+                this.container.fireEvent('overflowchange', this.container, false);
+                this.lastOverflow = false;
+            }
+        }
+    },
+
+    createMenuConfig : function(c, hideOnClick){
+        var cfg = Ext.apply({}, c.initialConfig),
+            group = c.toggleGroup;
+
+        Ext.apply(cfg, {
+            text: c.overflowText || c.text,
+            iconCls: c.iconCls,
+            icon: c.icon,
+            itemId: c.itemId,
+            disabled: c.disabled,
+            handler: c.handler,
+            scope: c.scope,
+            menu: c.menu,
+            hideOnClick: hideOnClick
+        });
+        if(group || c.enableToggle){
+            Ext.apply(cfg, {
+                group: group,
+                checked: c.pressed,
+                listeners: {
+                    checkchange: function(item, checked){
+                        c.toggle(checked);
+                    }
+                }
+            });
+        }
+        delete cfg.xtype;
+        delete cfg.id;
+        return cfg;
+    },
+
+    // private
+    addComponentToMenu : function(m, c){
+        if(c instanceof Ext.Toolbar.Separator){
+            m.add('-');
+        }else if(Ext.isFunction(c.isXType)){
+            if(c.isXType('splitbutton')){
+                m.add(this.createMenuConfig(c, true));
+            }else if(c.isXType('button')){
+                m.add(this.createMenuConfig(c, !c.menu));
+            }else if(c.isXType('buttongroup')){
+                c.items.each(function(item){
+                     this.addComponentToMenu(m, item);
+                }, this);
+            }
+        }
+    },
+
+    clearMenu : function(){
+        var m = this.moreMenu;
+        if(m && m.items){
+            this.moreMenu.items.each(function(item){
+                delete item.menu;
+            });
+        }
+    },
+
+    // private
+    beforeMoreShow : function(m){
+        var h = this.container.items.items,
+            len = h.length,
+            c,
+            prev,
+            needsSep = function(group, item){
+                return group.isXType('buttongroup') && !(item instanceof Ext.Toolbar.Separator);
+            };
+
+        this.clearMenu();
+        m.removeAll();
+        for(var i = 0; i < len; i++){
+            c = h[i];
+            if(c.xtbHidden){
+                if(prev && (needsSep(c, prev) || needsSep(prev, c))){
+                    m.add('-');
+                }
+                this.addComponentToMenu(m, c);
+                prev = c;
+            }
+        }
+        // put something so the menu isn't empty
+        // if no compatible items found
+        if(m.items.length < 1){
+            m.add(this.noItemsMenuText);
+        }
+    },
+
+    initMore : function(){
+        if(!this.more){
+            this.moreMenu = new Ext.menu.Menu({
+                listeners: {
+                    beforeshow: this.beforeMoreShow,
+                    scope: this
+                }
+            });
+            this.more = new Ext.Button({
+                iconCls: 'x-toolbar-more-icon',
+                cls: 'x-toolbar-more',
+                menu: this.moreMenu
+            });
+            var td = this.insertCell(this.more, this.extrasTr, 100);
+            this.more.render(td);
+        }
+    },
+
+    destroy : function(){
+        Ext.destroy(this.more, this.moreMenu);
+        Ext.layout.ToolbarLayout.superclass.destroy.call(this);
+    }
+    /**
+     * @property activeItem
+     * @hide
+     */
+});
+
+Ext.Container.LAYOUTS.toolbar = Ext.layout.ToolbarLayout;
+
+/**
+ * @class Ext.Toolbar
+ * @extends Ext.Container
+ * <p>Basic Toolbar class. Although the <tt>{@link Ext.Container#defaultType defaultType}</tt> for Toolbar
+ * is <tt>{@link Ext.Button button}</tt>, Toolbar elements (child items for the Toolbar container) may
+ * be virtually any type of Component. Toolbar elements can be created explicitly via their constructors,
+ * or implicitly via their xtypes, and can be <tt>{@link #add}</tt>ed dynamically.</p>
+ * <p>Some items have shortcut strings for creation:</p>
+ * <pre>
+<u>Shortcut</u>  <u>xtype</u>          <u>Class</u>                  <u>Description</u>
+'->'      'tbfill'       {@link Ext.Toolbar.Fill}       begin using the right-justified button container
+'-'       'tbseparator'  {@link Ext.Toolbar.Separator}  add a vertical separator bar between toolbar items
+' '       'tbspacer'     {@link Ext.Toolbar.Spacer}     add horiztonal space between elements
+ * </pre>
+ *
+ * Example usage of various elements:
+ * <pre><code>
+var tb = new Ext.Toolbar({
+    renderTo: document.body,
+    width: 600,
+    height: 100,
+    items: [
+        {
+            // xtype: 'button', // default for Toolbars, same as 'tbbutton'
+            text: 'Button'
+        },
+        {
+            xtype: 'splitbutton', // same as 'tbsplitbutton'
+            text: 'Split Button'
+        },
+        // begin using the right-justified button container
+        '->', // same as {xtype: 'tbfill'}, // Ext.Toolbar.Fill
+        {
+            xtype: 'textfield',
+            name: 'field1',
+            emptyText: 'enter search term'
+        },
+        // add a vertical separator bar between toolbar items
+        '-', // same as {xtype: 'tbseparator'} to create Ext.Toolbar.Separator
+        'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.Toolbar.TextItem
+        {xtype: 'tbspacer'},// same as ' ' to create Ext.Toolbar.Spacer
+        'text 2',
+        {xtype: 'tbspacer', width: 50}, // add a 50px space
+        'text 3'
+    ]
+});
+ * </code></pre>
+ * Example adding a ComboBox within a menu of a button:
+ * <pre><code>
+// ComboBox creation
+var combo = new Ext.form.ComboBox({
+    store: new Ext.data.ArrayStore({
+        autoDestroy: true,
+        fields: ['initials', 'fullname'],
+        data : [
+            ['FF', 'Fred Flintstone'],
+            ['BR', 'Barney Rubble']
+        ]
+    }),
+    displayField: 'fullname',
+    typeAhead: true,
+    mode: 'local',
+    forceSelection: true,
+    triggerAction: 'all',
+    emptyText: 'Select a name...',
+    selectOnFocus: true,
+    width: 135,
+    getListParent: function() {
+        return this.el.up('.x-menu');
+    },
+    iconCls: 'no-icon' //use iconCls if placing within menu to shift to right side of menu
+});
+
+// put ComboBox in a Menu
+var menu = new Ext.menu.Menu({
+    id: 'mainMenu',
+    items: [
+        combo // A Field in a Menu
+    ]
+});
+
+// add a Button with the menu
+tb.add({
+        text:'Button w/ Menu',
+        menu: menu  // assign menu by instance
+    });
+tb.doLayout();
+ * </code></pre>
+ * @constructor
+ * Creates a new Toolbar
+ * @param {Object/Array} config A config object or an array of buttons to <tt>{@link #add}</tt>
+ * @xtype toolbar
+ */
+Ext.Toolbar = function(config){
+    if(Ext.isArray(config)){
+        config = {items: config, layout: 'toolbar'};
+    } else {
+        config = Ext.apply({
+            layout: 'toolbar'
+        }, config);
+        if(config.buttons) {
+            config.items = config.buttons;
+        }
+    }
+    Ext.Toolbar.superclass.constructor.call(this, config);
+};
+
+(function(){
+
+var T = Ext.Toolbar;
+
+Ext.extend(T, Ext.Container, {
+
+    defaultType: 'button',
+
+    trackMenus : true,
+    internalDefaults: {removeMode: 'container', hideParent: true},
+    toolbarCls: 'x-toolbar',
+
+    initComponent : function(){
+        T.superclass.initComponent.call(this);
+
+        /**
+         * @event overflowchange
+         * Fires after the overflow state has changed.
+         * @param {Object} c The Container
+         * @param {Boolean} lastOverflow overflow state
+         */
+        this.addEvents('overflowchange');
+    },
+
+    // private
+    onRender : function(ct, position){
+        if(!this.el){
+            if(!this.autoCreate){
+                this.autoCreate = {
+                    cls: this.toolbarCls + ' x-small-editor'
+                };
+            }
+            this.el = ct.createChild(Ext.apply({ id: this.id },this.autoCreate), position);
+        }
+    },
+
+    /**
+     * 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 Ext.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 Ext.Toolbar.Item} (equivalent to {@link #addItem})</li>
+     * <li>String: Any generic string (gets wrapped in a {@link Ext.Toolbar.TextItem}, equivalent to {@link #addText}).
+     * Note that there are a few special strings that are treated differently as explained next.</li>
+     * <li>'-': 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.
+     * @method add
+     */
+
+    // private
+    lookupComponent : function(c){
+        if(Ext.isString(c)){
+            if(c == '-'){
+                c = new T.Separator();
+            }else if(c == ' '){
+                c = new T.Spacer();
+            }else if(c == '->'){
+                c = new T.Fill();
+            }else{
+                c = new T.TextItem(c);
+            }
+            this.applyDefaults(c);
+        }else{
+            if(c.isFormField || c.render){ // some kind of form field, some kind of Toolbar.Item
+                c = this.constructItem(c);
+            }else if(c.tag){ // DomHelper spec
+                c = new T.Item({autoEl: c});
+            }else if(c.tagName){ // element
+                c = new T.Item({el:c});
+            }else if(Ext.isObject(c)){ // must be button config?
+                c = c.xtype ? this.constructItem(c) : this.constructButton(c);
+            }
+        }
+        return c;
+    },
+
+    // private
+    applyDefaults : function(c){
+        if(!Ext.isString(c)){
+            c = Ext.Toolbar.superclass.applyDefaults.call(this, c);
+            var d = this.internalDefaults;
+            if(c.events){
+                Ext.applyIf(c.initialConfig, d);
+                Ext.apply(c, d);
+            }else{
+                Ext.applyIf(c, d);
+            }
+        }
+        return c;
+    },
+
+    // private
+    constructItem : function(item, type){
+        return Ext.create(item, type || this.defaultType);
+    },
+
+    /**
+     * Adds a separator
+     * @return {Ext.Toolbar.Item} The separator {@link Ext.Toolbar.Item item}
+     */
+    addSeparator : function(){
+        return this.add(new T.Separator());
+    },
+
+    /**
+     * Adds a spacer element
+     * @return {Ext.Toolbar.Spacer} The spacer item
+     */
+    addSpacer : function(){
+        return this.add(new T.Spacer());
+    },
+
+    /**
+     * Forces subsequent additions into the float:right toolbar
+     */
+    addFill : function(){
+        this.add(new T.Fill());
+    },
+
+    /**
+     * Adds any standard HTML element to the toolbar
+     * @param {Mixed} 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 T.Item({el:el}));
+    },
+
+    /**
+     * Adds any Toolbar.Item or subclass
+     * @param {Ext.Toolbar.Item} item
+     * @return {Ext.Toolbar.Item} The item
+     */
+    addItem : function(item){
+        return Ext.Toolbar.superclass.add.apply(this, arguments);
+    },
+
+    /**
+     * Adds a button (or buttons). See {@link Ext.Button} for more info on the config.
+     * @param {Object/Array} config A button config or array of configs
+     * @return {Ext.Button/Array}
+     */
+    addButton : function(config){
+        if(Ext.isArray(config)){
+            var buttons = [];
+            for(var i = 0, len = config.length; i < len; i++) {
+                buttons.push(this.addButton(config[i]));
+            }
+            return buttons;
+        }
+        return this.add(this.constructButton(config));
+    },
+
+    /**
+     * 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 T.TextItem(text));
+    },
+
+    /**
+     * Adds a new element to the toolbar from the passed {@link Ext.DomHelper} config
+     * @param {Object} config
+     * @return {Ext.Toolbar.Item} The element's item
+     */
+    addDom : function(config){
+        return this.add(new T.Item({autoEl: config}));
+    },
+
+    /**
+     * Adds a dynamically rendered Ext.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 {Ext.form.Field} field
+     * @return {Ext.Toolbar.Item}
+     */
+    addField : function(field){
+        return this.add(field);
+    },
+
+    /**
+     * Inserts any {@link Ext.Toolbar.Item}/{@link Ext.Button} at the specified index.
+     * @param {Number} index The index where the item is to be inserted
+     * @param {Object/Ext.Toolbar.Item/Ext.Button/Array} item The button, or button config object to be
+     * inserted, or an array of buttons/configs.
+     * @return {Ext.Button/Item}
+     */
+    insertButton : function(index, item){
+        if(Ext.isArray(item)){
+            var buttons = [];
+            for(var i = 0, len = item.length; i < len; i++) {
+               buttons.push(this.insertButton(index + i, item[i]));
+            }
+            return buttons;
+        }
+        return Ext.Toolbar.superclass.insert.call(this, index, item);
+    },
+
+    // private
+    initMenuTracking : function(item){
+        if(this.trackMenus && item.menu){
+            this.mon(item, {
+                'menutriggerover' : this.onButtonTriggerOver,
+                'menushow' : this.onButtonMenuShow,
+                'menuhide' : this.onButtonMenuHide,
+                scope: this
+            });
+        }
+    },
+
+    // private
+    constructButton : function(item){
+        var b = item.events ? item : this.constructItem(item, item.split ? 'splitbutton' : this.defaultType);
+        this.initMenuTracking(b);
+        return b;
+    },
+
+    // private
+    onDisable : function(){
+        this.items.each(function(item){
+             if(item.disable){
+                 item.disable();
+             }
+        });
+    },
+
+    // private
+    onEnable : function(){
+        this.items.each(function(item){
+             if(item.enable){
+                 item.enable();
+             }
+        });
+    },
+
+    // private
+    onButtonTriggerOver : function(btn){
+        if(this.activeMenuBtn && this.activeMenuBtn != btn){
+            this.activeMenuBtn.hideMenu();
+            btn.showMenu();
+            this.activeMenuBtn = btn;
+        }
+    },
+
+    // private
+    onButtonMenuShow : function(btn){
+        this.activeMenuBtn = btn;
+    },
+
+    // private
+    onButtonMenuHide : function(btn){
+        delete this.activeMenuBtn;
+    }
+});
+Ext.reg('toolbar', Ext.Toolbar);
+
+/**
+ * @class Ext.Toolbar.Item
+ * @extends Ext.BoxComponent
+ * The base class that other non-interacting Toolbar Item classes should extend in order to
+ * get some basic common toolbar item functionality.
+ * @constructor
+ * Creates a new Item
+ * @param {HTMLElement} el
+ * @xtype tbitem
+ */
+T.Item = Ext.extend(Ext.BoxComponent, {
+    hideParent: true, //  Hiding a Toolbar.Item hides its containing TD
+    enable:Ext.emptyFn,
+    disable:Ext.emptyFn,
+    focus:Ext.emptyFn
+    /**
+     * @cfg {String} overflowText Text to be used for the menu if the item is overflowed.
+     */
+});
+Ext.reg('tbitem', T.Item);
+
+/**
+ * @class Ext.Toolbar.Separator
+ * @extends Ext.Toolbar.Item
+ * A simple class that adds a vertical separator bar between toolbar items
+ * (css class:<tt>'xtb-sep'</tt>). Example usage:
+ * <pre><code>
+new Ext.Panel({
+    tbar : [
+        'Item 1',
+        {xtype: 'tbseparator'}, // or '-'
+        'Item 2'
+    ]
+});
+</code></pre>
+ * @constructor
+ * Creates a new Separator
+ * @xtype tbseparator
+ */
+T.Separator = Ext.extend(T.Item, {
+    onRender : function(ct, position){
+        this.el = ct.createChild({tag:'span', cls:'xtb-sep'}, position);
+    }
+});
+Ext.reg('tbseparator', T.Separator);
+
+/**
+ * @class Ext.Toolbar.Spacer
+ * @extends Ext.Toolbar.Item
+ * A simple element that adds extra horizontal space between items in a toolbar.
+ * By default a 2px wide space is added via css specification:<pre><code>
+.x-toolbar .xtb-spacer {
+    width:2px;
+}
+ * </code></pre>
+ * <p>Example usage:</p>
+ * <pre><code>
+new Ext.Panel({
+    tbar : [
+        'Item 1',
+        {xtype: 'tbspacer'}, // or ' '
+        'Item 2',
+        // space width is also configurable via javascript
+        {xtype: 'tbspacer', width: 50}, // add a 50px space
+        'Item 3'
+    ]
+});
+</code></pre>
+ * @constructor
+ * Creates a new Spacer
+ * @xtype tbspacer
+ */
+T.Spacer = Ext.extend(T.Item, {
+    /**
+     * @cfg {Number} width
+     * The width of the spacer in pixels (defaults to 2px via css style <tt>.x-toolbar .xtb-spacer</tt>).
+     */
+
+    onRender : function(ct, position){
+        this.el = ct.createChild({tag:'div', cls:'xtb-spacer', style: this.width?'width:'+this.width+'px':''}, position);
+    }
+});
+Ext.reg('tbspacer', T.Spacer);
+
+/**
+ * @class Ext.Toolbar.Fill
+ * @extends Ext.Toolbar.Spacer
+ * A non-rendering placeholder item which instructs the Toolbar's Layout to begin using
+ * the right-justified button container.
+ * <pre><code>
+new Ext.Panel({
+    tbar : [
+        'Item 1',
+        {xtype: 'tbfill'}, // or '->'
+        'Item 2'
+    ]
+});
+</code></pre>
+ * @constructor
+ * Creates a new Fill
+ * @xtype tbfill
+ */
+T.Fill = Ext.extend(T.Item, {
+    // private
+    render : Ext.emptyFn,
+    isFill : true
+});
+Ext.reg('tbfill', T.Fill);
+
+/**
+ * @class Ext.Toolbar.TextItem
+ * @extends Ext.Toolbar.Item
+ * A simple class that renders text directly into a toolbar
+ * (with css class:<tt>'xtb-text'</tt>). Example usage:
+ * <pre><code>
+new Ext.Panel({
+    tbar : [
+        {xtype: 'tbtext', text: 'Item 1'} // or simply 'Item 1'
+    ]
+});
+</code></pre>
+ * @constructor
+ * Creates a new TextItem
+ * @param {String/Object} text A text string, or a config object containing a <tt>text</tt> property
+ * @xtype tbtext
+ */
+T.TextItem = Ext.extend(T.Item, {
+    constructor: function(config){
+        if (Ext.isString(config)) {
+            config = { autoEl: {cls: 'xtb-text', html: config }};
+        } else {
+            config.autoEl = {cls: 'xtb-text', html: config.text || ''};
+        }
+        T.TextItem.superclass.constructor.call(this, config);
+    },
+    /**
+     * Updates this item's text, setting the text to be used as innerHTML.
+     * @param {String} t The text to display (html accepted).
+     */
+    setText : function(t) {
+        if (this.rendered) {
+            this.el.dom.innerHTML = t;
+        } else {
+            this.autoEl.html = t;
+        }
+    }
+});
+Ext.reg('tbtext', T.TextItem);
+
+// backwards compat
+T.Button = Ext.extend(Ext.Button, {});
+T.SplitButton = Ext.extend(Ext.SplitButton, {});
+Ext.reg('tbbutton', T.Button);
+Ext.reg('tbsplit', T.SplitButton);
+
+})();
+/**
+ * @class Ext.ButtonGroup
+ * @extends Ext.Panel
+ * Container for a group of buttons. Example usage:
+ * <pre><code>
+var p = new Ext.Panel({
+    title: 'Panel with Button Group',
+    width: 300,
+    height:200,
+    renderTo: document.body,
+    html: 'whatever',
+    tbar: [{
+        xtype: 'buttongroup',
+        {@link #columns}: 3,
+        title: 'Clipboard',
+        items: [{
+            text: 'Paste',
+            scale: 'large',
+            rowspan: 3, iconCls: 'add',
+            iconAlign: 'top',
+            cls: 'x-btn-as-arrow'
+        },{
+            xtype:'splitbutton',
+            text: 'Menu Button',
+            scale: 'large',
+            rowspan: 3,
+            iconCls: 'add',
+            iconAlign: 'top',
+            arrowAlign:'bottom',
+            menu: [{text: 'Menu Item 1'}]
+        },{
+            xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
+        },{
+            text: 'Copy', iconCls: 'add16'
+        },{
+            text: 'Format', iconCls: 'add16'
+        }]
+    }]
+});
+ * </code></pre>
+ * @xtype buttongroup
+ */
+Ext.ButtonGroup = Ext.extend(Ext.Panel, {
+    /**
+     * @cfg {Number} columns The <tt>columns</tt> configuration property passed to the
+     * {@link #layout configured layout manager}. See {@link Ext.layout.TableLayout#columns}.
+     */
+    /**
+     * @cfg {String} baseCls  Defaults to <tt>'x-btn-group'</tt>.  See {@link Ext.Panel#baseCls}.
+     */
+    baseCls: 'x-btn-group',
+    /**
+     * @cfg {String} layout  Defaults to <tt>'table'</tt>.  See {@link Ext.Container#layout}.
+     */
+    layout:'table',
+    defaultType: 'button',
+    /**
+     * @cfg {Boolean} frame  Defaults to <tt>true</tt>.  See {@link Ext.Panel#frame}.
+     */
+    frame: true,
+    internalDefaults: {removeMode: 'container', hideParent: true},
+
+    initComponent : function(){
+        this.layoutConfig = this.layoutConfig || {};
+        Ext.applyIf(this.layoutConfig, {
+            columns : this.columns
+        });
+        if(!this.title){
+            this.addClass('x-btn-group-notitle');
+        }
+        this.on('afterlayout', this.onAfterLayout, this);
+        Ext.ButtonGroup.superclass.initComponent.call(this);
+    },
+
+    applyDefaults : function(c){
+        c = Ext.ButtonGroup.superclass.applyDefaults.call(this, c);
+        var d = this.internalDefaults;
+        if(c.events){
+            Ext.applyIf(c.initialConfig, d);
+            Ext.apply(c, d);
+        }else{
+            Ext.applyIf(c, d);
+        }
+        return c;
+    },
+
+    onAfterLayout : function(){
+        var bodyWidth = this.body.getFrameWidth('lr') + this.body.dom.firstChild.offsetWidth;
+        this.body.setWidth(bodyWidth);
+        this.el.setWidth(bodyWidth + this.getFrameWidth());
+    }
+    /**
+     * @cfg {Array} tools  @hide
+     */
+});
+
+Ext.reg('buttongroup', Ext.ButtonGroup);
+/**
+ * @class Ext.PagingToolbar
+ * @extends Ext.Toolbar
+ * <p>As the amount of records increases, the time required for the browser to render
+ * them increases. Paging is used to reduce the amount of data exchanged with the client.
+ * Note: if there are more records/rows than can be viewed in the available screen area, vertical
+ * scrollbars will be added.</p>
+ * <p>Paging is typically handled on the server side (see exception below). The client sends
+ * parameters to the server side, which the server needs to interpret and then respond with the
+ * approprate data.</p>
+ * <p><b>Ext.PagingToolbar</b> is a specialized toolbar that is bound to a {@link Ext.data.Store}
+ * and provides automatic paging control. This Component {@link Ext.data.Store#load load}s blocks
+ * of data into the <tt>{@link #store}</tt> by passing {@link Ext.data.Store#paramNames paramNames} used for
+ * paging criteria.</p>
+ * <p>PagingToolbar is typically used as one of the Grid's toolbars:</p>
+ * <pre><code>
+Ext.QuickTips.init(); // to display button quicktips
+
+var myStore = new Ext.data.Store({
+    ...
+});
+
+var myPageSize = 25;  // server script should only send back 25 items
+
+var grid = new Ext.grid.GridPanel({
+    ...
+    store: myStore,
+    bbar: new Ext.PagingToolbar({
+        {@link #store}: myStore,       // grid and PagingToolbar using same store
+        {@link #displayInfo}: true,
+        {@link #pageSize}: myPageSize,
+        {@link #prependButtons}: true,
+        items: [
+            'text 1'
+        ]
+    })
+});
+ * </code></pre>
+ *
+ * <p>To use paging, pass the paging requirements to the server when the store is first loaded.</p>
+ * <pre><code>
+store.load({
+    params: {
+        start: 0,          // specify params for the first page load if using paging
+        limit: myPageSize,
+        foo:   'bar'
+    }
+});
+ * </code></pre>
+ * <p><u>Paging with Local Data</u></p>
+ * <p>Paging can also be accomplished with local data using extensions:</p>
+ * <div class="mdetail-params"><ul>
+ * <li><a href="http://extjs.com/forum/showthread.php?t=57386">Ext.ux.data.PagingStore</a></li>
+ * <li>Paging Memory Proxy (examples/ux/PagingMemoryProxy.js)</li>
+ * </ul></div>
+ * @constructor
+ * Create a new PagingToolbar
+ * @param {Object} config The config object
+ * @xtype paging
+ */
+(function() {
+
+var T = Ext.Toolbar;
+
+Ext.PagingToolbar = Ext.extend(Ext.Toolbar, {
+    /**
+     * @cfg {Ext.data.Store} store
+     * The {@link Ext.data.Store} the paging toolbar should use as its data source (required).
+     */
+    /**
+     * @cfg {Boolean} displayInfo
+     * <tt>true</tt> to display the displayMsg (defaults to <tt>false</tt>)
+     */
+    /**
+     * @cfg {Number} pageSize
+     * The number of records to display per page (defaults to <tt>20</tt>)
+     */
+    pageSize : 20,
+    /**
+     * @cfg {Boolean} prependButtons
+     * <tt>true</tt> to insert any configured <tt>items</tt> <i>before</i> the paging buttons.
+     * Defaults to <tt>false</tt>.
+     */
+    /**
+     * @cfg {String} displayMsg
+     * The paging status message to display (defaults to <tt>'Displaying {0} - {1} of {2}'</tt>).
+     * Note that this string is formatted using the braced numbers <tt>{0}-{2}</tt> as tokens
+     * that are replaced by the values for start, end and total respectively. These tokens should
+     * be preserved when overriding this string if showing those values is desired.
+     */
+    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',
+    /**
+     * @cfg {String} beforePageText
+     * The text displayed before the input item (defaults to <tt>'Page'</tt>).
+     */
+    beforePageText : 'Page',
+    /**
+     * @cfg {String} afterPageText
+     * Customizable piece of the default paging text (defaults to <tt>'of {0}'</tt>). Note that
+     * this string is formatted using <tt>{0}</tt> as a token that is replaced by the number of
+     * total pages. This token should be preserved when overriding this string if showing the
+     * total page count is desired.
+     */
+    afterPageText : 'of {0}',
+    /**
+     * @cfg {String} firstText
+     * The quicktip text displayed for the first page button (defaults to <tt>'First Page'</tt>).
+     * <b>Note</b>: quick tips must be initialized for the quicktip to show.
+     */
+    firstText : 'First Page',
+    /**
+     * @cfg {String} prevText
+     * The quicktip text displayed for the previous page button (defaults to <tt>'Previous Page'</tt>).
+     * <b>Note</b>: quick tips must be initialized for the quicktip to show.
+     */
+    prevText : 'Previous Page',
+    /**
+     * @cfg {String} nextText
+     * The quicktip text displayed for the next page button (defaults to <tt>'Next Page'</tt>).
+     * <b>Note</b>: quick tips must be initialized for the quicktip to show.
+     */
+    nextText : 'Next Page',
+    /**
+     * @cfg {String} lastText
+     * The quicktip text displayed for the last page button (defaults to <tt>'Last Page'</tt>).
+     * <b>Note</b>: quick tips must be initialized for the quicktip to show.
+     */
+    lastText : 'Last Page',
+    /**
+     * @cfg {String} refreshText
+     * The quicktip text displayed for the Refresh button (defaults to <tt>'Refresh'</tt>).
+     * <b>Note</b>: quick tips must be initialized for the quicktip to show.
+     */
+    refreshText : 'Refresh',
+
+    /**
+     * @deprecated
+     * <b>The defaults for these should be set in the data store.</b>
+     * Object mapping of parameter names used for load calls, initially set to:
+     * <pre>{start: 'start', limit: 'limit'}</pre>
+     */
+
+    /**
+     * The number of records to display per page.  See also <tt>{@link #cursor}</tt>.
+     * @type Number
+     * @property pageSize
+     */
+
+    /**
+     * Indicator for the record position.  This property might be used to get the active page
+     * number for example:<pre><code>
+     * // t is reference to the paging toolbar instance
+     * var activePage = Math.ceil((t.cursor + t.pageSize) / t.pageSize);
+     * </code></pre>
+     * @type Number
+     * @property cursor
+     */
+
+    initComponent : function(){
+        var pagingItems = [this.first = new T.Button({
+            tooltip: this.firstText,
+            overflowText: this.firstText,
+            iconCls: 'x-tbar-page-first',
+            disabled: true,
+            handler: this.moveFirst,
+            scope: this
+        }), this.prev = new T.Button({
+            tooltip: this.prevText,
+            overflowText: this.prevText,
+            iconCls: 'x-tbar-page-prev',
+            disabled: true,
+            handler: this.movePrevious,
+            scope: this
+        }), '-', this.beforePageText,
+        this.inputItem = new Ext.form.NumberField({
+            cls: 'x-tbar-page-number',
+            allowDecimals: false,
+            allowNegative: false,
+            enableKeyEvents: true,
+            selectOnFocus: true,
+            listeners: {
+                scope: this,
+                keydown: this.onPagingKeyDown,
+                blur: this.onPagingBlur
+            }
+        }), this.afterTextItem = new T.TextItem({
+            text: String.format(this.afterPageText, 1)
+        }), '-', this.next = new T.Button({
+            tooltip: this.nextText,
+            overflowText: this.nextText,
+            iconCls: 'x-tbar-page-next',
+            disabled: true,
+            handler: this.moveNext,
+            scope: this
+        }), this.last = new T.Button({
+            tooltip: this.lastText,
+            overflowText: this.lastText,
+            iconCls: 'x-tbar-page-last',
+            disabled: true,
+            handler: this.moveLast,
+            scope: this
+        }), '-', this.refresh = new T.Button({
+            tooltip: this.refreshText,
+            overflowText: this.refreshText,
+            iconCls: 'x-tbar-loading',
+            handler: this.refresh,
+            scope: this
+        })];
+
+
+        var userItems = this.items || this.buttons || [];
+        if (this.prependButtons) {
+            this.items = userItems.concat(pagingItems);
+        }else{
+            this.items = pagingItems.concat(userItems);
+        }
+        delete this.buttons;
+        if(this.displayInfo){
+            this.items.push('->');
+            this.items.push(this.displayItem = new T.TextItem({}));
+        }
+        Ext.PagingToolbar.superclass.initComponent.call(this);
+        this.addEvents(
+            /**
+             * @event change
+             * Fires after the active page has been changed.
+             * @param {Ext.PagingToolbar} this
+             * @param {Object} pageData An object that has these properties:<ul>
+             * <li><code>total</code> : Number <div class="sub-desc">The total number of records in the dataset as
+             * returned by the server</div></li>
+             * <li><code>activePage</code> : Number <div class="sub-desc">The current page number</div></li>
+             * <li><code>pages</code> : Number <div class="sub-desc">The total number of pages (calculated from
+             * the total number of records in the dataset as returned by the server and the current {@link #pageSize})</div></li>
+             * </ul>
+             */
+            'change',
+            /**
+             * @event beforechange
+             * Fires just before the active page is changed.
+             * Return false to prevent the active page from being changed.
+             * @param {Ext.PagingToolbar} this
+             * @param {Object} params An object hash of the parameters which the PagingToolbar will send when
+             * loading the required page. This will contain:<ul>
+             * <li><code>start</code> : Number <div class="sub-desc">The starting row number for the next page of records to
+             * be retrieved from the server</div></li>
+             * <li><code>limit</code> : Number <div class="sub-desc">The number of records to be retrieved from the server</div></li>
+             * </ul>
+             * <p>(note: the names of the <b>start</b> and <b>limit</b> properties are determined
+             * by the store's {@link Ext.data.Store#paramNames paramNames} property.)</p>
+             * <p>Parameters may be added as required in the event handler.</p>
+             */
+            'beforechange'
+        );
+        this.on('afterlayout', this.onFirstLayout, this, {single: true});
+        this.cursor = 0;
+        this.bindStore(this.store);
+    },
+
+    // private
+    onFirstLayout : function(){
+        if(this.dsLoaded){
+            this.onLoad.apply(this, this.dsLoaded);
+        }
+    },
+
+    // private
+    updateInfo : function(){
+        if(this.displayItem){
+            var count = this.store.getCount();
+            var msg = count == 0 ?
+                this.emptyMsg :
+                String.format(
+                    this.displayMsg,
+                    this.cursor+1, this.cursor+count, this.store.getTotalCount()
+                );
+            this.displayItem.setText(msg);
+        }
+    },
+
+    // private
+    onLoad : function(store, r, o){
+        if(!this.rendered){
+            this.dsLoaded = [store, r, o];
+            return;
+        }
+        var p = this.getParams();
+        this.cursor = (o.params && o.params[p.start]) ? o.params[p.start] : 0;
+        var d = this.getPageData(), ap = d.activePage, ps = d.pages;
+
+        this.afterTextItem.setText(String.format(this.afterPageText, d.pages));
+        this.inputItem.setValue(ap);
+        this.first.setDisabled(ap == 1);
+        this.prev.setDisabled(ap == 1);
+        this.next.setDisabled(ap == ps);
+        this.last.setDisabled(ap == ps);
+        this.refresh.enable();
+        this.updateInfo();
+        this.fireEvent('change', this, d);
+    },
+
+    // private
+    getPageData : function(){
+        var total = this.store.getTotalCount();
+        return {
+            total : total,
+            activePage : Math.ceil((this.cursor+this.pageSize)/this.pageSize),
+            pages :  total < this.pageSize ? 1 : Math.ceil(total/this.pageSize)
+        };
+    },
+
+    /**
+     * Change the active page
+     * @param {Integer} page The page to display
+     */
+    changePage : function(page){
+        this.doLoad(((page-1) * this.pageSize).constrain(0, this.store.getTotalCount()));
+    },
+
+    // private
+    onLoadError : function(){
+        if(!this.rendered){
+            return;
+        }
+        this.refresh.enable();
+    },
+
+    // private
+    readPage : function(d){
+        var v = this.inputItem.getValue(), pageNum;
+        if (!v || isNaN(pageNum = parseInt(v, 10))) {
+            this.inputItem.setValue(d.activePage);
+            return false;
+        }
+        return pageNum;
+    },
+
+    onPagingFocus : function(){
+        this.inputItem.select();
+    },
+
+    //private
+    onPagingBlur : function(e){
+        this.inputItem.setValue(this.getPageData().activePage);
+    },
+
+    // private
+    onPagingKeyDown : function(field, e){
+        var k = e.getKey(), d = this.getPageData(), pageNum;
+        if (k == e.RETURN) {
+            e.stopEvent();
+            pageNum = this.readPage(d);
+            if(pageNum !== false){
+                pageNum = Math.min(Math.max(1, pageNum), d.pages) - 1;
+                this.doLoad(pageNum * this.pageSize);
+            }
+        }else if (k == e.HOME || k == e.END){
+            e.stopEvent();
+            pageNum = k == e.HOME ? 1 : d.pages;
+            field.setValue(pageNum);
+        }else if (k == e.UP || k == e.PAGEUP || k == e.DOWN || k == e.PAGEDOWN){
+            e.stopEvent();
+            if((pageNum = this.readPage(d))){
+                var increment = e.shiftKey ? 10 : 1;
+                if(k == e.DOWN || k == e.PAGEDOWN){
+                    increment *= -1;
+                }
+                pageNum += increment;
+                if(pageNum >= 1 & pageNum <= d.pages){
+                    field.setValue(pageNum);
+                }
+            }
+        }
+    },
+
+    // private
+    getParams : function(){
+        //retain backwards compat, allow params on the toolbar itself, if they exist.
+        return this.paramNames || this.store.paramNames;
+    },
+
+    // private
+    beforeLoad : function(){
+        if(this.rendered && this.refresh){
+            this.refresh.disable();
+        }
+    },
+
+    // private
+    doLoad : function(start){
+        var o = {}, pn = this.getParams();
+        o[pn.start] = start;
+        o[pn.limit] = this.pageSize;
+        if(this.fireEvent('beforechange', this, o) !== false){
+            this.store.load({params:o});
+        }
+    },
+
+    /**
+     * Move to the first page, has the same effect as clicking the 'first' button.
+     */
+    moveFirst : function(){
+        this.doLoad(0);
+    },
+
+    /**
+     * Move to the previous page, has the same effect as clicking the 'previous' button.
+     */
+    movePrevious : function(){
+        this.doLoad(Math.max(0, this.cursor-this.pageSize));
+    },
+
+    /**
+     * Move to the next page, has the same effect as clicking the 'next' button.
+     */
+    moveNext : function(){
+        this.doLoad(this.cursor+this.pageSize);
+    },
+
+    /**
+     * Move to the last page, has the same effect as clicking the 'last' button.
+     */
+    moveLast : function(){
+        var total = this.store.getTotalCount(),
+            extra = total % this.pageSize;
+
+        this.doLoad(extra ? (total - extra) : total - this.pageSize);
+    },
+
+    /**
+     * Refresh the current page, has the same effect as clicking the 'refresh' button.
+     */
+    refresh : function(){
+        this.doLoad(this.cursor);
+    },
+
+    /**
+     * Binds the paging toolbar to the specified {@link Ext.data.Store}
+     * @param {Store} store The store to bind to this toolbar
+     * @param {Boolean} initial (Optional) true to not remove listeners
+     */
+    bindStore : function(store, initial){
+        var doLoad;
+        if(!initial && this.store){
+            this.store.un('beforeload', this.beforeLoad, this);
+            this.store.un('load', this.onLoad, this);
+            this.store.un('exception', this.onLoadError, this);
+            if(store !== this.store && this.store.autoDestroy){
+                this.store.destroy();
+            }
+        }
+        if(store){
+            store = Ext.StoreMgr.lookup(store);
+            store.on({
+                scope: this,
+                beforeload: this.beforeLoad,
+                load: this.onLoad,
+                exception: this.onLoadError
+            });
+            doLoad = store.getCount() > 0;
+        }
+        this.store = store;
+        if(doLoad){
+            this.onLoad(store, null, {});
+        }
+    },
+
+    /**
+     * Unbinds the paging toolbar from the specified {@link Ext.data.Store} <b>(deprecated)</b>
+     * @param {Ext.data.Store} store The data store to unbind
+     */
+    unbind : function(store){
+        this.bindStore(null);
+    },
+
+    /**
+     * Binds the paging toolbar to the specified {@link Ext.data.Store} <b>(deprecated)</b>
+     * @param {Ext.data.Store} store The data store to bind
+     */
+    bind : function(store){
+        this.bindStore(store);
+    },
+
+    // private
+    onDestroy : function(){
+        this.bindStore(null);
+        Ext.PagingToolbar.superclass.onDestroy.call(this);
+    }
+});
+
+})();
+Ext.reg('paging', Ext.PagingToolbar);