X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..10a866c12701c0a0afd0ac85dcdcf32a421514ac:/docs/source/PagingToolbar.html?ds=inline
diff --git a/docs/source/PagingToolbar.html b/docs/source/PagingToolbar.html
index 911ea16c..128477fd 100644
--- a/docs/source/PagingToolbar.html
+++ b/docs/source/PagingToolbar.html
@@ -1,5 +1,6 @@
+
The source code
@@ -24,10 +25,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 +53,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 +221,7 @@ Ext.PagingToolbar = Ext.extend(Ext.Toolbar, {
allowNegative: false,
enableKeyEvents: true,
selectOnFocus: true,
+ submitValue: false,
listeners: {
scope: this,
keydown: this.onPagingKeyDown,
@@ -217,7 +247,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 +297,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 +470,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 +485,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 +504,7 @@ Ext.PagingToolbar = Ext.extend(Ext.Toolbar, {
load: this.onLoad,
exception: this.onLoadError
});
- doLoad = store.getCount() > 0;
+ doLoad = true;
}
this.store = store;
if(doLoad){