X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..6b044c28b5f26fb99c86c237ffad19741c0f7f3d:/docs/output/Ext.PagingToolbar.html?ds=inline diff --git a/docs/output/Ext.PagingToolbar.html b/docs/output/Ext.PagingToolbar.html index 826eea77..b9f1dc46 100644 --- a/docs/output/Ext.PagingToolbar.html +++ b/docs/output/Ext.PagingToolbar.html @@ -1,4 +1,9 @@ -
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 +

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

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 +18,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,15 +43,33 @@ 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
 allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
 allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
 beforePageText : String
The text displayed before the input item (defaults to 'Page').
PagingToolbar
 beforePageText : String
The text displayed before the input item (defaults to 'Page').
PagingToolbar
 data : Mixed
The initial set of data to apply to the tpl to +update the content area of the Component.
Component
 emptyMsg : String
The message to display when no records are found (defaults to 'No data to display')
PagingToolbar
 emptyMsg : String
The message to display when no records are found (defaults to 'No data to display')
PagingToolbar
 layoutConfig : Object
This is a config object containing properties specific to the chosen layout if layout has been specified as a string.

Container
 resizeEvent : String
The event to listen to for resizing in layouts. Defaults to 'resize'.
Container
 x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
 hidden : Boolean
True if this component is hidden. Read-only.
Component
 initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
 items : MixedCollection
The collection of components in this container as a Ext.util.MixedCollection
Container
 pageSize : Number
The number of records to display per page. See also cursor.
PagingToolbar
 hidden : Boolean
True if this component is hidden. Read-only.
Component
 initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
 items : MixedCollection
The collection of components in this container as a Ext.util.MixedCollection
Container
 pageSize : Number
The number of records to display per page. See also cursor.
PagingToolbar
 rendered : Boolean
True if this component has been rendered. Read-only.
Component

Public Methods

MethodDefined By
 rendered : Boolean
True if this component has been rendered. Read-only.
Component

Public Methods

MethodDefined By

Public Events

EventDefined By