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