PagingToolbar.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:17k
源码类别:

中间件编程

开发平台:

JavaScript

  1. /*!
  2.  * Ext JS Library 3.0.0
  3.  * Copyright(c) 2006-2009 Ext JS, LLC
  4.  * licensing@extjs.com
  5.  * http://www.extjs.com/license
  6.  */
  7. /**
  8.  * @class Ext.PagingToolbar
  9.  * @extends Ext.Toolbar
  10.  * <p>As the amount of records increases, the time required for the browser to render
  11.  * them increases. Paging is used to reduce the amount of data exchanged with the client.
  12.  * Note: if there are more records/rows than can be viewed in the available screen area, vertical
  13.  * scrollbars will be added.</p>
  14.  * <p>Paging is typically handled on the server side (see exception below). The client sends
  15.  * parameters to the server side, which the server needs to interpret and then respond with the
  16.  * approprate data.</p>
  17.  * <p><b>Ext.PagingToolbar</b> is a specialized toolbar that is bound to a {@link Ext.data.Store}
  18.  * and provides automatic paging control. This Component {@link Ext.data.Store#load load}s blocks
  19.  * of data into the <tt>{@link #store}</tt> by passing {@link Ext.data.Store#paramNames paramNames} used for
  20.  * paging criteria.</p>
  21.  * <p>PagingToolbar is typically used as one of the Grid's toolbars:</p>
  22.  * <pre><code>
  23. Ext.QuickTips.init(); // to display button quicktips
  24. var myStore = new Ext.data.Store({
  25.     ...
  26. });
  27. var myPageSize = 25;  // server script should only send back 25 items
  28. var grid = new Ext.grid.GridPanel({
  29.     ...
  30.     store: myStore,
  31.     bbar: new Ext.PagingToolbar({
  32.         {@link #store}: myStore,       // grid and PagingToolbar using same store
  33.         {@link #displayInfo}: true,
  34.         {@link #pageSize}: myPageSize,
  35.         {@link #prependButtons}: true,
  36.         items: [
  37.             'text 1'
  38.         ]
  39.     })
  40. });
  41.  * </code></pre>
  42.  *
  43.  * <p>To use paging, pass the paging requirements to the server when the store is first loaded.</p>
  44.  * <pre><code>
  45. store.load({
  46.     params: {
  47.         start: 0,          // specify params for the first page load if using paging
  48.         limit: myPageSize,
  49.         foo:   'bar'
  50.     }
  51. });
  52.  * </code></pre>
  53.  * <p><u>Paging with Local Data</u></p>
  54.  * <p>Paging can also be accomplished with local data using extensions:</p>
  55.  * <div class="mdetail-params"><ul>
  56.  * <li><a href="http://extjs.com/forum/showthread.php?t=57386">Ext.ux.data.PagingStore</a></li>
  57.  * <li>Paging Memory Proxy (examples/ux/PagingMemoryProxy.js)</li>
  58.  * </ul></div>
  59.  * @constructor
  60.  * Create a new PagingToolbar
  61.  * @param {Object} config The config object
  62.  * @xtype paging
  63.  */
  64. (function() {
  65. var T = Ext.Toolbar;
  66. Ext.PagingToolbar = Ext.extend(Ext.Toolbar, {
  67.     /**
  68.      * @cfg {Ext.data.Store} store
  69.      * The {@link Ext.data.Store} the paging toolbar should use as its data source (required).
  70.      */
  71.     /**
  72.      * @cfg {Boolean} displayInfo
  73.      * <tt>true</tt> to display the displayMsg (defaults to <tt>false</tt>)
  74.      */
  75.     /**
  76.      * @cfg {Number} pageSize
  77.      * The number of records to display per page (defaults to <tt>20</tt>)
  78.      */
  79.     pageSize : 20,
  80.     /**
  81.      * @cfg {Boolean} prependButtons
  82.      * <tt>true</tt> to insert any configured <tt>items</tt> <i>before</i> the paging buttons.
  83.      * Defaults to <tt>false</tt>.
  84.      */
  85.     /**
  86.      * @cfg {String} displayMsg
  87.      * The paging status message to display (defaults to <tt>'Displaying {0} - {1} of {2}'</tt>).
  88.      * Note that this string is formatted using the braced numbers <tt>{0}-{2}</tt> as tokens
  89.      * that are replaced by the values for start, end and total respectively. These tokens should
  90.      * be preserved when overriding this string if showing those values is desired.
  91.      */
  92.     displayMsg : 'Displaying {0} - {1} of {2}',
  93.     /**
  94.      * @cfg {String} emptyMsg
  95.      * The message to display when no records are found (defaults to 'No data to display')
  96.      */
  97.     emptyMsg : 'No data to display',
  98.     /**
  99.      * @cfg {String} beforePageText
  100.      * The text displayed before the input item (defaults to <tt>'Page'</tt>).
  101.      */
  102.     beforePageText : 'Page',
  103.     /**
  104.      * @cfg {String} afterPageText
  105.      * Customizable piece of the default paging text (defaults to <tt>'of {0}'</tt>). Note that
  106.      * this string is formatted using <tt>{0}</tt> as a token that is replaced by the number of
  107.      * total pages. This token should be preserved when overriding this string if showing the
  108.      * total page count is desired.
  109.      */
  110.     afterPageText : 'of {0}',
  111.     /**
  112.      * @cfg {String} firstText
  113.      * The quicktip text displayed for the first page button (defaults to <tt>'First Page'</tt>).
  114.      * <b>Note</b>: quick tips must be initialized for the quicktip to show.
  115.      */
  116.     firstText : 'First Page',
  117.     /**
  118.      * @cfg {String} prevText
  119.      * The quicktip text displayed for the previous page button (defaults to <tt>'Previous Page'</tt>).
  120.      * <b>Note</b>: quick tips must be initialized for the quicktip to show.
  121.      */
  122.     prevText : 'Previous Page',
  123.     /**
  124.      * @cfg {String} nextText
  125.      * The quicktip text displayed for the next page button (defaults to <tt>'Next Page'</tt>).
  126.      * <b>Note</b>: quick tips must be initialized for the quicktip to show.
  127.      */
  128.     nextText : 'Next Page',
  129.     /**
  130.      * @cfg {String} lastText
  131.      * The quicktip text displayed for the last page button (defaults to <tt>'Last Page'</tt>).
  132.      * <b>Note</b>: quick tips must be initialized for the quicktip to show.
  133.      */
  134.     lastText : 'Last Page',
  135.     /**
  136.      * @cfg {String} refreshText
  137.      * The quicktip text displayed for the Refresh button (defaults to <tt>'Refresh'</tt>).
  138.      * <b>Note</b>: quick tips must be initialized for the quicktip to show.
  139.      */
  140.     refreshText : 'Refresh',
  141.     /**
  142.      * @deprecated
  143.      * <b>The defaults for these should be set in the data store.</b>
  144.      * Object mapping of parameter names used for load calls, initially set to:
  145.      * <pre>{start: 'start', limit: 'limit'}</pre>
  146.      */
  147.     /**
  148.      * The number of records to display per page.  See also <tt>{@link #cursor}</tt>.
  149.      * @type Number
  150.      * @property pageSize
  151.      */
  152.     /**
  153.      * Indicator for the record position.  This property might be used to get the active page
  154.      * number for example:<pre><code>
  155.      * // t is reference to the paging toolbar instance
  156.      * var activePage = Math.ceil((t.cursor + t.pageSize) / t.pageSize);
  157.      * </code></pre>
  158.      * @type Number
  159.      * @property cursor
  160.      */
  161.     initComponent : function(){
  162.         var pagingItems = [this.first = new T.Button({
  163.             tooltip: this.firstText,
  164.             overflowText: this.firstText,
  165.             iconCls: 'x-tbar-page-first',
  166.             disabled: true,
  167.             handler: this.moveFirst,
  168.             scope: this
  169.         }), this.prev = new T.Button({
  170.             tooltip: this.prevText,
  171.             overflowText: this.prevText,
  172.             iconCls: 'x-tbar-page-prev',
  173.             disabled: true,
  174.             handler: this.movePrevious,
  175.             scope: this
  176.         }), '-', this.beforePageText,
  177.         this.inputItem = new Ext.form.NumberField({
  178.             cls: 'x-tbar-page-number',
  179.             allowDecimals: false,
  180.             allowNegative: false,
  181.             enableKeyEvents: true,
  182.             selectOnFocus: true,
  183.             listeners: {
  184.                 scope: this,
  185.                 keydown: this.onPagingKeyDown,
  186.                 blur: this.onPagingBlur
  187.             }
  188.         }), this.afterTextItem = new T.TextItem({
  189.             text: String.format(this.afterPageText, 1)
  190.         }), '-', this.next = new T.Button({
  191.             tooltip: this.nextText,
  192.             overflowText: this.nextText,
  193.             iconCls: 'x-tbar-page-next',
  194.             disabled: true,
  195.             handler: this.moveNext,
  196.             scope: this
  197.         }), this.last = new T.Button({
  198.             tooltip: this.lastText,
  199.             overflowText: this.lastText,
  200.             iconCls: 'x-tbar-page-last',
  201.             disabled: true,
  202.             handler: this.moveLast,
  203.             scope: this
  204.         }), '-', this.refresh = new T.Button({
  205.             tooltip: this.refreshText,
  206.             overflowText: this.refreshText,
  207.             iconCls: 'x-tbar-loading',
  208.             handler: this.refresh,
  209.             scope: this
  210.         })];
  211.         var userItems = this.items || this.buttons || [];
  212.         if (this.prependButtons) {
  213.             this.items = userItems.concat(pagingItems);
  214.         }else{
  215.             this.items = pagingItems.concat(userItems);
  216.         }
  217.         delete this.buttons;
  218.         if(this.displayInfo){
  219.             this.items.push('->');
  220.             this.items.push(this.displayItem = new T.TextItem({}));
  221.         }
  222.         Ext.PagingToolbar.superclass.initComponent.call(this);
  223.         this.addEvents(
  224.             /**
  225.              * @event change
  226.              * Fires after the active page has been changed.
  227.              * @param {Ext.PagingToolbar} this
  228.              * @param {Object} pageData An object that has these properties:<ul>
  229.              * <li><code>total</code> : Number <div class="sub-desc">The total number of records in the dataset as
  230.              * returned by the server</div></li>
  231.              * <li><code>activePage</code> : Number <div class="sub-desc">The current page number</div></li>
  232.              * <li><code>pages</code> : Number <div class="sub-desc">The total number of pages (calculated from
  233.              * the total number of records in the dataset as returned by the server and the current {@link #pageSize})</div></li>
  234.              * </ul>
  235.              */
  236.             'change',
  237.             /**
  238.              * @event beforechange
  239.              * Fires just before the active page is changed.
  240.              * Return false to prevent the active page from being changed.
  241.              * @param {Ext.PagingToolbar} this
  242.              * @param {Object} params An object hash of the parameters which the PagingToolbar will send when
  243.              * loading the required page. This will contain:<ul>
  244.              * <li><code>start</code> : Number <div class="sub-desc">The starting row number for the next page of records to
  245.              * be retrieved from the server</div></li>
  246.              * <li><code>limit</code> : Number <div class="sub-desc">The number of records to be retrieved from the server</div></li>
  247.              * </ul>
  248.              * <p>(note: the names of the <b>start</b> and <b>limit</b> properties are determined
  249.              * by the store's {@link Ext.data.Store#paramNames paramNames} property.)</p>
  250.              * <p>Parameters may be added as required in the event handler.</p>
  251.              */
  252.             'beforechange'
  253.         );
  254.         this.on('afterlayout', this.onFirstLayout, this, {single: true});
  255.         this.cursor = 0;
  256.         this.bindStore(this.store);
  257.     },
  258.     // private
  259.     onFirstLayout : function(){
  260.         if(this.dsLoaded){
  261.             this.onLoad.apply(this, this.dsLoaded);
  262.         }
  263.     },
  264.     // private
  265.     updateInfo : function(){
  266.         if(this.displayItem){
  267.             var count = this.store.getCount();
  268.             var msg = count == 0 ?
  269.                 this.emptyMsg :
  270.                 String.format(
  271.                     this.displayMsg,
  272.                     this.cursor+1, this.cursor+count, this.store.getTotalCount()
  273.                 );
  274.             this.displayItem.setText(msg);
  275.         }
  276.     },
  277.     // private
  278.     onLoad : function(store, r, o){
  279.         if(!this.rendered){
  280.             this.dsLoaded = [store, r, o];
  281.             return;
  282.         }
  283.         var p = this.getParams();
  284.         this.cursor = (o.params && o.params[p.start]) ? o.params[p.start] : 0;
  285.         var d = this.getPageData(), ap = d.activePage, ps = d.pages;
  286.         this.afterTextItem.setText(String.format(this.afterPageText, d.pages));
  287.         this.inputItem.setValue(ap);
  288.         this.first.setDisabled(ap == 1);
  289.         this.prev.setDisabled(ap == 1);
  290.         this.next.setDisabled(ap == ps);
  291.         this.last.setDisabled(ap == ps);
  292.         this.refresh.enable();
  293.         this.updateInfo();
  294.         this.fireEvent('change', this, d);
  295.     },
  296.     // private
  297.     getPageData : function(){
  298.         var total = this.store.getTotalCount();
  299.         return {
  300.             total : total,
  301.             activePage : Math.ceil((this.cursor+this.pageSize)/this.pageSize),
  302.             pages :  total < this.pageSize ? 1 : Math.ceil(total/this.pageSize)
  303.         };
  304.     },
  305.     /**
  306.      * Change the active page
  307.      * @param {Integer} page The page to display
  308.      */
  309.     changePage : function(page){
  310.         this.doLoad(((page-1) * this.pageSize).constrain(0, this.store.getTotalCount()));
  311.     },
  312.     // private
  313.     onLoadError : function(){
  314.         if(!this.rendered){
  315.             return;
  316.         }
  317.         this.refresh.enable();
  318.     },
  319.     // private
  320.     readPage : function(d){
  321.         var v = this.inputItem.getValue(), pageNum;
  322.         if (!v || isNaN(pageNum = parseInt(v, 10))) {
  323.             this.inputItem.setValue(d.activePage);
  324.             return false;
  325.         }
  326.         return pageNum;
  327.     },
  328.     onPagingFocus : function(){
  329.         this.inputItem.select();
  330.     },
  331.     //private
  332.     onPagingBlur : function(e){
  333.         this.inputItem.setValue(this.getPageData().activePage);
  334.     },
  335.     // private
  336.     onPagingKeyDown : function(field, e){
  337.         var k = e.getKey(), d = this.getPageData(), pageNum;
  338.         if (k == e.RETURN) {
  339.             e.stopEvent();
  340.             pageNum = this.readPage(d);
  341.             if(pageNum !== false){
  342.                 pageNum = Math.min(Math.max(1, pageNum), d.pages) - 1;
  343.                 this.doLoad(pageNum * this.pageSize);
  344.             }
  345.         }else if (k == e.HOME || k == e.END){
  346.             e.stopEvent();
  347.             pageNum = k == e.HOME ? 1 : d.pages;
  348.             field.setValue(pageNum);
  349.         }else if (k == e.UP || k == e.PAGEUP || k == e.DOWN || k == e.PAGEDOWN){
  350.             e.stopEvent();
  351.             if((pageNum = this.readPage(d))){
  352.                 var increment = e.shiftKey ? 10 : 1;
  353.                 if(k == e.DOWN || k == e.PAGEDOWN){
  354.                     increment *= -1;
  355.                 }
  356.                 pageNum += increment;
  357.                 if(pageNum >= 1 & pageNum <= d.pages){
  358.                     field.setValue(pageNum);
  359.                 }
  360.             }
  361.         }
  362.     },
  363.     // private
  364.     getParams : function(){
  365.         //retain backwards compat, allow params on the toolbar itself, if they exist.
  366.         return this.paramNames || this.store.paramNames;
  367.     },
  368.     // private
  369.     beforeLoad : function(){
  370.         if(this.rendered && this.refresh){
  371.             this.refresh.disable();
  372.         }
  373.     },
  374.     // private
  375.     doLoad : function(start){
  376.         var o = {}, pn = this.getParams();
  377.         o[pn.start] = start;
  378.         o[pn.limit] = this.pageSize;
  379.         if(this.fireEvent('beforechange', this, o) !== false){
  380.             this.store.load({params:o});
  381.         }
  382.     },
  383.     /**
  384.      * Move to the first page, has the same effect as clicking the 'first' button.
  385.      */
  386.     moveFirst : function(){
  387.         this.doLoad(0);
  388.     },
  389.     /**
  390.      * Move to the previous page, has the same effect as clicking the 'previous' button.
  391.      */
  392.     movePrevious : function(){
  393.         this.doLoad(Math.max(0, this.cursor-this.pageSize));
  394.     },
  395.     /**
  396.      * Move to the next page, has the same effect as clicking the 'next' button.
  397.      */
  398.     moveNext : function(){
  399.         this.doLoad(this.cursor+this.pageSize);
  400.     },
  401.     /**
  402.      * Move to the last page, has the same effect as clicking the 'last' button.
  403.      */
  404.     moveLast : function(){
  405.         var total = this.store.getTotalCount(),
  406.             extra = total % this.pageSize;
  407.         this.doLoad(extra ? (total - extra) : total - this.pageSize);
  408.     },
  409.     /**
  410.      * Refresh the current page, has the same effect as clicking the 'refresh' button.
  411.      */
  412.     refresh : function(){
  413.         this.doLoad(this.cursor);
  414.     },
  415.     /**
  416.      * Binds the paging toolbar to the specified {@link Ext.data.Store}
  417.      * @param {Store} store The store to bind to this toolbar
  418.      * @param {Boolean} initial (Optional) true to not remove listeners
  419.      */
  420.     bindStore : function(store, initial){
  421.         var doLoad;
  422.         if(!initial && this.store){
  423.             this.store.un('beforeload', this.beforeLoad, this);
  424.             this.store.un('load', this.onLoad, this);
  425.             this.store.un('exception', this.onLoadError, this);
  426.             if(store !== this.store && this.store.autoDestroy){
  427.                 this.store.destroy();
  428.             }
  429.         }
  430.         if(store){
  431.             store = Ext.StoreMgr.lookup(store);
  432.             store.on({
  433.                 scope: this,
  434.                 beforeload: this.beforeLoad,
  435.                 load: this.onLoad,
  436.                 exception: this.onLoadError
  437.             });
  438.             doLoad = store.getCount() > 0;
  439.         }
  440.         this.store = store;
  441.         if(doLoad){
  442.             this.onLoad(store, null, {});
  443.         }
  444.     },
  445.     /**
  446.      * Unbinds the paging toolbar from the specified {@link Ext.data.Store} <b>(deprecated)</b>
  447.      * @param {Ext.data.Store} store The data store to unbind
  448.      */
  449.     unbind : function(store){
  450.         this.bindStore(null);
  451.     },
  452.     /**
  453.      * Binds the paging toolbar to the specified {@link Ext.data.Store} <b>(deprecated)</b>
  454.      * @param {Ext.data.Store} store The data store to bind
  455.      */
  456.     bind : function(store){
  457.         this.bindStore(store);
  458.     },
  459.     // private
  460.     onDestroy : function(){
  461.         this.bindStore(null);
  462.         Ext.PagingToolbar.superclass.onDestroy.call(this);
  463.     }
  464. });
  465. })();
  466. Ext.reg('paging', Ext.PagingToolbar);