X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..6b044c28b5f26fb99c86c237ffad19741c0f7f3d:/docs/source/PagingToolbar.html diff --git a/docs/source/PagingToolbar.html b/docs/source/PagingToolbar.html index 911ea16c..1051df84 100644 --- a/docs/source/PagingToolbar.html +++ b/docs/source/PagingToolbar.html @@ -1,11 +1,18 @@ - -
-/** + + + ++ \ No newline at end of fileThe source code + + + + +/*! + * Ext JS Library 3.3.1 + * Copyright(c) 2006-2010 Sencha Inc. + * licensing@sencha.com + * http://www.sencha.com/license + */ +/** * @class Ext.PagingToolbar * @extends Ext.Toolbar *- +Ext.reg('paging', Ext.PagingToolbar);As the amount of records increases, the time required for the browser to render @@ -24,10 +31,14 @@ Ext.QuickTips.init(); // to display button quicktips var myStore = new Ext.data.Store({ + reader: new Ext.data.JsonReader({ + {@link Ext.data.JsonReader#totalProperty totalProperty}: 'results', + ... + }), ... }); -var myPageSize = 25; // server script should only send back 25 items +var myPageSize = 25; // server script should only send back 25 items at a time var grid = new Ext.grid.GridPanel({ ... @@ -48,16 +59,40 @@ var grid = new Ext.grid.GridPanel({ *
+ * + *store.load({ params: { - start: 0, // specify params for the first page load if using paging + // specify params for the first page load if using paging + start: 0, limit: myPageSize, + // other params foo: 'bar' } }); + *
If using {@link Ext.data.Store#autoLoad store's autoLoad} configuration:
+ *+ * + *+var myStore = new Ext.data.Store({ + {@link Ext.data.Store#autoLoad autoLoad}: {params:{start: 0, limit: 25}}, + ... +}); + *
The packet sent back from the server would have this form:
+ **+{ + "success": true, + "results": 2000, + "rows": [ // *Note: this must be an Array + { "id": 1, "name": "Bill", "occupation": "Gardener" }, + { "id": 2, "name": "Ben", "occupation": "Horticulturalist" }, + ... + { "id": 25, "name": "Sue", "occupation": "Botanist" } + ] +} *
Paging with Local Data
*Paging can also be accomplished with local data using extensions:
** @constructor Create a new PagingToolbar @@ -192,6 +227,7 @@ Ext.PagingToolbar = Ext.extend(Ext.Toolbar, { allowNegative: false, enableKeyEvents: true, selectOnFocus: true, + submitValue: false, listeners: { scope: this, keydown: this.onPagingKeyDown, @@ -217,7 +253,7 @@ Ext.PagingToolbar = Ext.extend(Ext.Toolbar, { tooltip: this.refreshText, overflowText: this.refreshText, iconCls: 'x-tbar-loading', - handler: this.refresh, + handler: this.doRefresh, scope: this })]; @@ -267,7 +303,7 @@ Ext.PagingToolbar = Ext.extend(Ext.Toolbar, { ); this.on('afterlayout', this.onFirstLayout, this, {single: true}); this.cursor = 0; - this.bindStore(this.store); + this.bindStore(this.store, true); }, // private @@ -440,10 +476,10 @@ Ext.PagingToolbar = Ext.extend(Ext.Toolbar, { this.doLoad(extra ? (total - extra) : total - this.pageSize); }, - /** + /** * Refresh the current page, has the same effect as clicking the 'refresh' button. */ - refresh : function(){ + doRefresh : function(){ this.doLoad(this.cursor); }, @@ -455,11 +491,15 @@ Ext.PagingToolbar = Ext.extend(Ext.Toolbar, { bindStore : function(store, initial){ var doLoad; if(!initial && this.store){ - this.store.un('beforeload', this.beforeLoad, this); - this.store.un('load', this.onLoad, this); - this.store.un('exception', this.onLoadError, this); if(store !== this.store && this.store.autoDestroy){ this.store.destroy(); + }else{ + this.store.un('beforeload', this.beforeLoad, this); + this.store.un('load', this.onLoad, this); + this.store.un('exception', this.onLoadError, this); + } + if(!store){ + this.store = null; } } if(store){ @@ -470,7 +510,7 @@ Ext.PagingToolbar = Ext.extend(Ext.Toolbar, { load: this.onLoad, exception: this.onLoadError }); - doLoad = store.getCount() > 0; + doLoad = true; } this.store = store; if(doLoad){ @@ -502,6 +542,6 @@ Ext.PagingToolbar = Ext.extend(Ext.Toolbar, { }); })(); -Ext.reg('paging', Ext.PagingToolbar);- *
- Ext.ux.data.PagingStore
+ *- Ext.ux.data.PagingStore
*- Paging Memory Proxy (examples/ux/PagingMemoryProxy.js)
*