X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..92c2b89db26be16707f4a805d3303ab2531006e1:/src/widgets/PagingToolbar.js?ds=inline diff --git a/src/widgets/PagingToolbar.js b/src/widgets/PagingToolbar.js index af53fb3e..eaa4ba1c 100644 --- a/src/widgets/PagingToolbar.js +++ b/src/widgets/PagingToolbar.js @@ -1,6 +1,6 @@ /*! - * Ext JS Library 3.0.0 - * Copyright(c) 2006-2009 Ext JS, LLC + * Ext JS Library 3.1.1 + * Copyright(c) 2006-2010 Ext JS, LLC * licensing@extjs.com * http://www.extjs.com/license */ @@ -23,10 +23,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({ ... @@ -47,20 +51,43 @@ 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 + * @constructor Create a new PagingToolbar * @param {Object} config The config object * @xtype paging */ @@ -145,10 +172,13 @@ Ext.PagingToolbar = Ext.extend(Ext.Toolbar, { refreshText : 'Refresh', /** - * @deprecated - * The defaults for these should be set in the data store. - * Object mapping of parameter names used for load calls, initially set to: + *

Deprecated. paramNames should be set in the data store + * (see {@link Ext.data.Store#paramNames}).

+ *

Object mapping of parameter names used for load calls, initially set to:

*
{start: 'start', limit: 'limit'}
+ * @type Object + * @property paramNames + * @deprecated */ /** @@ -189,6 +219,7 @@ Ext.PagingToolbar = Ext.extend(Ext.Toolbar, { allowNegative: false, enableKeyEvents: true, selectOnFocus: true, + submitValue: false, listeners: { scope: this, keydown: this.onPagingKeyDown, @@ -214,7 +245,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 })]; @@ -264,7 +295,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,7 +471,7 @@ Ext.PagingToolbar = Ext.extend(Ext.Toolbar, { /** * Refresh the current page, has the same effect as clicking the 'refresh' button. */ - refresh : function(){ + doRefresh : function(){ this.doLoad(this.cursor); }, @@ -452,11 +483,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){ @@ -467,7 +502,7 @@ Ext.PagingToolbar = Ext.extend(Ext.Toolbar, { load: this.onLoad, exception: this.onLoadError }); - doLoad = store.getCount() > 0; + doLoad = true; } this.store = store; if(doLoad){