Use Ext. Extend: Use ext's jsonreader to read local data and implement grid Paging

Paging is basically an eternal topic for web programmers. fortunately, no matter what development language we have a lot of controls to use. there are also paging controls in ext, but the official example is to use scripttagproxy, while the vast majority of online examples are either scripttagproxy or httpproxy for data loading. however, in many cases, we must not load local data (for example, when two people use interfaces for development ), the following describes how to use jsonreader to read local data and implement grid paging.

To implement this function, pay attention to the following issues:

1. You need to customize related data acquisition functions (Button events such as the first page and the last page ).

2. Define the total number of paging controls (because by default, the paging control loads all data of the store, so that our function cannot be implemented ).

The above two problems are basically the main problems with paging controls (the same problem was previously solved with A. Net paging control)

 

First, because we want to customize button events, we use the extended pagingtoolbar method to override related events.

Ext. pagingtoolbarex = ext. Extend (ext. pagingtoolbar ,{
Onclick: function (which ){
VaR store = This. store;
Switch (which ){
Case "first ":
// This. doload (0); // custom function for getting data
Break;
Case "Prev ":
This. doload (math. Max (0, this. cursor-this.pageSize ));
Break;
Case "Next ":
Alert (); // custom function for getting data
Break;
Case "last ":
VaR Total = store. gettotalcount ();
VaR extra = Total % This. pagesize;
VaR laststart = extra? (Total-extra): total-this.pageSize;
This. doload (laststart );
Break;
Case "refresh ":
This. doload (this. cursor );
Break;
}
}

});

Then construct the related controls. The Code is as follows:

Ext. onready (function (){
VaR student = new Ext. Data. Record. Create ([
{Name: 'id '},
{Name: 'name '},
{Name: 'email '},
{Name: 'sex '},
{Name: 'borndate', dateformat: 'y, month, dday '}
]);
VaR DATA = {"totalcount": "54671", 'root ':[{
ID: 1,
Name: 'wang ',
Sex: 'male ',
Email: 'xiaowang @ abc.com ',
Borndate: '2017-4-4'
},{
ID: 2,
Name: 'lily ',
Sex: 'male ',
Email: 'xiaoli @ abc.com ',
Borndate: '2017-5-6'
},{
ID: 3,
Name: 'Alan ',
Sex: 'female ',
Email: 'xiaolan @ abc.com ',
Borndate: '2017-3-7'
}]};

VaR store = new Ext. Data. Store ({
Idproperty: 'id ',
Proxy: New Ext. Data. memoryproxy (data ),
Reader: New Ext. Data. jsonreader ({
Root: 'root', totalproperty: 'totalcount' // used to specify the paging control property to solve the second problem
}, Student)
});

VaR pagingbar = new Ext. pagingtoolbarex ({
Pagesize: 10,
Store: store,
Displayinfo: True,
Displaymsg: 'display records from {0} to {1}, total records from {2 ',
Emptymsg: "No record ",
Onclick: function (witch) {alert (witch );},
Items :[
'-',{
Pressed: True,
Enabletoggle: True,
Text: 'Show preview ',
CLS: 'x-BTN-text-Icon details ',
Togglehandler: function (BTN, pressed ){
VaR view = grid. getview ();
View. showpreview = pressed;
View. Refresh ();
}
}]
});

VaR CM = new Ext. Grid. columnmodel ([{
Header: 'id ',
Dataindex: 'id ',
Sortable: True,
Editor: New Ext. Form. textfield ()
},{
Header: 'name ',
Dataindex: 'name ',
Sortable: True,
Editor: New Ext. Form. textfield ()
},{
Header: 'gender ',
Dataindex: 'sex ',
Editor: New Ext. Form. ComboBox ({
Transform: 'sexlist ',
Triggeraction: 'all ',
Lazyrender: True,
Hiddenname: 'sexlist'
})},{
Header: 'email ',
Dataindex: 'email ',
Sortable: True,
Editor: New Ext. Form. textfield ()
},{
Header: 'birthday ',
Dataindex: 'borndate ',
Width: 120,
Renderer: Ext. util. format. daterenderer ('y, M, dday '),
Editor: New Ext. Form. datefield ({format: 'y, M, dday '})
}]);
VaR grid = new Ext. Grid. editorgridpanel ({
Renderto: 'LIST ',
Title: 'student basic information management ',
Height: 200,
Width: 800,
CM: cm,
Store: store,
Clickstoedit: 1,
Tbar: [{text: "New Record" },{ text: "delete record"}],
Bbar: pagingbar
});
Grid. Render ();
Store. Load (); // load data
});