X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..10a866c12701c0a0afd0ac85dcdcf32a421514ac:/docs/output/Ext.PagingToolbar.html diff --git a/docs/output/Ext.PagingToolbar.html b/docs/output/Ext.PagingToolbar.html index 826eea77..ba79bd81 100644 --- a/docs/output/Ext.PagingToolbar.html +++ b/docs/output/Ext.PagingToolbar.html @@ -1,4 +1,4 @@ -
Properties Methods Events Config Options Direct Link 
Observable
  Component
    BoxComponent
      Container
        Toolbar
          PagingToolbar

Class Ext.PagingToolbar

Package:Ext
Defined In:PagingToolbar.js
Class:PagingToolbar
Extends:Toolbar
xtype:paging

As the amount of records increases, the time required for the browser to render +

Observable
  Component
    BoxComponent
      Container
        Toolbar
          PagingToolbar

Class Ext.PagingToolbar

Package:Ext
Defined In:PagingToolbar.js
Class:PagingToolbar
Extends:Toolbar

As the amount of records increases, the time required for the browser to render them increases. Paging is used to reduce the amount of data exchanged with the client. Note: if there are more records/rows than can be viewed in the available screen area, vertical scrollbars will be added.

@@ -13,10 +13,14 @@ paging criteria.

Ext.QuickTips.init(); // to display button quicktips
 
 var myStore = new Ext.data.Store({
+    reader: new Ext.data.JsonReader({
+        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({
     ...
@@ -34,33 +38,51 @@ paging criteria.

 
To use paging, pass the paging requirements to the server when the store is first loaded.

 
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 store's autoLoad configuration:

+
var myStore = new Ext.data.Store({
+    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:

Config Options

Config OptionsDefined By