git.roojs.org Git - roojs1/blob - Roo/PagingToolbar.js

   1 /*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * <script type="text/javascript">
  10  */
  11
  12 /**
  13  * @class Roo.PagingToolbar
  14  * @extends Roo.Toolbar
  15  * A specialized toolbar that is bound to a {@link Roo.data.Store} and provides automatic paging controls.
  16  * @constructor
  17  * Create a new PagingToolbar
  18  * @param {Object} config The config object
  19  */
  20 Roo.PagingToolbar = function(el, ds, config)
  21 {
  22     // old args format still supported... - xtype is prefered..
  23     if (typeof(el) == 'object' && el.xtype) {
  24         // created from xtype...
  25         config = el;
  26         ds = el.dataSource;
  27         el = config.container;
  28     }
  29     var items = [];
  30     if (this.items) {
  31         items = this.items;
  32         this.items = [];
  33     }
  34
  35     Roo.PagingToolbar.superclass.constructor.call(this, el, null, config);
  36     this.ds = ds;
  37     this.cursor = 0;
  38     this.renderButtons(this.el);
  39     this.bind(ds);
  40     var _this = this;
  41     Roo.each(items, function(e) {
  42         _this.add(Roo.factory(e));
  43     });
  44
  45 };
  46
  47 Roo.extend(Roo.PagingToolbar, Roo.Toolbar, {
  48     /**
  49      * @cfg {Roo.data.Store} dataSource
  50      * The underlying data store providing the paged data
  51      */
  52     /**
  53      * @cfg {String/HTMLElement/Element} container
  54      * container The id or element that will contain the toolbar
  55      */
  56     /**
  57      * @cfg {Boolean} displayInfo
  58      * True to display the displayMsg (defaults to false)
  59      */
  60     /**
  61      * @cfg {Number} pageSize
  62      * The number of records to display per page (defaults to 20)
  63      */
  64     pageSize: 20,
  65     /**
  66      * @cfg {String} displayMsg
  67      * The paging status message to display (defaults to "Displaying {start} - {end} of {total}")
  68      */
  69     displayMsg : 'Displaying {0} - {1} of {2}',
  70     /**
  71      * @cfg {String} emptyMsg
  72      * The message to display when no records are found (defaults to "No data to display")
  73      */
  74     emptyMsg : 'No data to display',
  75     /**
  76      * Customizable piece of the default paging text (defaults to "Page")
  77      * @type String
  78      */
  79     beforePageText : "Page",
  80     /**
  81      * Customizable piece of the default paging text (defaults to "of %0")
  82      * @type String
  83      */
  84     afterPageText : "of {0}",
  85     /**
  86      * Customizable piece of the default paging text (defaults to "First Page")
  87      * @type String
  88      */
  89     firstText : "First Page",
  90     /**
  91      * Customizable piece of the default paging text (defaults to "Previous Page")
  92      * @type String
  93      */
  94     prevText : "Previous Page",
  95     /**
  96      * Customizable piece of the default paging text (defaults to "Next Page")
  97      * @type String
  98      */
  99     nextText : "Next Page",
 100     /**
 101      * Customizable piece of the default paging text (defaults to "Last Page")
 102      * @type String
 103      */
 104     lastText : "Last Page",
 105     /**
 106      * Customizable piece of the default paging text (defaults to "Refresh")
 107      * @type String
 108      */
 109     refreshText : "Refresh",
 110
 111     // private
 112     renderButtons : function(el){
 113         Roo.PagingToolbar.superclass.render.call(this, el);
 114         this.first = this.addButton({
 115             tooltip: this.firstText,
 116             cls: "x-btn-icon x-grid-page-first",
 117             disabled: true,
 118             handler: this.onClick.createDelegate(this, ["first"])
 119         });
 120         this.prev = this.addButton({
 121             tooltip: this.prevText,
 122             cls: "x-btn-icon x-grid-page-prev",
 123             disabled: true,
 124             handler: this.onClick.createDelegate(this, ["prev"])
 125         });
 126         //this.addSeparator();
 127         this.add(this.beforePageText);
 128         this.field = Roo.get(this.addDom({
 129            tag: "input",
 130            type: "text",
 131            size: "3",
 132            value: "1",
 133            cls: "x-grid-page-number"
 134         }).el);
 135         this.field.on("keydown", this.onPagingKeydown, this);
 136         this.field.on("focus", function(){this.dom.select();});
 137         this.afterTextEl = this.addText(String.format(this.afterPageText, 1));
 138         this.field.setHeight(18);
 139         //this.addSeparator();
 140         this.next = this.addButton({
 141             tooltip: this.nextText,
 142             cls: "x-btn-icon x-grid-page-next",
 143             disabled: true,
 144             handler: this.onClick.createDelegate(this, ["next"])
 145         });
 146         this.last = this.addButton({
 147             tooltip: this.lastText,
 148             cls: "x-btn-icon x-grid-page-last",
 149             disabled: true,
 150             handler: this.onClick.createDelegate(this, ["last"])
 151         });
 152         //this.addSeparator();
 153         this.loading = this.addButton({
 154             tooltip: this.refreshText,
 155             cls: "x-btn-icon x-grid-loading",
 156             handler: this.onClick.createDelegate(this, ["refresh"])
 157         });
 158
 159         if(this.displayInfo){
 160             this.displayEl = Roo.fly(this.el.dom.firstChild).createChild({cls:'x-paging-info'});
 161         }
 162     },
 163
 164     // private
 165     updateInfo : function(){
 166         if(this.displayEl){
 167             var count = this.ds.getCount();
 168             var msg = count == 0 ?
 169                 this.emptyMsg :
 170                 String.format(
 171                     this.displayMsg,
 172                     this.cursor+1, this.cursor+count, this.ds.getTotalCount()
 173                 );
 174             this.displayEl.update(msg);
 175         }
 176     },
 177
 178     // private
 179     onLoad : function(ds, r, o){
 180        this.cursor = o.params ? o.params.start : 0;
 181        var d = this.getPageData(), ap = d.activePage, ps = d.pages;
 182
 183        this.afterTextEl.el.innerHTML = String.format(this.afterPageText, d.pages);
 184        this.field.dom.value = ap;
 185        this.first.setDisabled(ap == 1);
 186        this.prev.setDisabled(ap == 1);
 187        this.next.setDisabled(ap == ps);
 188        this.last.setDisabled(ap == ps);
 189        this.loading.enable();
 190        this.updateInfo();
 191     },
 192
 193     // private
 194     getPageData : function(){
 195         var total = this.ds.getTotalCount();
 196         return {
 197             total : total,
 198             activePage : Math.ceil((this.cursor+this.pageSize)/this.pageSize),
 199             pages :  total < this.pageSize ? 1 : Math.ceil(total/this.pageSize)
 200         };
 201     },
 202
 203     // private
 204     onLoadError : function(){
 205         this.loading.enable();
 206     },
 207
 208     // private
 209     onPagingKeydown : function(e){
 210         var k = e.getKey();
 211         var d = this.getPageData();
 212         if(k == e.RETURN){
 213             var v = this.field.dom.value, pageNum;
 214             if(!v || isNaN(pageNum = parseInt(v, 10))){
 215                 this.field.dom.value = d.activePage;
 216                 return;
 217             }
 218             pageNum = Math.min(Math.max(1, pageNum), d.pages) - 1;
 219             this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
 220             e.stopEvent();
 221         }
 222         else if(k == e.HOME || (k == e.UP && e.ctrlKey) || (k == e.PAGEUP && e.ctrlKey) || (k == e.RIGHT && e.ctrlKey) || k == e.END || (k == e.DOWN && e.ctrlKey) || (k == e.LEFT && e.ctrlKey) || (k == e.PAGEDOWN && e.ctrlKey))
 223         {
 224           var pageNum = (k == e.HOME || (k == e.DOWN && e.ctrlKey) || (k == e.LEFT && e.ctrlKey) || (k == e.PAGEDOWN && e.ctrlKey)) ? 1 : d.pages;
 225           this.field.dom.value = pageNum;
 226           this.ds.load({params:{start: (pageNum - 1) * this.pageSize, limit: this.pageSize}});
 227           e.stopEvent();
 228         }
 229         else if(k == e.UP || k == e.RIGHT || k == e.PAGEUP || k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN)
 230         {
 231           var v = this.field.dom.value, pageNum;
 232           var increment = (e.shiftKey) ? 10 : 1;
 233           if(k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN)
 234             increment *= -1;
 235           if(!v || isNaN(pageNum = parseInt(v, 10))) {
 236             this.field.dom.value = d.activePage;
 237             return;
 238           }
 239           else if(parseInt(v, 10) + increment >= 1 & parseInt(v, 10) + increment <= d.pages)
 240           {
 241             this.field.dom.value = parseInt(v, 10) + increment;
 242             pageNum = Math.min(Math.max(1, pageNum + increment), d.pages) - 1;
 243             this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
 244           }
 245           e.stopEvent();
 246         }
 247     },
 248
 249     // private
 250     beforeLoad : function(){
 251         if(this.loading){
 252             this.loading.disable();
 253         }
 254     },
 255
 256     // private
 257     onClick : function(which){
 258         var ds = this.ds;
 259         switch(which){
 260             case "first":
 261                 ds.load({params:{start: 0, limit: this.pageSize}});
 262             break;
 263             case "prev":
 264                 ds.load({params:{start: Math.max(0, this.cursor-this.pageSize), limit: this.pageSize}});
 265             break;
 266             case "next":
 267                 ds.load({params:{start: this.cursor+this.pageSize, limit: this.pageSize}});
 268             break;
 269             case "last":
 270                 var total = ds.getTotalCount();
 271                 var extra = total % this.pageSize;
 272                 var lastStart = extra ? (total - extra) : total-this.pageSize;
 273                 ds.load({params:{start: lastStart, limit: this.pageSize}});
 274             break;
 275             case "refresh":
 276                 ds.load({params:{start: this.cursor, limit: this.pageSize}});
 277             break;
 278         }
 279     },
 280
 281     /**
 282      * Unbinds the paging toolbar from the specified {@link Roo.data.Store}
 283      * @param {Roo.data.Store} store The data store to unbind
 284      */
 285     unbind : function(ds){
 286         ds.un("beforeload", this.beforeLoad, this);
 287         ds.un("load", this.onLoad, this);
 288         ds.un("loadexception", this.onLoadError, this);
 289         ds.un("remove", this.updateInfo, this);
 290         ds.un("add", this.updateInfo, this);
 291         this.ds = undefined;
 292     },
 293
 294     /**
 295      * Binds the paging toolbar to the specified {@link Roo.data.Store}
 296      * @param {Roo.data.Store} store The data store to bind
 297      */
 298     bind : function(ds){
 299         ds.on("beforeload", this.beforeLoad, this);
 300         ds.on("load", this.onLoad, this);
 301         ds.on("loadexception", this.onLoadError, this);
 302         ds.on("remove", this.updateInfo, this);
 303         ds.on("add", this.updateInfo, this);
 304         this.ds = ds;
 305     }
 306 });