X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6a7e4474cba9d8be4b2ec445e10f1691f7277c50..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/docs/output/Ext.PagingToolbar.html?ds=sidebyside diff --git a/docs/output/Ext.PagingToolbar.html b/docs/output/Ext.PagingToolbar.html deleted file mode 100644 index ae1cec78..00000000 --- a/docs/output/Ext.PagingToolbar.html +++ /dev/null @@ -1,1344 +0,0 @@ -
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.

-

Paging is typically handled on the server side (see exception below). The client sends -parameters to the server side, which the server needs to interpret and then respond with the -approprate data.

-

Ext.PagingToolbar is a specialized toolbar that is bound to a Ext.data.Store -and provides automatic paging control. This Component loads blocks -of data into the store by passing paramNames used for -paging criteria.

-

PagingToolbar is typically used as one of the Grid's toolbars:

-
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 at a time
-
-var grid = new Ext.grid.GridPanel({
-    ...
-    store: myStore,
-    bbar: new Ext.PagingToolbar({
-        store: myStore,       // grid and PagingToolbar using same store
-        displayInfo: true,
-        pageSize: myPageSize,
-        prependButtons: true,
-        items: [
-            'text 1'
-        ]
-    })
-});
-

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

-
store.load({
-    params: {
-        // 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
 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
 disabled : Boolean
Render this component disabled (default is false).
Component
 disabledClass : String
CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
Component
 displayInfo : Boolean
true to display the displayMsg (defaults to false)
PagingToolbar
 emptyMsg : String
The message to display when no records are found (defaults to 'No data to display')
PagingToolbar
 hidden : Boolean
Render this component hidden (default is false). If true, the -hide method will be called internally.
Component
 layoutConfig : Object
This is a config object containing properties specific to the chosen -layout if layout -has been specified as a string.

Container
 pageSize : Number
The number of records to display per page (defaults to 20)
PagingToolbar
 pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
 pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
 prependButtons : Boolean
true to insert any configured items before the paging buttons. -Defaults to false.
PagingToolbar
 resizeEvent : String
The event to listen to for resizing in layouts. Defaults to 'resize'.
Container
 store : Ext.data.Store
The Ext.data.Store the paging toolbar should use as its data source (required).
PagingToolbar
 x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
 y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent

Public Properties

PropertyDefined By
 disabled : Boolean
True if this component is disabled. Read-only.
Component
 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

Public Events

EventDefined By
\ No newline at end of file