3 * Copyright(c) 2006-2009 Ext JS, LLC
5 * http://www.extjs.com/license
8 * @class Ext.layout.ToolbarLayout
\r
9 * @extends Ext.layout.ContainerLayout
\r
10 * Layout manager implicitly used by Ext.Toolbar.
\r
12 Ext.layout.ToolbarLayout = Ext.extend(Ext.layout.ContainerLayout, {
\r
13 monitorResize : true,
\r
15 lastOverflow : false,
\r
17 noItemsMenuText : '<div class="x-toolbar-no-items">(None)</div>',
\r
19 onLayout : function(ct, target){
\r
21 target.addClass('x-toolbar-layout-ct');
\r
22 target.insertHtml('beforeEnd',
\r
23 '<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>');
\r
24 this.leftTr = target.child('tr.x-toolbar-left-row', true);
\r
25 this.rightTr = target.child('tr.x-toolbar-right-row', true);
\r
26 this.extrasTr = target.child('tr.x-toolbar-extras-row', true);
\r
28 var side = this.leftTr;
\r
31 var items = ct.items.items;
\r
32 for(var i = 0, len = items.length, c; i < len; i++, pos++) {
\r
35 side = this.rightTr;
\r
37 }else if(!c.rendered){
\r
38 c.render(this.insertCell(c, side, pos));
\r
40 if(!c.xtbHidden && !this.isValidParent(c, side.childNodes[pos])){
\r
41 var td = this.insertCell(c, side, pos);
\r
42 td.appendChild(c.getDomPositionEl().dom);
\r
43 c.container = Ext.get(td);
\r
47 //strip extra empty cells
\r
48 this.cleanup(this.leftTr);
\r
49 this.cleanup(this.rightTr);
\r
50 this.cleanup(this.extrasTr);
\r
51 this.fitToSize(target);
\r
54 cleanup : function(row){
\r
55 var cn = row.childNodes;
\r
56 for(var i = cn.length-1, c; i >= 0 && (c = cn[i]); i--){
\r
63 insertCell : function(c, side, pos){
\r
64 var td = document.createElement('td');
\r
65 td.className='x-toolbar-cell';
\r
66 side.insertBefore(td, side.childNodes[pos]||null);
\r
70 hideItem : function(item){
\r
71 var h = (this.hiddens = this.hiddens || []);
\r
73 item.xtbHidden = true;
\r
74 item.xtbWidth = item.getDomPositionEl().dom.parentNode.offsetWidth;
\r
78 unhideItem : function(item){
\r
80 item.xtbHidden = false;
\r
81 this.hiddens.remove(item);
\r
82 if(this.hiddens.length < 1){
\r
83 delete this.hiddens;
\r
87 getItemWidth : function(c){
\r
88 return c.hidden ? (c.xtbWidth || 0) : c.getDomPositionEl().dom.parentNode.offsetWidth;
\r
91 fitToSize : function(t){
\r
92 if(this.container.enableOverflow === false){
\r
95 var w = t.dom.clientWidth;
\r
96 var lw = this.lastWidth || 0;
\r
98 var iw = t.dom.firstChild.offsetWidth;
\r
100 var clipWidth = w - this.triggerWidth;
\r
101 var hideIndex = -1;
\r
103 if(iw > w || (this.hiddens && w >= lw)){
\r
104 var i, items = this.container.items.items, len = items.length, c;
\r
106 for(i = 0; i < len; i++) {
\r
109 loopWidth += this.getItemWidth(c);
\r
110 if(loopWidth > clipWidth){
\r
116 this.unhideItem(c);
\r
124 if(!this.lastOverflow){
\r
125 this.container.fireEvent('overflowchange', this.container, true);
\r
126 this.lastOverflow = true;
\r
128 }else if(this.more){
\r
130 this.more.destroy();
\r
132 if(this.lastOverflow){
\r
133 this.container.fireEvent('overflowchange', this.container, false);
\r
134 this.lastOverflow = false;
\r
139 createMenuConfig : function(c, hideOnClick){
\r
140 var cfg = Ext.apply({}, c.initialConfig),
\r
141 group = c.toggleGroup;
\r
144 text: c.overflowText || c.text,
\r
145 iconCls: c.iconCls,
\r
148 disabled: c.disabled,
\r
149 handler: c.handler,
\r
152 hideOnClick: hideOnClick
\r
154 if(group || c.enableToggle){
\r
157 checked: c.pressed,
\r
159 checkchange: function(item, checked){
\r
171 addComponentToMenu : function(m, c){
\r
172 if(c instanceof Ext.Toolbar.Separator){
\r
174 }else if(Ext.isFunction(c.isXType)){
\r
175 if(c.isXType('splitbutton')){
\r
176 m.add(this.createMenuConfig(c, true));
\r
177 }else if(c.isXType('button')){
\r
178 m.add(this.createMenuConfig(c, !c.menu));
\r
179 }else if(c.isXType('buttongroup')){
\r
180 c.items.each(function(item){
\r
181 this.addComponentToMenu(m, item);
\r
187 clearMenu : function(){
\r
188 var m = this.moreMenu;
\r
190 m.items.each(function(item){
\r
197 beforeMoreShow : function(m){
\r
198 var h = this.container.items.items,
\r
202 needsSep = function(group, item){
\r
203 return group.isXType('buttongroup') && !(item instanceof Ext.Toolbar.Separator);
\r
208 for(var i = 0; i < len; i++){
\r
211 if(prev && (needsSep(c, prev) || needsSep(prev, c))){
\r
214 this.addComponentToMenu(m, c);
\r
218 // put something so the menu isn't empty
\r
219 // if no compatible items found
\r
220 if(m.items.length < 1){
\r
221 m.add(this.noItemsMenuText);
\r
225 initMore : function(){
\r
227 this.moreMenu = new Ext.menu.Menu({
\r
229 beforeshow: this.beforeMoreShow,
\r
233 this.moreMenu.ownerCt = this.container;
\r
234 this.more = new Ext.Button({
\r
235 iconCls: 'x-toolbar-more-icon',
\r
236 cls: 'x-toolbar-more',
\r
237 menu: this.moreMenu
\r
239 var td = this.insertCell(this.more, this.extrasTr, 100);
\r
240 this.more.render(td);
\r
244 destroy : function(){
\r
245 Ext.destroy(this.more, this.moreMenu);
\r
246 Ext.layout.ToolbarLayout.superclass.destroy.call(this);
\r
249 * @property activeItem
\r
254 Ext.Container.LAYOUTS.toolbar = Ext.layout.ToolbarLayout;
\r
257 * @class Ext.Toolbar
\r
258 * @extends Ext.Container
\r
259 * <p>Basic Toolbar class. Although the <tt>{@link Ext.Container#defaultType defaultType}</tt> for Toolbar
\r
260 * is <tt>{@link Ext.Button button}</tt>, Toolbar elements (child items for the Toolbar container) may
\r
261 * be virtually any type of Component. Toolbar elements can be created explicitly via their constructors,
\r
262 * or implicitly via their xtypes, and can be <tt>{@link #add}</tt>ed dynamically.</p>
\r
263 * <p>Some items have shortcut strings for creation:</p>
\r
265 <u>Shortcut</u> <u>xtype</u> <u>Class</u> <u>Description</u>
\r
266 '->' 'tbfill' {@link Ext.Toolbar.Fill} begin using the right-justified button container
\r
267 '-' 'tbseparator' {@link Ext.Toolbar.Separator} add a vertical separator bar between toolbar items
\r
268 ' ' 'tbspacer' {@link Ext.Toolbar.Spacer} add horiztonal space between elements
\r
271 * Example usage of various elements:
\r
273 var tb = new Ext.Toolbar({
\r
274 renderTo: document.body,
\r
279 // xtype: 'button', // default for Toolbars, same as 'tbbutton'
\r
283 xtype: 'splitbutton', // same as 'tbsplitbutton'
\r
284 text: 'Split Button'
\r
286 // begin using the right-justified button container
\r
287 '->', // same as {xtype: 'tbfill'}, // Ext.Toolbar.Fill
\r
289 xtype: 'textfield',
\r
291 emptyText: 'enter search term'
\r
293 // add a vertical separator bar between toolbar items
\r
294 '-', // same as {xtype: 'tbseparator'} to create Ext.Toolbar.Separator
\r
295 'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.Toolbar.TextItem
\r
296 {xtype: 'tbspacer'},// same as ' ' to create Ext.Toolbar.Spacer
\r
298 {xtype: 'tbspacer', width: 50}, // add a 50px space
\r
303 * Example adding a ComboBox within a menu of a button:
\r
305 // ComboBox creation
\r
306 var combo = new Ext.form.ComboBox({
\r
307 store: new Ext.data.ArrayStore({
\r
309 fields: ['initials', 'fullname'],
\r
311 ['FF', 'Fred Flintstone'],
\r
312 ['BR', 'Barney Rubble']
\r
315 displayField: 'fullname',
\r
318 forceSelection: true,
\r
319 triggerAction: 'all',
\r
320 emptyText: 'Select a name...',
\r
321 selectOnFocus: true,
\r
323 getListParent: function() {
\r
324 return this.el.up('.x-menu');
\r
326 iconCls: 'no-icon' //use iconCls if placing within menu to shift to right side of menu
\r
329 // put ComboBox in a Menu
\r
330 var menu = new Ext.menu.Menu({
\r
333 combo // A Field in a Menu
\r
337 // add a Button with the menu
\r
339 text:'Button w/ Menu',
\r
340 menu: menu // assign menu by instance
\r
345 * Creates a new Toolbar
\r
346 * @param {Object/Array} config A config object or an array of buttons to <tt>{@link #add}</tt>
\r
349 Ext.Toolbar = function(config){
\r
350 if(Ext.isArray(config)){
\r
351 config = {items: config, layout: 'toolbar'};
\r
353 config = Ext.apply({
\r
356 if(config.buttons) {
\r
357 config.items = config.buttons;
\r
360 Ext.Toolbar.superclass.constructor.call(this, config);
\r
365 var T = Ext.Toolbar;
\r
367 Ext.extend(T, Ext.Container, {
\r
369 defaultType: 'button',
\r
372 * @cfg {String/Object} layout
\r
373 * This class assigns a default layout (<code>layout:'<b>toolbar</b>'</code>).
\r
374 * Developers <i>may</i> override this configuration option if another layout
\r
375 * is required (the constructor must be passed a configuration object in this
\r
376 * case instead of an array).
\r
377 * See {@link Ext.Container#layout} for additional information.
\r
381 internalDefaults: {removeMode: 'container', hideParent: true},
\r
382 toolbarCls: 'x-toolbar',
\r
384 initComponent : function(){
\r
385 T.superclass.initComponent.call(this);
\r
388 * @event overflowchange
\r
389 * Fires after the overflow state has changed.
\r
390 * @param {Object} c The Container
\r
391 * @param {Boolean} lastOverflow overflow state
\r
393 this.addEvents('overflowchange');
\r
397 onRender : function(ct, position){
\r
399 if(!this.autoCreate){
\r
400 this.autoCreate = {
\r
401 cls: this.toolbarCls + ' x-small-editor'
\r
404 this.el = ct.createChild(Ext.apply({ id: this.id },this.autoCreate), position);
\r
405 Ext.Toolbar.superclass.onRender.apply(this, arguments);
\r
410 * <p>Adds element(s) to the toolbar -- this function takes a variable number of
\r
411 * arguments of mixed type and adds them to the toolbar.</p>
\r
412 * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
\r
413 * @param {Mixed} arg1 The following types of arguments are all valid:<br />
\r
415 * <li>{@link Ext.Button} config: A valid button config object (equivalent to {@link #addButton})</li>
\r
416 * <li>HtmlElement: Any standard HTML element (equivalent to {@link #addElement})</li>
\r
417 * <li>Field: Any form field (equivalent to {@link #addField})</li>
\r
418 * <li>Item: Any subclass of {@link Ext.Toolbar.Item} (equivalent to {@link #addItem})</li>
\r
419 * <li>String: Any generic string (gets wrapped in a {@link Ext.Toolbar.TextItem}, equivalent to {@link #addText}).
\r
420 * Note that there are a few special strings that are treated differently as explained next.</li>
\r
421 * <li>'-': Creates a separator element (equivalent to {@link #addSeparator})</li>
\r
422 * <li>' ': Creates a spacer element (equivalent to {@link #addSpacer})</li>
\r
423 * <li>'->': Creates a fill element (equivalent to {@link #addFill})</li>
\r
425 * @param {Mixed} arg2
\r
426 * @param {Mixed} etc.
\r
431 lookupComponent : function(c){
\r
432 if(Ext.isString(c)){
\r
434 c = new T.Separator();
\r
435 }else if(c == ' '){
\r
436 c = new T.Spacer();
\r
437 }else if(c == '->'){
\r
440 c = new T.TextItem(c);
\r
442 this.applyDefaults(c);
\r
444 if(c.isFormField || c.render){ // some kind of form field, some kind of Toolbar.Item
\r
445 c = this.constructItem(c);
\r
446 }else if(c.tag){ // DomHelper spec
\r
447 c = new T.Item({autoEl: c});
\r
448 }else if(c.tagName){ // element
\r
449 c = new T.Item({el:c});
\r
450 }else if(Ext.isObject(c)){ // must be button config?
\r
451 c = c.xtype ? this.constructItem(c) : this.constructButton(c);
\r
458 applyDefaults : function(c){
\r
459 if(!Ext.isString(c)){
\r
460 c = Ext.Toolbar.superclass.applyDefaults.call(this, c);
\r
461 var d = this.internalDefaults;
\r
463 Ext.applyIf(c.initialConfig, d);
\r
473 constructItem : function(item, type){
\r
474 return Ext.create(item, type || this.defaultType);
\r
479 * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
\r
480 * @return {Ext.Toolbar.Item} The separator {@link Ext.Toolbar.Item item}
\r
482 addSeparator : function(){
\r
483 return this.add(new T.Separator());
\r
487 * Adds a spacer element
\r
488 * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
\r
489 * @return {Ext.Toolbar.Spacer} The spacer item
\r
491 addSpacer : function(){
\r
492 return this.add(new T.Spacer());
\r
496 * Forces subsequent additions into the float:right toolbar
\r
497 * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
\r
499 addFill : function(){
\r
500 this.add(new T.Fill());
\r
504 * Adds any standard HTML element to the toolbar
\r
505 * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
\r
506 * @param {Mixed} el The element or id of the element to add
\r
507 * @return {Ext.Toolbar.Item} The element's item
\r
509 addElement : function(el){
\r
510 return this.addItem(new T.Item({el:el}));
\r
514 * Adds any Toolbar.Item or subclass
\r
515 * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
\r
516 * @param {Ext.Toolbar.Item} item
\r
517 * @return {Ext.Toolbar.Item} The item
\r
519 addItem : function(item){
\r
520 return this.add.apply(this, arguments);
\r
524 * Adds a button (or buttons). See {@link Ext.Button} for more info on the config.
\r
525 * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
\r
526 * @param {Object/Array} config A button config or array of configs
\r
527 * @return {Ext.Button/Array}
\r
529 addButton : function(config){
\r
530 if(Ext.isArray(config)){
\r
532 for(var i = 0, len = config.length; i < len; i++) {
\r
533 buttons.push(this.addButton(config[i]));
\r
537 return this.add(this.constructButton(config));
\r
541 * Adds text to the toolbar
\r
542 * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
\r
543 * @param {String} text The text to add
\r
544 * @return {Ext.Toolbar.Item} The element's item
\r
546 addText : function(text){
\r
547 return this.addItem(new T.TextItem(text));
\r
551 * Adds a new element to the toolbar from the passed {@link Ext.DomHelper} config
\r
552 * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
\r
553 * @param {Object} config
\r
554 * @return {Ext.Toolbar.Item} The element's item
\r
556 addDom : function(config){
\r
557 return this.add(new T.Item({autoEl: config}));
\r
561 * Adds a dynamically rendered Ext.form field (TextField, ComboBox, etc). Note: the field should not have
\r
562 * been rendered yet. For a field that has already been rendered, use {@link #addElement}.
\r
563 * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
\r
564 * @param {Ext.form.Field} field
\r
565 * @return {Ext.Toolbar.Item}
\r
567 addField : function(field){
\r
568 return this.add(field);
\r
572 * Inserts any {@link Ext.Toolbar.Item}/{@link Ext.Button} at the specified index.
\r
573 * <br><p><b>Note</b>: See the notes within {@link Ext.Container#add}.</p>
\r
574 * @param {Number} index The index where the item is to be inserted
\r
575 * @param {Object/Ext.Toolbar.Item/Ext.Button/Array} item The button, or button config object to be
\r
576 * inserted, or an array of buttons/configs.
\r
577 * @return {Ext.Button/Item}
\r
579 insertButton : function(index, item){
\r
580 if(Ext.isArray(item)){
\r
582 for(var i = 0, len = item.length; i < len; i++) {
\r
583 buttons.push(this.insertButton(index + i, item[i]));
\r
587 return Ext.Toolbar.superclass.insert.call(this, index, item);
\r
591 initMenuTracking : function(item){
\r
592 if(this.trackMenus && item.menu){
\r
594 'menutriggerover' : this.onButtonTriggerOver,
\r
595 'menushow' : this.onButtonMenuShow,
\r
596 'menuhide' : this.onButtonMenuHide,
\r
603 constructButton : function(item){
\r
604 var b = item.events ? item : this.constructItem(item, item.split ? 'splitbutton' : this.defaultType);
\r
605 this.initMenuTracking(b);
\r
610 onDisable : function(){
\r
611 this.items.each(function(item){
\r
619 onEnable : function(){
\r
620 this.items.each(function(item){
\r
628 onButtonTriggerOver : function(btn){
\r
629 if(this.activeMenuBtn && this.activeMenuBtn != btn){
\r
630 this.activeMenuBtn.hideMenu();
\r
632 this.activeMenuBtn = btn;
\r
637 onButtonMenuShow : function(btn){
\r
638 this.activeMenuBtn = btn;
\r
642 onButtonMenuHide : function(btn){
\r
643 delete this.activeMenuBtn;
\r
646 Ext.reg('toolbar', Ext.Toolbar);
\r
649 * @class Ext.Toolbar.Item
\r
650 * @extends Ext.BoxComponent
\r
651 * The base class that other non-interacting Toolbar Item classes should extend in order to
\r
652 * get some basic common toolbar item functionality.
\r
654 * Creates a new Item
\r
655 * @param {HTMLElement} el
\r
658 T.Item = Ext.extend(Ext.BoxComponent, {
\r
659 hideParent: true, // Hiding a Toolbar.Item hides its containing TD
\r
660 enable:Ext.emptyFn,
\r
661 disable:Ext.emptyFn,
\r
664 * @cfg {String} overflowText Text to be used for the menu if the item is overflowed.
\r
667 Ext.reg('tbitem', T.Item);
\r
670 * @class Ext.Toolbar.Separator
\r
671 * @extends Ext.Toolbar.Item
\r
672 * A simple class that adds a vertical separator bar between toolbar items
\r
673 * (css class:<tt>'xtb-sep'</tt>). Example usage:
\r
678 {xtype: 'tbseparator'}, // or '-'
\r
684 * Creates a new Separator
\r
685 * @xtype tbseparator
\r
687 T.Separator = Ext.extend(T.Item, {
\r
688 onRender : function(ct, position){
\r
689 this.el = ct.createChild({tag:'span', cls:'xtb-sep'}, position);
\r
692 Ext.reg('tbseparator', T.Separator);
\r
695 * @class Ext.Toolbar.Spacer
\r
696 * @extends Ext.Toolbar.Item
\r
697 * A simple element that adds extra horizontal space between items in a toolbar.
\r
698 * By default a 2px wide space is added via css specification:<pre><code>
\r
699 .x-toolbar .xtb-spacer {
\r
703 * <p>Example usage:</p>
\r
708 {xtype: 'tbspacer'}, // or ' '
\r
710 // space width is also configurable via javascript
\r
711 {xtype: 'tbspacer', width: 50}, // add a 50px space
\r
717 * Creates a new Spacer
\r
720 T.Spacer = Ext.extend(T.Item, {
\r
722 * @cfg {Number} width
\r
723 * The width of the spacer in pixels (defaults to 2px via css style <tt>.x-toolbar .xtb-spacer</tt>).
\r
726 onRender : function(ct, position){
\r
727 this.el = ct.createChild({tag:'div', cls:'xtb-spacer', style: this.width?'width:'+this.width+'px':''}, position);
\r
730 Ext.reg('tbspacer', T.Spacer);
\r
733 * @class Ext.Toolbar.Fill
\r
734 * @extends Ext.Toolbar.Spacer
\r
735 * A non-rendering placeholder item which instructs the Toolbar's Layout to begin using
\r
736 * the right-justified button container.
\r
741 {xtype: 'tbfill'}, // or '->'
\r
747 * Creates a new Fill
\r
750 T.Fill = Ext.extend(T.Item, {
\r
752 render : Ext.emptyFn,
\r
755 Ext.reg('tbfill', T.Fill);
\r
758 * @class Ext.Toolbar.TextItem
\r
759 * @extends Ext.Toolbar.Item
\r
760 * A simple class that renders text directly into a toolbar
\r
761 * (with css class:<tt>'xtb-text'</tt>). Example usage:
\r
765 {xtype: 'tbtext', text: 'Item 1'} // or simply 'Item 1'
\r
770 * Creates a new TextItem
\r
771 * @param {String/Object} text A text string, or a config object containing a <tt>text</tt> property
\r
774 T.TextItem = Ext.extend(T.Item, {
\r
776 * @cfg {String} text The text to be used as innerHTML (html tags are accepted)
\r
779 constructor: function(config){
\r
780 T.TextItem.superclass.constructor.call(this, Ext.isString(config) ? {text: config} : config);
\r
784 onRender : function(ct, position) {
\r
785 this.autoEl = {cls: 'xtb-text', html: this.text || ''};
\r
786 T.TextItem.superclass.onRender.call(this, ct, position);
\r
790 * Updates this item's text, setting the text to be used as innerHTML.
\r
791 * @param {String} t The text to display (html accepted).
\r
793 setText : function(t) {
\r
801 Ext.reg('tbtext', T.TextItem);
\r
803 // backwards compat
\r
804 T.Button = Ext.extend(Ext.Button, {});
\r
805 T.SplitButton = Ext.extend(Ext.SplitButton, {});
\r
806 Ext.reg('tbbutton', T.Button);
\r
807 Ext.reg('tbsplit', T.SplitButton);
\r
811 * @class Ext.ButtonGroup
\r
812 * @extends Ext.Panel
\r
813 * Container for a group of buttons. Example usage:
\r
815 var p = new Ext.Panel({
\r
816 title: 'Panel with Button Group',
\r
819 renderTo: document.body,
\r
822 xtype: 'buttongroup',
\r
823 {@link #columns}: 3,
\r
824 title: 'Clipboard',
\r
828 rowspan: 3, iconCls: 'add',
\r
830 cls: 'x-btn-as-arrow'
\r
832 xtype:'splitbutton',
\r
833 text: 'Menu Button',
\r
838 arrowAlign:'bottom',
\r
839 menu: [{text: 'Menu Item 1'}]
\r
841 xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
\r
843 text: 'Copy', iconCls: 'add16'
\r
845 text: 'Format', iconCls: 'add16'
\r
850 * @xtype buttongroup
\r
852 Ext.ButtonGroup = Ext.extend(Ext.Panel, {
\r
854 * @cfg {Number} columns The <tt>columns</tt> configuration property passed to the
\r
855 * {@link #layout configured layout manager}. See {@link Ext.layout.TableLayout#columns}.
\r
858 * @cfg {String} baseCls Defaults to <tt>'x-btn-group'</tt>. See {@link Ext.Panel#baseCls}.
\r
860 baseCls: 'x-btn-group',
\r
862 * @cfg {String} layout Defaults to <tt>'table'</tt>. See {@link Ext.Container#layout}.
\r
865 defaultType: 'button',
\r
867 * @cfg {Boolean} frame Defaults to <tt>true</tt>. See {@link Ext.Panel#frame}.
\r
870 internalDefaults: {removeMode: 'container', hideParent: true},
\r
872 initComponent : function(){
\r
873 this.layoutConfig = this.layoutConfig || {};
\r
874 Ext.applyIf(this.layoutConfig, {
\r
875 columns : this.columns
\r
878 this.addClass('x-btn-group-notitle');
\r
880 this.on('afterlayout', this.onAfterLayout, this);
\r
881 Ext.ButtonGroup.superclass.initComponent.call(this);
\r
884 applyDefaults : function(c){
\r
885 c = Ext.ButtonGroup.superclass.applyDefaults.call(this, c);
\r
886 var d = this.internalDefaults;
\r
888 Ext.applyIf(c.initialConfig, d);
\r
896 onAfterLayout : function(){
\r
897 var bodyWidth = this.body.getFrameWidth('lr') + this.body.dom.firstChild.offsetWidth;
\r
898 this.body.setWidth(bodyWidth);
\r
899 this.el.setWidth(bodyWidth + this.getFrameWidth());
\r
902 * @cfg {Array} tools @hide
\r
906 Ext.reg('buttongroup', Ext.ButtonGroup);
\r
908 * @class Ext.PagingToolbar
909 * @extends Ext.Toolbar
910 * <p>As the amount of records increases, the time required for the browser to render
911 * them increases. Paging is used to reduce the amount of data exchanged with the client.
912 * Note: if there are more records/rows than can be viewed in the available screen area, vertical
913 * scrollbars will be added.</p>
914 * <p>Paging is typically handled on the server side (see exception below). The client sends
915 * parameters to the server side, which the server needs to interpret and then respond with the
916 * approprate data.</p>
917 * <p><b>Ext.PagingToolbar</b> is a specialized toolbar that is bound to a {@link Ext.data.Store}
918 * and provides automatic paging control. This Component {@link Ext.data.Store#load load}s blocks
919 * of data into the <tt>{@link #store}</tt> by passing {@link Ext.data.Store#paramNames paramNames} used for
920 * paging criteria.</p>
921 * <p>PagingToolbar is typically used as one of the Grid's toolbars:</p>
923 Ext.QuickTips.init(); // to display button quicktips
925 var myStore = new Ext.data.Store({
926 reader: new Ext.data.JsonReader({
927 {@link Ext.data.JsonReader#totalProperty totalProperty}: 'results',
933 var myPageSize = 25; // server script should only send back 25 items at a time
935 var grid = new Ext.grid.GridPanel({
938 bbar: new Ext.PagingToolbar({
939 {@link #store}: myStore, // grid and PagingToolbar using same store
940 {@link #displayInfo}: true,
941 {@link #pageSize}: myPageSize,
942 {@link #prependButtons}: true,
950 * <p>To use paging, pass the paging requirements to the server when the store is first loaded.</p>
954 // specify params for the first page load if using paging
963 * <p>If using {@link Ext.data.Store#autoLoad store's autoLoad} configuration:</p>
965 var myStore = new Ext.data.Store({
966 {@link Ext.data.Store#autoLoad autoLoad}: {params:{start: 0, limit: 25}},
971 * <p>The packet sent back from the server would have this form:</p>
976 "rows": [ // <b>*Note:</b> this must be an Array
977 { "id": 1, "name": "Bill", "occupation": "Gardener" },
978 { "id": 2, "name": "Ben", "occupation": "Horticulturalist" },
980 { "id": 25, "name": "Sue", "occupation": "Botanist" }
984 * <p><u>Paging with Local Data</u></p>
985 * <p>Paging can also be accomplished with local data using extensions:</p>
986 * <div class="mdetail-params"><ul>
987 * <li><a href="http://extjs.com/forum/showthread.php?t=71532">Ext.ux.data.PagingStore</a></li>
988 * <li>Paging Memory Proxy (examples/ux/PagingMemoryProxy.js)</li>
990 * @constructor Create a new PagingToolbar
991 * @param {Object} config The config object
998 Ext.PagingToolbar = Ext.extend(Ext.Toolbar, {
1000 * @cfg {Ext.data.Store} store
1001 * The {@link Ext.data.Store} the paging toolbar should use as its data source (required).
1004 * @cfg {Boolean} displayInfo
1005 * <tt>true</tt> to display the displayMsg (defaults to <tt>false</tt>)
1008 * @cfg {Number} pageSize
1009 * The number of records to display per page (defaults to <tt>20</tt>)
1013 * @cfg {Boolean} prependButtons
1014 * <tt>true</tt> to insert any configured <tt>items</tt> <i>before</i> the paging buttons.
1015 * Defaults to <tt>false</tt>.
1018 * @cfg {String} displayMsg
1019 * The paging status message to display (defaults to <tt>'Displaying {0} - {1} of {2}'</tt>).
1020 * Note that this string is formatted using the braced numbers <tt>{0}-{2}</tt> as tokens
1021 * that are replaced by the values for start, end and total respectively. These tokens should
1022 * be preserved when overriding this string if showing those values is desired.
1024 displayMsg : 'Displaying {0} - {1} of {2}',
1026 * @cfg {String} emptyMsg
1027 * The message to display when no records are found (defaults to 'No data to display')
1029 emptyMsg : 'No data to display',
1031 * @cfg {String} beforePageText
1032 * The text displayed before the input item (defaults to <tt>'Page'</tt>).
1034 beforePageText : 'Page',
1036 * @cfg {String} afterPageText
1037 * Customizable piece of the default paging text (defaults to <tt>'of {0}'</tt>). Note that
1038 * this string is formatted using <tt>{0}</tt> as a token that is replaced by the number of
1039 * total pages. This token should be preserved when overriding this string if showing the
1040 * total page count is desired.
1042 afterPageText : 'of {0}',
1044 * @cfg {String} firstText
1045 * The quicktip text displayed for the first page button (defaults to <tt>'First Page'</tt>).
1046 * <b>Note</b>: quick tips must be initialized for the quicktip to show.
1048 firstText : 'First Page',
1050 * @cfg {String} prevText
1051 * The quicktip text displayed for the previous page button (defaults to <tt>'Previous Page'</tt>).
1052 * <b>Note</b>: quick tips must be initialized for the quicktip to show.
1054 prevText : 'Previous Page',
1056 * @cfg {String} nextText
1057 * The quicktip text displayed for the next page button (defaults to <tt>'Next Page'</tt>).
1058 * <b>Note</b>: quick tips must be initialized for the quicktip to show.
1060 nextText : 'Next Page',
1062 * @cfg {String} lastText
1063 * The quicktip text displayed for the last page button (defaults to <tt>'Last Page'</tt>).
1064 * <b>Note</b>: quick tips must be initialized for the quicktip to show.
1066 lastText : 'Last Page',
1068 * @cfg {String} refreshText
1069 * The quicktip text displayed for the Refresh button (defaults to <tt>'Refresh'</tt>).
1070 * <b>Note</b>: quick tips must be initialized for the quicktip to show.
1072 refreshText : 'Refresh',
1075 * <p><b>Deprecated</b>. <code>paramNames</code> should be set in the <b>data store</b>
1076 * (see {@link Ext.data.Store#paramNames}).</p>
1077 * <br><p>Object mapping of parameter names used for load calls, initially set to:</p>
1078 * <pre>{start: 'start', limit: 'limit'}</pre>
1080 * @property paramNames
1085 * The number of records to display per page. See also <tt>{@link #cursor}</tt>.
1087 * @property pageSize
1091 * Indicator for the record position. This property might be used to get the active page
1092 * number for example:<pre><code>
1093 * // t is reference to the paging toolbar instance
1094 * var activePage = Math.ceil((t.cursor + t.pageSize) / t.pageSize);
1100 initComponent : function(){
1101 var pagingItems = [this.first = new T.Button({
1102 tooltip: this.firstText,
1103 overflowText: this.firstText,
1104 iconCls: 'x-tbar-page-first',
1106 handler: this.moveFirst,
1108 }), this.prev = new T.Button({
1109 tooltip: this.prevText,
1110 overflowText: this.prevText,
1111 iconCls: 'x-tbar-page-prev',
1113 handler: this.movePrevious,
1115 }), '-', this.beforePageText,
1116 this.inputItem = new Ext.form.NumberField({
1117 cls: 'x-tbar-page-number',
1118 allowDecimals: false,
1119 allowNegative: false,
1120 enableKeyEvents: true,
1121 selectOnFocus: true,
1124 keydown: this.onPagingKeyDown,
1125 blur: this.onPagingBlur
1127 }), this.afterTextItem = new T.TextItem({
1128 text: String.format(this.afterPageText, 1)
1129 }), '-', this.next = new T.Button({
1130 tooltip: this.nextText,
1131 overflowText: this.nextText,
1132 iconCls: 'x-tbar-page-next',
1134 handler: this.moveNext,
1136 }), this.last = new T.Button({
1137 tooltip: this.lastText,
1138 overflowText: this.lastText,
1139 iconCls: 'x-tbar-page-last',
1141 handler: this.moveLast,
1143 }), '-', this.refresh = new T.Button({
1144 tooltip: this.refreshText,
1145 overflowText: this.refreshText,
1146 iconCls: 'x-tbar-loading',
1147 handler: this.doRefresh,
1152 var userItems = this.items || this.buttons || [];
1153 if (this.prependButtons) {
1154 this.items = userItems.concat(pagingItems);
1156 this.items = pagingItems.concat(userItems);
1158 delete this.buttons;
1159 if(this.displayInfo){
1160 this.items.push('->');
1161 this.items.push(this.displayItem = new T.TextItem({}));
1163 Ext.PagingToolbar.superclass.initComponent.call(this);
1167 * Fires after the active page has been changed.
1168 * @param {Ext.PagingToolbar} this
1169 * @param {Object} pageData An object that has these properties:<ul>
1170 * <li><code>total</code> : Number <div class="sub-desc">The total number of records in the dataset as
1171 * returned by the server</div></li>
1172 * <li><code>activePage</code> : Number <div class="sub-desc">The current page number</div></li>
1173 * <li><code>pages</code> : Number <div class="sub-desc">The total number of pages (calculated from
1174 * the total number of records in the dataset as returned by the server and the current {@link #pageSize})</div></li>
1179 * @event beforechange
1180 * Fires just before the active page is changed.
1181 * Return false to prevent the active page from being changed.
1182 * @param {Ext.PagingToolbar} this
1183 * @param {Object} params An object hash of the parameters which the PagingToolbar will send when
1184 * loading the required page. This will contain:<ul>
1185 * <li><code>start</code> : Number <div class="sub-desc">The starting row number for the next page of records to
1186 * be retrieved from the server</div></li>
1187 * <li><code>limit</code> : Number <div class="sub-desc">The number of records to be retrieved from the server</div></li>
1189 * <p>(note: the names of the <b>start</b> and <b>limit</b> properties are determined
1190 * by the store's {@link Ext.data.Store#paramNames paramNames} property.)</p>
1191 * <p>Parameters may be added as required in the event handler.</p>
1195 this.on('afterlayout', this.onFirstLayout, this, {single: true});
1197 this.bindStore(this.store, true);
1201 onFirstLayout : function(){
1203 this.onLoad.apply(this, this.dsLoaded);
1208 updateInfo : function(){
1209 if(this.displayItem){
1210 var count = this.store.getCount();
1211 var msg = count == 0 ?
1215 this.cursor+1, this.cursor+count, this.store.getTotalCount()
1217 this.displayItem.setText(msg);
1222 onLoad : function(store, r, o){
1224 this.dsLoaded = [store, r, o];
1227 var p = this.getParams();
1228 this.cursor = (o.params && o.params[p.start]) ? o.params[p.start] : 0;
1229 var d = this.getPageData(), ap = d.activePage, ps = d.pages;
1231 this.afterTextItem.setText(String.format(this.afterPageText, d.pages));
1232 this.inputItem.setValue(ap);
1233 this.first.setDisabled(ap == 1);
1234 this.prev.setDisabled(ap == 1);
1235 this.next.setDisabled(ap == ps);
1236 this.last.setDisabled(ap == ps);
1237 this.refresh.enable();
1239 this.fireEvent('change', this, d);
1243 getPageData : function(){
1244 var total = this.store.getTotalCount();
1247 activePage : Math.ceil((this.cursor+this.pageSize)/this.pageSize),
1248 pages : total < this.pageSize ? 1 : Math.ceil(total/this.pageSize)
1253 * Change the active page
1254 * @param {Integer} page The page to display
1256 changePage : function(page){
1257 this.doLoad(((page-1) * this.pageSize).constrain(0, this.store.getTotalCount()));
1261 onLoadError : function(){
1265 this.refresh.enable();
1269 readPage : function(d){
1270 var v = this.inputItem.getValue(), pageNum;
1271 if (!v || isNaN(pageNum = parseInt(v, 10))) {
1272 this.inputItem.setValue(d.activePage);
1278 onPagingFocus : function(){
1279 this.inputItem.select();
1283 onPagingBlur : function(e){
1284 this.inputItem.setValue(this.getPageData().activePage);
1288 onPagingKeyDown : function(field, e){
1289 var k = e.getKey(), d = this.getPageData(), pageNum;
1290 if (k == e.RETURN) {
1292 pageNum = this.readPage(d);
1293 if(pageNum !== false){
1294 pageNum = Math.min(Math.max(1, pageNum), d.pages) - 1;
1295 this.doLoad(pageNum * this.pageSize);
1297 }else if (k == e.HOME || k == e.END){
1299 pageNum = k == e.HOME ? 1 : d.pages;
1300 field.setValue(pageNum);
1301 }else if (k == e.UP || k == e.PAGEUP || k == e.DOWN || k == e.PAGEDOWN){
1303 if((pageNum = this.readPage(d))){
1304 var increment = e.shiftKey ? 10 : 1;
1305 if(k == e.DOWN || k == e.PAGEDOWN){
1308 pageNum += increment;
1309 if(pageNum >= 1 & pageNum <= d.pages){
1310 field.setValue(pageNum);
1317 getParams : function(){
1318 //retain backwards compat, allow params on the toolbar itself, if they exist.
1319 return this.paramNames || this.store.paramNames;
1323 getParams : function(){
1324 //retain backwards compat, allow params on the toolbar itself, if they exist.
1325 return this.paramNames || this.store.paramNames;
1329 beforeLoad : function(){
1330 if(this.rendered && this.refresh){
1331 this.refresh.disable();
1336 doLoad : function(start){
1337 var o = {}, pn = this.getParams();
1338 o[pn.start] = start;
1339 o[pn.limit] = this.pageSize;
1340 if(this.fireEvent('beforechange', this, o) !== false){
1341 this.store.load({params:o});
1346 * Move to the first page, has the same effect as clicking the 'first' button.
1348 moveFirst : function(){
1353 * Move to the previous page, has the same effect as clicking the 'previous' button.
1355 movePrevious : function(){
1356 this.doLoad(Math.max(0, this.cursor-this.pageSize));
1360 * Move to the next page, has the same effect as clicking the 'next' button.
1362 moveNext : function(){
1363 this.doLoad(this.cursor+this.pageSize);
1367 * Move to the last page, has the same effect as clicking the 'last' button.
1369 moveLast : function(){
1370 var total = this.store.getTotalCount(),
1371 extra = total % this.pageSize;
1373 this.doLoad(extra ? (total - extra) : total - this.pageSize);
1377 * Refresh the current page, has the same effect as clicking the 'refresh' button.
1379 doRefresh : function(){
1380 this.doLoad(this.cursor);
1384 * Binds the paging toolbar to the specified {@link Ext.data.Store}
1385 * @param {Store} store The store to bind to this toolbar
1386 * @param {Boolean} initial (Optional) true to not remove listeners
1388 bindStore : function(store, initial){
1390 if(!initial && this.store){
1391 if(store !== this.store && this.store.autoDestroy){
1392 this.store.destroy();
1394 this.store.un('beforeload', this.beforeLoad, this);
1395 this.store.un('load', this.onLoad, this);
1396 this.store.un('exception', this.onLoadError, this);
1403 store = Ext.StoreMgr.lookup(store);
1406 beforeload: this.beforeLoad,
1408 exception: this.onLoadError
1414 this.onLoad(store, null, {});
1419 * Unbinds the paging toolbar from the specified {@link Ext.data.Store} <b>(deprecated)</b>
1420 * @param {Ext.data.Store} store The data store to unbind
1422 unbind : function(store){
1423 this.bindStore(null);
1427 * Binds the paging toolbar to the specified {@link Ext.data.Store} <b>(deprecated)</b>
1428 * @param {Ext.data.Store} store The data store to bind
1430 bind : function(store){
1431 this.bindStore(store);
1435 onDestroy : function(){
1436 this.bindStore(null);
1437 Ext.PagingToolbar.superclass.onDestroy.call(this);
1442 Ext.reg('paging', Ext.PagingToolbar);