+++ /dev/null
-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
-\r
-/**\r
- * @class Ext.PagingToolbar\r
- * @extends Ext.Toolbar\r
- * <p>A specialized toolbar that is bound to a {@link Ext.data.Store} and provides automatic paging control. This\r
- * Component {@link Ext.data.Store#load load}s blocks of data into the Store passing parameters who's names are\r
- * specified by the store's {@link Ext.data.Store#paramNames paramNames} property.</p>\r
- * @constructor\r
- * Create a new PagingToolbar\r
- * @param {Object} config The config object\r
- */\r
-Ext.PagingToolbar = Ext.extend(Ext.Toolbar, {\r
- /**\r
- * @cfg {Ext.data.Store} store The {@link Ext.data.Store} the paging toolbar should use as its data source (required).\r
- */\r
- /**\r
- * @cfg {Boolean} displayInfo\r
- * True to display the displayMsg (defaults to false)\r
- */\r
- /**\r
- * @cfg {Number} pageSize\r
- * The number of records to display per page (defaults to 20)\r
- */\r
- pageSize: 20,\r
- /**\r
- * @cfg {String} displayMsg\r
- * The paging status message to display (defaults to "Displaying {0} - {1} of {2}"). Note that this string is\r
- * formatted using the braced numbers 0-2 as tokens that are replaced by the values for start, end and total\r
- * respectively. These tokens should be preserved when overriding this string if showing those values is desired.\r
- */\r
- displayMsg : 'Displaying {0} - {1} of {2}',\r
- /**\r
- * @cfg {String} emptyMsg\r
- * The message to display when no records are found (defaults to "No data to display")\r
- */\r
- emptyMsg : 'No data to display',\r
- /**\r
- * Customizable piece of the default paging text (defaults to "Page")\r
- * @type String\r
- */\r
- beforePageText : "Page",\r
- /**\r
- * Customizable piece of the default paging text (defaults to "of {0}"). Note that this string is\r
- * formatted using {0} as a token that is replaced by the number of total pages. This token should be\r
- * preserved when overriding this string if showing the total page count is desired.\r
- * @type String\r
- */\r
- afterPageText : "of {0}",\r
- /**\r
- * Customizable piece of the default paging text (defaults to "First Page")\r
- * @type String\r
- */\r
- firstText : "First Page",\r
- /**\r
- * Customizable piece of the default paging text (defaults to "Previous Page")\r
- * @type String\r
- */\r
- prevText : "Previous Page",\r
- /**\r
- * Customizable piece of the default paging text (defaults to "Next Page")\r
- * @type String\r
- */\r
- nextText : "Next Page",\r
- /**\r
- * Customizable piece of the default paging text (defaults to "Last Page")\r
- * @type String\r
- */\r
- lastText : "Last Page",\r
- /**\r
- * Customizable piece of the default paging text (defaults to "Refresh")\r
- * @type String\r
- */\r
- refreshText : "Refresh",\r
-\r
- /**\r
- * Object mapping of parameter names for load calls (defaults to {start: 'start', limit: 'limit'})\r
- */\r
- paramNames : {start: 'start', limit: 'limit'},\r
-\r
- // private\r
- initComponent : function(){\r
- this.addEvents(\r
- /**\r
- * @event change\r
- * Fires after the active page has been changed.\r
- * @param {Ext.PagingToolbar} this\r
- * @param {Object} changeEvent An object that has these properties:<ul>\r
- * <li><code>total</code> : Number <div class="sub-desc">The total number of records in the dataset as\r
- * returned by the server</div></li>\r
- * <li><code>activePage</code> : Number <div class="sub-desc">The current page number</div></li>\r
- * <li><code>pages</code> : Number <div class="sub-desc">The total number of pages (calculated from\r
- * the total number of records in the dataset as returned by the server and the current {@link #pageSize})</div></li>\r
- * </ul>\r
- */\r
- 'change',\r
- /**\r
- * @event beforechange\r
- * Fires just before the active page is changed.\r
- * Return false to prevent the active page from being changed.\r
- * @param {Ext.PagingToolbar} this\r
- * @param {Object} beforeChangeEvent An object that has these properties:<ul>\r
- * <li><code>start</code> : Number <div class="sub-desc">The starting row number for the next page of records to\r
- * be retrieved from the server</div></li>\r
- * <li><code>limit</code> : Number <div class="sub-desc">The number of records to be retrieved from the server</div></li>\r
- * </ul>\r
- * (note: the names of the <b>start</b> and <b>limit</b> properties are determined\r
- * by the store's {@link Ext.data.Store#paramNames paramNames} property.)\r
- */\r
- 'beforechange'\r
- );\r
- Ext.PagingToolbar.superclass.initComponent.call(this);\r
- this.cursor = 0;\r
- this.bind(this.store);\r
- },\r
-\r
- // private\r
- onRender : function(ct, position){\r
- Ext.PagingToolbar.superclass.onRender.call(this, ct, position);\r
- this.first = this.addButton({\r
- tooltip: this.firstText,\r
- iconCls: "x-tbar-page-first",\r
- disabled: true,\r
- handler: this.onClick.createDelegate(this, ["first"])\r
- });\r
- this.prev = this.addButton({\r
- tooltip: this.prevText,\r
- iconCls: "x-tbar-page-prev",\r
- disabled: true,\r
- handler: this.onClick.createDelegate(this, ["prev"])\r
- });\r
- this.addSeparator();\r
- this.add(this.beforePageText);\r
- this.field = Ext.get(this.addDom({\r
- tag: "input",\r
- type: "text",\r
- size: "3",\r
- value: "1",\r
- cls: "x-tbar-page-number"\r
- }).el);\r
- this.field.on("keydown", this.onPagingKeydown, this);\r
- this.field.on("focus", function(){this.dom.select();});\r
- this.field.on("blur", this.onPagingBlur, this);\r
- this.afterTextEl = this.addText(String.format(this.afterPageText, 1));\r
- this.field.setHeight(18);\r
- this.addSeparator();\r
- this.next = this.addButton({\r
- tooltip: this.nextText,\r
- iconCls: "x-tbar-page-next",\r
- disabled: true,\r
- handler: this.onClick.createDelegate(this, ["next"])\r
- });\r
- this.last = this.addButton({\r
- tooltip: this.lastText,\r
- iconCls: "x-tbar-page-last",\r
- disabled: true,\r
- handler: this.onClick.createDelegate(this, ["last"])\r
- });\r
- this.addSeparator();\r
- this.loading = this.addButton({\r
- tooltip: this.refreshText,\r
- iconCls: "x-tbar-loading",\r
- handler: this.onClick.createDelegate(this, ["refresh"])\r
- });\r
-\r
- if(this.displayInfo){\r
- this.displayEl = Ext.fly(this.el.dom).createChild({cls:'x-paging-info'});\r
- }\r
- if(this.dsLoaded){\r
- this.onLoad.apply(this, this.dsLoaded);\r
- }\r
- },\r
-\r
- // private\r
- updateInfo : function(){\r
- if(this.displayEl){\r
- var count = this.store.getCount();\r
- var msg = count == 0 ?\r
- this.emptyMsg :\r
- String.format(\r
- this.displayMsg,\r
- this.cursor+1, this.cursor+count, this.store.getTotalCount()\r
- );\r
- this.displayEl.update(msg);\r
- }\r
- },\r
-\r
- // private\r
- onLoad : function(store, r, o){\r
- if(!this.rendered){\r
- this.dsLoaded = [store, r, o];\r
- return;\r
- }\r
- this.cursor = o.params ? o.params[this.paramNames.start] : 0;\r
- var d = this.getPageData(), ap = d.activePage, ps = d.pages;\r
-\r
- this.afterTextEl.el.innerHTML = String.format(this.afterPageText, d.pages);\r
- this.field.dom.value = ap;\r
- this.first.setDisabled(ap == 1);\r
- this.prev.setDisabled(ap == 1);\r
- this.next.setDisabled(ap == ps);\r
- this.last.setDisabled(ap == ps);\r
- this.loading.enable();\r
- this.updateInfo();\r
- this.fireEvent('change', this, d);\r
- },\r
-\r
- // private\r
- getPageData : function(){\r
- var total = this.store.getTotalCount();\r
- return {\r
- total : total,\r
- activePage : Math.ceil((this.cursor+this.pageSize)/this.pageSize),\r
- pages : total < this.pageSize ? 1 : Math.ceil(total/this.pageSize)\r
- };\r
- },\r
-\r
- // private\r
- onLoadError : function(){\r
- if(!this.rendered){\r
- return;\r
- }\r
- this.loading.enable();\r
- },\r
-\r
- // private\r
- readPage : function(d){\r
- var v = this.field.dom.value, pageNum;\r
- if (!v || isNaN(pageNum = parseInt(v, 10))) {\r
- this.field.dom.value = d.activePage;\r
- return false;\r
- }\r
- return pageNum;\r
- },\r
-\r
- //private\r
- onPagingBlur: function(e){\r
- this.field.dom.value = this.getPageData().activePage;\r
- },\r
-\r
- // private\r
- onPagingKeydown : function(e){\r
- var k = e.getKey(), d = this.getPageData(), pageNum;\r
- if (k == e.RETURN) {\r
- e.stopEvent();\r
- pageNum = this.readPage(d);\r
- if(pageNum !== false){\r
- pageNum = Math.min(Math.max(1, pageNum), d.pages) - 1;\r
- this.doLoad(pageNum * this.pageSize);\r
- }\r
- }else if (k == e.HOME || k == e.END){\r
- e.stopEvent();\r
- pageNum = k == e.HOME ? 1 : d.pages;\r
- this.field.dom.value = pageNum;\r
- }else if (k == e.UP || k == e.PAGEUP || k == e.DOWN || k == e.PAGEDOWN){\r
- e.stopEvent();\r
- if(pageNum = this.readPage(d)){\r
- var increment = e.shiftKey ? 10 : 1;\r
- if(k == e.DOWN || k == e.PAGEDOWN){\r
- increment *= -1;\r
- }\r
- pageNum += increment;\r
- if(pageNum >= 1 & pageNum <= d.pages){\r
- this.field.dom.value = pageNum;\r
- }\r
- }\r
- }\r
- },\r
-\r
- // private\r
- beforeLoad : function(){\r
- if(this.rendered && this.loading){\r
- this.loading.disable();\r
- }\r
- },\r
-\r
- // private\r
- doLoad : function(start){\r
- var o = {}, pn = this.paramNames;\r
- o[pn.start] = start;\r
- o[pn.limit] = this.pageSize;\r
- if(this.fireEvent('beforechange', this, o) !== false){\r
- this.store.load({params:o});\r
- }\r
- },\r
-\r
- /**\r
- * Change the active page\r
- * @param {Integer} page The page to display\r
- */\r
- changePage: function(page){\r
- this.doLoad(((page-1) * this.pageSize).constrain(0, this.store.getTotalCount()));\r
- },\r
-\r
- // private\r
- onClick : function(which){\r
- var store = this.store;\r
- switch(which){\r
- case "first":\r
- this.doLoad(0);\r
- break;\r
- case "prev":\r
- this.doLoad(Math.max(0, this.cursor-this.pageSize));\r
- break;\r
- case "next":\r
- this.doLoad(this.cursor+this.pageSize);\r
- break;\r
- case "last":\r
- var total = store.getTotalCount();\r
- var extra = total % this.pageSize;\r
- var lastStart = extra ? (total - extra) : total-this.pageSize;\r
- this.doLoad(lastStart);\r
- break;\r
- case "refresh":\r
- this.doLoad(this.cursor);\r
- break;\r
- }\r
- },\r
-\r
- /**\r
- * Unbinds the paging toolbar from the specified {@link Ext.data.Store}\r
- * @param {Ext.data.Store} store The data store to unbind\r
- */\r
- unbind : function(store){\r
- store = Ext.StoreMgr.lookup(store);\r
- store.un("beforeload", this.beforeLoad, this);\r
- store.un("load", this.onLoad, this);\r
- store.un("loadexception", this.onLoadError, this);\r
- this.store = undefined;\r
- },\r
-\r
- /**\r
- * Binds the paging toolbar to the specified {@link Ext.data.Store}\r
- * @param {Ext.data.Store} store The data store to bind\r
- */\r
- bind : function(store){\r
- store = Ext.StoreMgr.lookup(store);\r
- store.on("beforeload", this.beforeLoad, this);\r
- store.on("load", this.onLoad, this);\r
- store.on("loadexception", this.onLoadError, this);\r
- this.store = store;\r
- },\r
-\r
- // private\r
- onDestroy : function(){\r
- if(this.store){\r
- this.unbind(this.store);\r
- }\r
- Ext.PagingToolbar.superclass.onDestroy.call(this);\r
- }\r
-});\r
-Ext.reg('paging', Ext.PagingToolbar);
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff