最近工作上面用到的前端框架是EXT.js,最近收到一个问题,分页查询总是走不到下一页。
现将分析过程记录如下:
**ext三大件:**Model、Proxy、Store。早期的版本应该有些出入
1.Ext.data.Model
Model可以看做是一个数据实例
2.Ext.data.store
store 用来装载 Ext.data.Model 数据,一般通过Ext.data.proxy.Proxy方式。
3.Ext.data.proxy
Ext的数据加载方式
早期的Ext同样可以从这三方面着手分析:
早期的Ext版本没有Model的概念,替代的是Record Object。其数据源格式分为:
GridPanel, ComboBox, DataView,reader做为其配置项处理Record类型数据。 Proxy 同样也作为data的配置项。如下:
store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: '/ServiceAction/com.eweaver.workflow.request.servlet.QueryRequestBaseAction?action=<%=action%>',
timeout: 180000 //加载的超时时间
}),
//通过JsonReader创建一个Record实例
reader: new Ext.data.JsonReader({
root: 'result',
totalProperty: 'totalcount',
fields: ['ID','REQUESTNAME','OBJNO','workflowname','CREATER','CREATEDATETIME','finishtime','nodename','isfinishedname','requestoperators','detail','remindno']
})
});
1.store提供加载数据的通道。 官网释义如下:
The Store class encapsulates a client side cache of Record objects which provide input data for Components such as the GridPanel, the ComboBox, or the DataView
2.record提供数据的实例。官网比较明确有一段释义如下
Constructors for this class are generated by passing an Array of field definition objects to create. Instances are usually only created by Ext.data.Reader implementations when processing unformatted data objects.
其装载方式可以通过Ext.data.DataReader来实现
例如 Ext.data.jsonReader(继承自Ext.data.DataReader)
Data reader class to create an Array of Ext.data.Record objects from a JSON response based on mappings in a provided Ext.data.Record constructor.
3.Ext.Component提供数据的交互以及展现形式(组件)
如上所说,包括GridPanel, ComboBox, DataView等等
综上,认识一个前端的框架个人理解需要明白以下三点:
1.明确其前端数据流承载形式
(注意并不是表现形式,表现形式侧重于怎样展现,可以理解为本例store类的通道)
2.明确其前端数据流的加载方式
(类似于ajx等方式)
3.多认识其交互以及表现方式
(就是所说的组件)
extjs 使用 PaggingToolBar 实现分页查询,这边就不再多分析这个组件了。值得注意的是其分页查询原理
这边只说一下mysql 和sqlserver
mysql:
使用limit 实现
select * from user order by id asc limit 10000,10
sqlserver:
使用top嵌套
select top(pagesize) * from tables t where t.id not in (select top(pageindex * pagesize) t.id from table order by column)
order by column
分页查询的前提是有序性和不重复
参考:
1.extjs官网
2.extjs 2.3.0官网
3.Mysql优雅的实现分页查询