先看看sqllite的分页sql语句，堪称史上最简单语句，跟Ext Grid的分页参数，简直是天造地设的一对！
下面的sql表示查询从第n条到m条的记录
select xxx,xxx from xxx where xxx order by xxx limit n,m
是不是很简单？跟别的数据库比起来，简直是傻瓜式操作!
再看Ext Grid的分页参数
store.load({ params: { start: 0, limit: 5} });
表示返回从第0条，到第5条的记录!Ext Grid跟sqllite分页真是太般配了
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;
}下面的JS代码为页面第一次加载时，填充grid，并显示第0-5条的记录.
JS Code
//调用Webservice,返回热点列表,并填充grid
var 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 //隐藏该列
},
{ header: '热点名称(双击定位)', dataIndex: 'HOTSPOTNAME', sortable: true, width: 50 },
{ header: '经度', dataIndex: 'LONGITUDE', sortable: true, width: 40, hidden: true },
{ header: '纬度', dataIndex: 'LATITUDE', sortable: true, width: 40, hidden: true },
{ header: '海拔', dataIndex: 'ALTITUDE', sortable: true, width: 40, hidden: true }
]);
//数据源
var store = new Ext.data.Store({
//url: iisServer + 'GetHotSpotList', // Web Service 地址
url: 'http://localhost/WebServiceSqlite/DataService.asmx/GetHotSpotList',
//autoLoad: { params: { start: 0, limit: 5} },
reader: new Ext.data.XmlReader({
totalRecords: 'totalRecords', //后端返回的xml中，必须有这个字段，且必须是总记录数
//如果是json reader就用totalProperty: "results",
record: 'Table', // 数据。对应于 GetHotSpotList 返回的 DataSet 中的 Table 表
id: 'OID' // 主键。
},
[
{ name: 'OID' },
{ name: 'HOTSPOTNAME' },
{ name: 'LONGITUDE' },
{ name: 'LATITUDE' },
{ name: 'ALTITUDE' }
]),
remoteSort: true // 服务端排序
});
storeHotspotGrid = store;
var pagebar = new Ext.PagingToolbar({
pageSize: 5, //每页显示条数
store: store,
displayInfo: false,
doLoad: function (start) {
var txtSearchVal = Ext.get('txtSearchHotspot').dom.value;
store.baseParams = { hotspotName: txtSearchVal }; //除分页外的参数
var o = {}, pn = this.paramNames;
o[pn.start] = start;
o[pn.limit] = this.pageSize;
store.load({ params: o });
}
});
// GridPanel 组件
var grid = new Ext.grid.GridPanel({
frame: true,
enableHdMenu: false,
width: 290,
height: 245,
trackMouseOver: true,
loadMask: { msg: '正在加载数据，请稍侯……' },
renderTo: 'hotspotgrid',
store: store,
//sm:new Ext.grid.CheckboxSelectionModel({header: ""}),
cm: cm,
viewConfig: {
forceFit: true
},
bbar: pagebar,
//双击事件
listeners: {
"rowdblclick": function (grid, rowIndex, e) {
grid.getSelectionModel().each(function (rec) {
goToPosition(rec.get("LONGITUDE"), rec.get("LATITUDE"), rec.get("ALTITUDE"), 0, 0, 0)
var coord3D = explorer.Factory.CreateCoord3D();
_x = rec.get("LONGITUDE");
_y = rec.get("LATITUDE");
_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 }; //除分页外的参数
store.load({ params: { start: 0, limit: 5} }); //分页的时候这么写
hotspotGrid = grid;
}
必须注意分页控件的doLoad事件
doLoad: function (start) {
var txtSearchVal = Ext.get('txtSearchHotspot').dom.value;
store.baseParams = { hotspotName: txtSearchVal }; //除分页外的参数
var o = {}, pn = this.paramNames;
o[pn.start] = start;
o[pn.limit] = this.pageSize;
store.load({ params: o });
}下面为查询按钮的代码
Ext.onReady(function () {
Efs.getExt('btnSearchHotspot').on('click', function () {
var txtSearchVal = Ext.get('txtSearchHotspot').dom.value;
storeHotspotGrid.removeAll();
storeHotspotGrid.baseParams = { hotspotName: txtSearchVal }; //除分页外的参数
storeHotspotGrid.load({ params: { start: 0, limit: 5} }); //分页的时候这么写
Ext.get('txtSearchHotspot').dom.value = "";
}, this)
});
