Ext js gridpanel + sqllite + query page

Let's take a look at sqllite's paging SQL statement, which is the simplest statement in history. It's just like the paging parameter of ext grid!

The following SQL statement queries records from N to M.

SelectXXX, xxxFromXxxWhereXxxOrderXxxLimit n, m

Is it easy? Compared with other databases, it is a silly operation!

Let's look at the page parameters of ext grid.

Store. Load ({Params: {start: 0, limit: 5 }});

Returns the number of records from 0th to 5th! EXT grid and sqllite paging are awesome

WebService code:

        [WebMethod]        public DataSet GetHotSpotList(int start, int limit ,string hotspotName)        {            var condition = "";            condition = string.IsNullOrEmpty(hotspotName) ? "" : " and HOTSPOTNAME like '%" + hotspotName + "%'";            var ds = SqliteHelper.ExecuteDataset("select *,(select count(*) from CONF_3DGIS_HOTSPOT where 1=1 " + condition +                " ) as totalRecords from CONF_3DGIS_HOTSPOT where 1=1 " + condition + " order by OID" + " limit " + start + "," + limit, null);            return ds;        }

Note that there is a field alias "totalrecords", and the total number of records is returned, because the ext grid at the front end needs to get this number to display the page

The following JS Code fills in the grid when the page is loaded for the first time and displays the 0-5 record.

JS Code

// Call WebService, return to the hotspot list, and fill in gridvar fillhotspotgrid = function () {Ext. getdom ("hotspotgrid "). innerhtml = ""; var CM = new Ext. grid. columnmodel ([New Ext. grid. checkboxselectionmodel (), {handlemousedown: ext. emptyfn, header: "oid", dataindex: "oid", width: 20, sortable: True, hidden: True // hide this column}, {header: 'Hot spot name (double-click positioning) ', dataindex: 'hotspotname', sortable: True, width: 50}, {header: 'longitude', dataindex: 'Longenough ', sortable: True, width: 40, hidden: true}, {header: 'latitude', dataindex: 'latitude ', sortable: True, width: 40, hidden: true },{ header: 'aliyange', dataindex: 'aliytude', sortable: True, width: 40, hidden: true}]); // data source var store = new Ext. data. store ({// URL: iisserver + 'gethotspotlist', // URL of the web service address: 'http: // localhost/webservicesqlite/dataservice. asmx/gethotspotlist ', // autoload: {Params: {start: 0, limit: 5 }}, reader: New Ext. data. xmlreader ({totalrecords: 'totalrecords ', // this field must be included in the XML returned by the backend and must be the total number of records. // if it is a JSON reader, totalproperty is used: "Results", record: 'table', // data. Table ID in the dataset returned by gethotspotlist: 'id' // primary key. }, [{Name: 'id'}, {Name: 'hotspotname'}, {Name: 'longyun'}, {Name: 'latitude '}, {Name: 'allowtude'}]), remotesort: True // server order}); storehotspotgrid = store; var pagebar = new Ext. pagingtoolbar ({pagesize: 5, // number of entries per page: store, displayinfo: false, doload: function (start) {var txtsearchval = ext. get ('txtsearchhotspot '). dom. value; store. baseparams = {hotspotname: txtsearchval }; // Parameters except paging var o ={}, Pn = This. paramnames; O [pn. start] = start; O [pn. limit] = This. pagesize; store. load ({Params: O}) ;}}); // gridpanel component VaR grid = new Ext. grid. gridpanel ({frame: True, enablehdmenu: false, width: 290, height: 245, trackmouseover: True, loadmask: {MSG: 'loading data. Please wait ...... '}, Renderto: 'hotspotgrid', store: store, // SM: New Ext. grid. checkboxselectionmodel ({header: ""}), CM: cm, viewconfig: {forcefit: true}, bbar: pagebar, // double-click the event listeners: {"rowdblclick ": function (grid, rowindex, e) {grid. getselectionmodel (). each (function (REC) {gotoposition (Rec. get ("longpolling"), REC. get ("latitude"), REC. get ("altitude"), 0, 0, 0) var coord3d = explorer. factory. createcoord3d (); coord3d. eu_x = rec. get ("longpolling"); coord3d. eu_y = rec. get ("latitude"); coord3d. eu_z = rec. get ("altitude"); Hotpoint = coord3d; windowflags = 1; if (hotspotlayer = NULL) {createhotspotlayer ("Hotspot");} hotspotlayer. clear (); drawvectorpoint (coord3d) ;}}}); storehotspotgrid. removeall (); store. removeall (); var txtsearchval = ext. get ('txtsearchhotspot '). dom. value; store. baseparams = {hotspotname: txtsearchval}; // The parameter store except paging. load ({Params: {start: 0, limit: 5 }}); // when paging is performed, this writes hotspotgrid = grid ;}

Note that the parameters of the data source store, store. baseparams, in the preceding example, are the query conditions entered in the text box. This parameter cannot be written together with the paging parameters.Before store. Load!

Note the doload event of the paging control.

Doload: function (start) {var txtsearchval = ext. get ('txtsearchhotspot '). dom. value; store. baseparams = {hotspotname: txtsearchval}; // parameter var o ={}, Pn = this except paging. paramnames; O [pn. start] = start; O [pn. limit] = This. pagesize; store. load ({Params: O });}

You still need to write the query parameters and paging parameters above and load the data source. Otherwise, clicking the flip button will not have any effect.

The code for the query button is as follows:

Ext. onready (function () {EFS. getext ('btnsearchhotspot '). on ('click', function () {var txtsearchval = ext. get ('txtsearchhotspot '). dom. value; storehotspotgrid. removeall (); storehotspotgrid. baseparams = {hotspotname: txtsearchval}; // The parameter storehotspotgrid except paging. load ({Params: {start: 0, limit: 5}); // write ext in paging mode. get ('txtsearchhotspot '). dom. value = "" ;}, this )});

First, clear the data of the data source, then re-pass the parameters and paging, and finally clear the query text box to facilitate the next input.