Ext.net Study notes 13:ext.net Gridpanel Sorter usage

Ext.net Study notes 13:ext.net Gridpanel Sorter usage

This note will show you how to use the sorter in Ext.net Gridpanel.

By default, the columns in Ext.net gridpanel have a sort function, with the following effects:

If you want to disable column sorting, you need to add a property sortable= "false" in the column model

Client sort

Sorting is the operation on the store. If we want to add a sort to a store, we can use the following configuration:

<sorters>    <ext:propertyDirection= "DESC" ></ext:  Datasorter></sorters>           

With this code, our store will be sorted before the display. The effect is as follows:

Server-side sequencing

By default, sorting is done on the client, and no remote requests are made. If the store loads all the data at once, there is no problem with the client sort, and if store is paging asynchronously loading the data, then this sort will not be enough, and we need to sort asynchronously.

Let's change the store to an asynchronous paging store with the following code:

<Ext:StoreRunat= "Server"Id= "Storeuserinfo"PageSize= "5"Remotesort= "true"Onreaddata= "Storeuserinfo_readdata" > <Model> <Ext:ModelId= "Userinfomodel"Runat= "Server"Idproperty= "ID" > <Fields> <Ext:ModelfieldName= "ID"Type= "Int" ></Ext:Modelfield> <Ext:ModelfieldName= "Name"Type= "String" ></Ext:Modelfield> <Ext:ModelfieldName= "Gender"Type= "String" ></Ext:Modelfield> <Ext:ModelfieldName= "Age"Type= "Int" ></Ext:Modelfield> </Fields> </Ext:Model> </Model> <Proxy> <Ext:Pageproxy></Ext:pageproxy> </Proxy< Span style= "color:blue;" >> <>  <  ext:datasorter Property= "Name" =" DESC "></ ext:datasorter  > </sorters></ ext:store >             

We modified the store by adding the Remotesort attribute, indicating whether to sort remotely, then adding the default collation, the property representing the sort field, and direction representing the sort direction (positive, reverse)

The Onreaddata event is handled in the following way:

Storeuserinfo_readdata (sender, ext.net.  UserInfo. GetData (); E.total = Userinfolist.count; Storeuserinfo.datasource = Userinfolist.skip (start). Take (limit). ToList (); Storeuserinfo.databind ();}  

The above code just completes the store's asynchronous paging, if you want our store for server-side sorting, you also need to modify the ReadData event handling method, add the sort code:

Related code for handling sortingIf(E.sort.count () > 0) {Foreach(VarItemInchE.sort) {Switch(item. property) {Case"Name": Userinfolist.sort ((U1, U2) + = {Switch(item. Direction) {CaseExt.net.SortDirection. Default:CaseExt.net.SortDirection. Asc:Default:return string. Compare (U1. Name, U2. Name);CaseExt.net.SortDirection. DESC:Return2 OString. Compare (U1. Name, U2. Name); } });Break;Case"Age": Userinfolist.sort ((U1, U2) + = {switch ext.net. Sortdirectioncase ext.net. Sortdirectiondefaultreturn u1. Age-u2. Age; case ext.net. Sortdirectionreturn u2. Age-u1. Age; } }); break       

In this piece of code, item. The property represents the Sort field; item. Direction indicates the sort direction.

If you use sort in. ashx, you can construct a request parameter and then sort it using the code above:

Storerequestparameters (context); //Use prms. Sort[0]. Property and Prms. Sort[0]. Direction

A request parameter is constructed from the context and the sort array inside the parameter can be obtained.

Ext.net Study notes 13:ext.net Gridpanel Sorter usage