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  * @children   Roo.Toolbar.Item Roo.Toolbar.Button Roo.Toolbar.SplitButton Roo.form.Field
  16  * A specialized toolbar that is bound to a {@link Roo.data.Store} and provides automatic paging controls.
  17  * @constructor
  18  * Create a new PagingToolbar
  19  * @param {Object} config The config object
  20  */
  21 Roo.PagingToolbar = function(el, ds, config)
  22 {
  23     // old args format still supported... - xtype is prefered..
  24     if (typeof(el) == 'object' && el.xtype) {
  25         // created from xtype...
  26         config = el;
  27         ds = el.dataSource;
  28         el = config.container;
  29     }
  30     var items = [];
  31     if (config.items) {
  32         items = config.items;
  33         config.items = [];
  34     }
  35
  36     Roo.PagingToolbar.superclass.constructor.call(this, el, null, config);
  37     this.ds = ds;
  38     this.cursor = 0;
  39     this.renderButtons(this.el);
  40     this.bind(ds);
  41
  42     // supprot items array.
  43
  44     Roo.each(items, function(e) {
  45         this.add(Roo.factory(e));
  46     },this);
  47
  48 };
  49
  50 Roo.extend(Roo.PagingToolbar, Roo.Toolbar, {
  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
  62     /**
  63      * @cfg {Number} pageSize
  64      * The number of records to display per page (defaults to 20)
  65      */
  66     pageSize: 20,
  67     /**
  68      * @cfg {String} displayMsg
  69      * The paging status message to display (defaults to "Displaying {start} - {end} of {total}")
  70      */
  71     displayMsg : 'Displaying {0} - {1} of {2}',
  72     /**
  73      * @cfg {String} emptyMsg
  74      * The message to display when no records are found (defaults to "No data to display")
  75      */
  76     emptyMsg : 'No data to display',
  77     /**
  78      * Customizable piece of the default paging text (defaults to "Page")
  79      * @type String
  80      */
  81     beforePageText : "Page",
  82     /**
  83      * Customizable piece of the default paging text (defaults to "of %0")
  84      * @type String
  85      */
  86     afterPageText : "of {0}",
  87     /**
  88      * Customizable piece of the default paging text (defaults to "First Page")
  89      * @type String
  90      */
  91     firstText : "First Page",
  92     /**
  93      * Customizable piece of the default paging text (defaults to "Previous Page")
  94      * @type String
  95      */
  96     prevText : "Previous Page",
  97     /**
  98      * Customizable piece of the default paging text (defaults to "Next Page")
  99      * @type String
 100      */
 101     nextText : "Next Page",
 102     /**
 103      * Customizable piece of the default paging text (defaults to "Last Page")
 104      * @type String
 105      */
 106     lastText : "Last Page",
 107     /**
 108      * Customizable piece of the default paging text (defaults to "Refresh")
 109      * @type String
 110      */
 111     refreshText : "Refresh",
 112
 113     // private
 114     renderButtons : function(el){
 115         Roo.PagingToolbar.superclass.render.call(this, el);
 116         this.first = this.addButton({
 117             tooltip: this.firstText,
 118             cls: "x-btn-icon x-grid-page-first",
 119             disabled: true,
 120             handler: this.onClick.createDelegate(this, ["first"])
 121         });
 122         this.prev = this.addButton({
 123             tooltip: this.prevText,
 124             cls: "x-btn-icon x-grid-page-prev",
 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         this.afterTextEl = this.addText(String.format(this.afterPageText, 1));
 140         this.field.setHeight(18);
 141         //this.addSeparator();
 142         this.next = this.addButton({
 143             tooltip: this.nextText,
 144             cls: "x-btn-icon x-grid-page-next",
 145             disabled: true,
 146             handler: this.onClick.createDelegate(this, ["next"])
 147         });
 148         this.last = this.addButton({
 149             tooltip: this.lastText,
 150             cls: "x-btn-icon x-grid-page-last",
 151             disabled: true,
 152             handler: this.onClick.createDelegate(this, ["last"])
 153         });
 154         //this.addSeparator();
 155         this.loading = this.addButton({
 156             tooltip: this.refreshText,
 157             cls: "x-btn-icon x-grid-loading",
 158             handler: this.onClick.createDelegate(this, ["refresh"])
 159         });
 160
 161         if(this.displayInfo){
 162             this.displayEl = Roo.fly(this.el.dom.firstChild).createChild({cls:'x-paging-info'});
 163         }
 164     },
 165
 166     // private
 167     updateInfo : function(){
 168         if(this.displayEl){
 169             var count = this.ds.getCount();
 170             var msg = count == 0 ?
 171                 this.emptyMsg :
 172                 String.format(
 173                     this.displayMsg,
 174                     this.cursor+1, this.cursor+count, this.ds.getTotalCount()
 175                 );
 176             this.displayEl.update(msg);
 177         }
 178     },
 179
 180     // private
 181     onLoad : function(ds, r, o){
 182        this.cursor = o.params ? o.params.start : 0;
 183        var d = this.getPageData(), ap = d.activePage, ps = d.pages;
 184
 185        this.afterTextEl.el.innerHTML = String.format(this.afterPageText, d.pages);
 186        this.field.dom.value = ap;
 187        this.first.setDisabled(ap == 1);
 188        this.prev.setDisabled(ap == 1);
 189        this.next.setDisabled(ap == ps);
 190        this.last.setDisabled(ap == ps);
 191        this.loading.enable();
 192        this.updateInfo();
 193     },
 194
 195     // private
 196     getPageData : function(){
 197         var total = this.ds.getTotalCount();
 198         return {
 199             total : total,
 200             activePage : Math.ceil((this.cursor+this.pageSize)/this.pageSize),
 201             pages :  total < this.pageSize ? 1 : Math.ceil(total/this.pageSize)
 202         };
 203     },
 204
 205     // private
 206     onLoadError : function(){
 207         this.loading.enable();
 208     },
 209
 210     // private
 211     onPagingKeydown : function(e){
 212         var k = e.getKey();
 213         var d = this.getPageData();
 214         if(k == e.RETURN){
 215             var v = this.field.dom.value, pageNum;
 216             if(!v || isNaN(pageNum = parseInt(v, 10))){
 217                 this.field.dom.value = d.activePage;
 218                 return;
 219             }
 220             pageNum = Math.min(Math.max(1, pageNum), d.pages) - 1;
 221             this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
 222             e.stopEvent();
 223         }
 224         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))
 225         {
 226           var pageNum = (k == e.HOME || (k == e.DOWN && e.ctrlKey) || (k == e.LEFT && e.ctrlKey) || (k == e.PAGEDOWN && e.ctrlKey)) ? 1 : d.pages;
 227           this.field.dom.value = pageNum;
 228           this.ds.load({params:{start: (pageNum - 1) * this.pageSize, limit: this.pageSize}});
 229           e.stopEvent();
 230         }
 231         else if(k == e.UP || k == e.RIGHT || k == e.PAGEUP || k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN)
 232         {
 233           var v = this.field.dom.value, pageNum;
 234           var increment = (e.shiftKey) ? 10 : 1;
 235           if(k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN) {
 236             increment *= -1;
 237           }
 238           if(!v || isNaN(pageNum = parseInt(v, 10))) {
 239             this.field.dom.value = d.activePage;
 240             return;
 241           }
 242           else if(parseInt(v, 10) + increment >= 1 & parseInt(v, 10) + increment <= d.pages)
 243           {
 244             this.field.dom.value = parseInt(v, 10) + increment;
 245             pageNum = Math.min(Math.max(1, pageNum + increment), d.pages) - 1;
 246             this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
 247           }
 248           e.stopEvent();
 249         }
 250     },
 251
 252     // private
 253     beforeLoad : function(){
 254         if(this.loading){
 255             this.loading.disable();
 256         }
 257     },
 258     /**
 259      * event that occurs when you click on the navigation buttons - can be used to trigger load of a grid.
 260      * @param {String} which (first|prev|next|last|refresh)  which button to press.
 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 });