ExtJS中从WebService获取数据保存到本地，填充GridPanel实现静态数据分页

var Data;
//存储获取的数据
var DataStore;
//数据存储器
var Pager;
//分页器
var PerCount;
//每页的数据量
var Grid;
//GridPanel容器
function GetDataFromWebService()//从WebService获取数据
{
Ext.Ajax.request(
{
url:'WebService.asmx/GetData',
method:'POST',
jsonData:
{
Parameter1:‘参数值’
}
,
success:OnGetDataSuccess,
failure:OnGetDataFail
}
);
}
function OnGetDataSuccess(request,options)//数据获取成功
{
Data=Ext.util.JSON.decode(request.responseText);
//将获取的Json数据格式化
DataStore.loadData(GetPagerData(Data),false);
DataStore.load();
//这个很重要
Pager.doLoad(0);
//这个很重要
}
function OnGetDataFail(request,options)//获取数据失败
{
alert('失败了！');
}
function GetPagerData(InData)//从静态数据中获取每页的数据
{
var TempData=//为什么要用'd'作为json数据的根，因为从WebService获取Json数据经查看就是以'd'为根的
{
'd':[]
};
if(InData.length>PerCount)
{
for(var i=0;i<=PerCount-1;i++)
{
TempData.d.push(InData.d[i]);
}
}
else
{
for(var i=0;i<=InData.d.length-1;i++)
{
TempData.d.push(InData.d[i]);
}
}
return TempData;
}
function SerGrid();
{
Data=//获取数据之前的Loading数据
{
'd':[
{
'字段1':'数据载入中','字段2':'数据载入中','字段3':'数据载入中','字段4':'数据载入中','字段5':'数据载入中'
}
]
};
DataStore=new Ext.data.Store(
{
//数据存储器
proxy:new Ext.data.MemoryProxy(GetPagerData(Data)),
reader:new Ext.data.JsonReader(
{
root:'d'
},
[
{
name:'字段1'
},
{
name:'字段2'
},
{
name:'字段3'
},
{
name:'字段4'
},
{
name:'字段5'
}
])
});
var ColM=new Ext.grid.ColumnModel(//行定义器
[
{
header:"字段显示名1",dataIndex:"字段1"，sortable:true
},
{
header:"字段显示名2",dataIndex:"字段2",sortable:true
},
{
header:"字段显示名3",dataIndex:"字段3",sortable:true
},
{
header:"字段显示名4",dataIndex:"字段4",sortable:true
},
{
header:"字段显示名5",dataIndex:"字段5",sortable:true
}
]);
Pager=new Ext.PagingToolbar(
{
id:'Grid_Pager',
pageSize:PerCount,
store:DataStore,
displayInfo:true,
paramNames:
{
start:'start',limit:'limit',cid:'cid'
},
displayInfo:true,
displayMsg:'显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg:'没有数据',
updateInfo:function ()//重写UpdateInfo
{
if(this.displayEl)
{
var count=this.store.getCount();
var msg=count==0?this.emptyMsg:String.format(this.displayMsg,this.cursor+1,Math.min(this.cursor+this.pageSize-1,Data.d.length-1)+1,Data.d.length);
this.displayEl.update(msg);
}
},
onLoad:function (store,r,o)//重写OnLoad
{
if(!this.rendered)
{
this.dsLoaded=[store,r,o];
return ;
}
var d=this.getPageData(),ap=d.activePage,ps=d.pages;
this.afterTextEl.el.innerHTML=String.format(this.afterPageText,d.pages);
this.field.dom.value=ap;
this.first.setDisabled(ap==1);
this.prev.setDisabled(ap==1);
this.next.setDisabled(ap==ps);
this.last.setDisabled(ap==ps);
this.loading.enable();
this.updateInfo();
},
doLoad:function (start)//重写doLoad
{
var TempData=
{
'd':[]
};
var i=0;
var len=this.pageSize;
for(i=0;i<len;i++)
{
if(Data.d[start+i]!=null)
{
TempData.d.push(Data.d[start+i]);
}
}
this.store.loadData(TempData,false);
},
getPageData:function ()//重写getPageData
{
var total=Data.d.length;
return
{
total:total,
activePage:Math.ceil((this.cursor+this.pageSize)/this.pageSize),
pages:total<this.pageSize?1:Math.ceil(total/this.pageSize)
};
},
onClick:function (which)//重写onClick
{
switch(which)
{
case "first":
this.doLoad(0);
break;
case "prev":
var t=this.cursor;
this.cursor=Math.max(0,t-this.pageSize);
this.doLoad(Math.max(0,t-this.pageSize));
break;
case "next":
var t=this.cursor;
this.cursor=t+this.pageSize;
this.doLoad(t+this.pageSize);
break;
case "last":
var total=Data.d.length;
var extra=total%this.pageSize;
var lastStart=extra?(total-extra):total-this.pageSize;
this.cursor=extra?(total-extra):total-this.pageSize;
this.doLoad(lastStart);
break;
case "refresh":
var t=this.cursor;
this.cursor=t;
this.doLoad(t);
break;
}
}
});
Grid=new Ext.grid.GridPanel(
{
cm:ColM,
sm:new Ext.grid.RowSelectionModel(
{
singleSelect:true
}),
store:DataStore,
loadMask:
{
msg:'正在统计，请稍候.'
},
id:'Grid',
title:'Grid',
autoHeight:true,
autoWidth:true,
bbar:Pager
});
DataStore.load();
//这个很重要，用来显示Loading数据
}
funtionMain()
{
Grid.render(Ext.getBody());
GetDataFromWebService();
}



主要的两个步骤就是重写GridPanel和从WebService获取数据

这样就可以实现静态Json数据在GridPanel里的分页了

我的WebService里输出的是一个Linq查询的ToList,Json数据的根为'd',其他的没有测试过

不过相信DataSet等类型只要稍加修改同样有效