Ext.js 分页查询及展示分析

最近工作上面用到的前端框架是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优雅的实现分页查询

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
评论 1

打赏作者

ljyll122

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值