Basic Toolbar class. Although the {@link Ext.Container#defaultType defaultType} for Toolbar + * is {@link Ext.Button button}, 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 {@link #add}ed dynamically.
+ *Some items have shortcut strings for creation:
+ *
+Shortcut xtype Class Description
+'->' '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
+ *
+ *
+ * Example usage of various elements:
+ *
+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'
+ ]
+});
+ *
+// 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();
+ *
+new Ext.Panel({
+ tbar : [
+ 'Item 1',
+ {xtype: 'tbseparator'}, // or '-'
+ 'Item 2'
+ ]
+});
+
+.x-toolbar .xtb-spacer {
+ width:2px;
+}
+ * Example usage:
+ *
+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'
+ ]
+});
+
+new Ext.Panel({
+ tbar : [
+ 'Item 1',
+ {xtype: 'tbfill'}, // or '->'
+ 'Item 2'
+ ]
+});
+
+new Ext.Panel({
+ tbar : [
+ {xtype: 'tbtext', text: 'Item 1'} // or simply 'Item 1'
+ ]
+});
+
+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'
+ }]
+ }]
+});
+ * 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.
+ *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.
+ *Ext.PagingToolbar 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 {@link #store} by passing {@link Ext.data.Store#paramNames paramNames} used for + * paging criteria.
+ *PagingToolbar is typically used as one of the Grid's toolbars:
+ *
+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'
+ ]
+ })
+});
+ * To use paging, pass the paging requirements to the server when the store is first loaded.
+ *
+store.load({
+ params: {
+ start: 0, // specify params for the first page load if using paging
+ limit: myPageSize,
+ foo: 'bar'
+ }
+});
+ * Paging with Local Data
+ *Paging can also be accomplished with local data using extensions:
+ *{start: 'start', limit: 'limit'}
+ */
+
+ /**
+ * The number of records to display per page. See also {@link #cursor}.
+ * @type Number
+ * @property pageSize
+ */
+
+ /**
+ * Indicator for the record position. This property might be used to get the active page
+ * number for example:
+ * // t is reference to the paging toolbar instance
+ * var activePage = Math.ceil((t.cursor + t.pageSize) / t.pageSize);
+ * total : Number activePage : Number pages : Number start : Number limit : Number (note: the names of the start and limit properties are determined + * by the store's {@link Ext.data.Store#paramNames paramNames} property.)
+ *Parameters may be added as required in the event handler.
+ */ + '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} (deprecated) + * @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} (deprecated) + * @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); \ No newline at end of file