ExtJS Grid front page paging using Pagingmemoryproxy "two"

In the project encountered grid front page paging, I also just contact ExtJS not long, in order to achieve the effect, has been looking for a long time to realize it, for some of the code can not be described in detail,

I do not know whether can help to meet the same problem of friends, so the example code to put out everyone together to learn from each other.

The effect of front page paging is often used in the project, and the grid is used for paging.

\examples\ux\data\pagingmemoryproxy.js in the source code, this time to use the JS file, the project references the file.

<script type= "Text/javascript" src= "Ux/data/pagingmemoryproxy.js" ></script>

The Pagination toolbar is the Ext.toolbar.Paging class, Xtype:pagingtoolbar, the tool binds the same store data as the grid bound data,

Dockeditems: [{    ' Pagingtoolbar ',    store:me.mystore,    ' bottom ',    ' Smallpagingtoolbar ",         ",true,    function  ( ) {         Me.refresh ();    }
}

When creating the store data, you should pay attention to the proxy, I do not understand the information in the property, can only follow the copy and paste, the store data will be created according to the specified pagesize, self-paging

            Me.mystore = Ext.create ("Ext.data.Store", {                fields:me.gridFilds,                //  Specify 2 records per page                true,                / * Generated array data *                /proxy:                    {' pagingmemory '/  * Referenced Pagingmemoryproxy class *                    /reader: {                        ' json ',                        totalproperty: ' Total'                     }                }            });

The following is the complete code:

Ext.onready (function(){    //Ext.Msg.alert ("hint", "Hello world!!! ")Ext.define ("Mygridpanel", {/ * static data, can be obtained from the background * /griddata:[{ID:"1001", Name: "Wind", Tel: "18603073960"}, {ID:"1002", Name: "Xiao Yue", Tel: "18603073578"}, {ID:"1003", Name: "Deserted Snow", Tel: "18603073569"}, {ID:"1004", Name: "Silom", Tel: "18603073214"}, {ID:"1005", Name: "Morgana", Tel: "18603072568"}, {ID:"1006", Name: "Ali", Tel: "18603073247"}, {ID:"1001", Name: "Akali", Tel: "18603071563"}, {ID:"1001", Name: "Carter", Tel: "18603073960"}, {ID:"1001", Name: "Dead Song", Tel: "18603073960"},        ], //Save DataTotalCount:0,//total number of data barsPagesize:5,//number of bars to display per pageMystore:NULL,//the store data object that was createdMygridpanel:NULL,//Gridpanel ObjectGridfilds:[],//data column Model        /*Building a Gridpanel component*/Creategridpanel:function(){            /*Create column Data*/            varGridColumn =[{header:"User ID", Dataindex:"id", Width:100, hideable:false, sortable:true, draggable:false,}, {header:"User Name", Width:180, Dataindex:"Name", hideable:false, sortable:true, draggable:false,}, {header:"Phone Number", Flex:1, Dataindex:"Tel",              }]; varme = This;  for(vari = 0; i < gridcolumn.length; i++) {Me.gridFilds.push (gridcolumn[i].dataindex); }            /*building a store data*/Me.totalcount=me.gridData.length; Me.mystore= Ext.create ("Ext.data.Store", {fields:me.gridFilds, pageSize:me.pageSize,//specify 2 records per pageAutoLoad:true, Data:me.gridData, proxy: {type:' Pagingmemory ', Reader: {type:' JSON ', Totalproperty:' Total '                    }                }            }); varPicker = Ext.create ("Ext.grid.Panel", {store:me.mystore, columns:gridcolumn, layout:"Fit", Height:350, Enablecolumnhide:false, Sortablecolumns:false, AutoScroll:true, Columnlines:true, Nodefaultselect:true,//do not select the first row by defaultviewconfig:{striperows:true,//Show zebra crossing in table}, Dockeditems: [{xtype:' Pagingtoolbar ', Store:me.mystore, dock:' Bottom ', CLS:"Smallpagingtoolbar", Inputitemwidth:50, DisplayInfo:true, Dorefresh:function() {Me.refresh (); }}, {xtype:"Toolbar", Dock:"Top", Height:40, Style:"Padding-bottom:0;border-bottom:1px Solid #ddd!important", items: [{xtype:' TextField ', Name:' Fastkey ', Fieldlabel:Find, Labelwidth:40, LabelAlign:"Right", Emptytext:"No query to Data",//what appears on the right side of the page when no data is pagedwidth:230, listeners: {change:function(a) {/*Filter Query*/Me.filterdata (); }}}, {xtype:"Displayfield", Value:"Selectable Information ("}, {xtype:' Label ', Style:"Color:red", Text:me.totalCount, Name:"TotalCount"}, {xtype:"Displayfield", Value:") article"                    }, ","]                }]            }); returnPicker; }, Refresh:function(){            //empties the data from the filter input box,            varFastkey = This. Mygridpanel.query ("[Name= ' Fastkey ']") [0]; Fastkey.setvalue (""); /*Reload Data*/             This. Filterdata (); },        /*Filter Data*/Filterdata:function () {            varme = This; varFastkey = Me.myGridPanel.query ("[Name= ' Fastkey ']") [0]; varSearchvalue =Fastkey.getvalue (). toString (). toLowerCase (), NewData= [];//NewData Save the filtered data            if(Searchvalue = = "") {NewData=Me.griddata; } Else {                 for(vari = 0, len = me.gridData.length; i < Len; i++) {                     for(varj = 1, Jlen = me.gridFilds.length; J < Jlen; J + +) {                        if(Me.griddata[i][me.gridfilds[j]] && me.griddata[i][me.gridfilds[j]].tostring (). toLowerCase (). IndexOf ( Searchvalue) >= 0) {Newdata.push (me.griddata[i]);  Break; }                    }                }            }             /*Reload Data*/Me.myGridPanel.store.loadData (NewData); Me.myGridPanel.store.getProxy (). Data= NewData;//updating data in the cacheMe.myGridPanel.store.loadPage (1);//re-refreshMe.myGridPanel.query ("[Name= ' TotalCount ']") [0].settext (newdata.length); },        /*Create a form*/CreateWindow:function(){            /*Building Gridpanel Components*/            varme = This; Me.mygridpanel=me.            Creategridpanel (); varWin = Ext.create ("Ext.window.Window", {title:"Grid front Page paging", Width:500, Height:400, ID:"Mywindow", RenderTo:Ext.getBody (), items:me.myGridPanel});        Win.show ();    }    }); varMygridpanel = Ext.create ("Mygridpanel"); Mygridpanel. CreateWindow ();});

：

ExtJS Grid front page paging using Pagingmemoryproxy "two"