ExtJS Grid front page paging using Pagingmemoryproxy "two"

Source: Internet
Author: User

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"

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.