[ExtJs] gird Store ajax 分页过滤查询

29号同学

于 2019-09-12 18:23:59 发布

阅读量6.7k

点赞数

分类专栏： ExtJS Web前端前端文章标签： ExtJS grid分页 store分页加载分页加载

本文链接：https://blog.csdn.net/ZYD45/article/details/100779583

版权

本文介绍了在使用ExtJS时，如何实现Grid Store的Ajax分页和过滤查询。首先定义了一个远程查询的Store，然后在前端控件如Grid中设置过滤处理，通过在Grid上添加文本框进行查询。服务端接收到过滤条件后，构造查询语句进行处理。对于Grid分页，由于返回的总页数不准确会导致显示大量空白页，因此建议在查询时同时获取总条数，确保分页正确。此外，还讨论了List控件的分页加载情况。

摘要由CSDN通过智能技术生成

在处理一些大量数据时，往往用到查询，但是大量数据不适合全部查出，最好是分页查出，分页时还想有些参数过滤下，如下效果

First 定义一个远端查询的store

Ext.define('项目包名.路径.store类名', {
    extend: 'Ext.data.Store',
    alias: 'store.remoteDemo',//指定store的别名
    idProperty: '列名',
    fields: [
    //fields配置参数
    ],
    remoteSort: true,//重要 指定远端排序
    remoteFilter: true,//!!重要 指定远端过滤
    pageSize:20,//指定一页行数 默认是25
     
    proxy: {
        type: 'ajax',//指定代理为ajax 通过服务端处理
        api: 'url地址'
    }
 
});

Second 前端控件引用store，并写好过滤处理

例如grid控件：在grid控件上放个可输入的文本框用于远端查询过滤

{
    xtype:'grid',
    items:[
        {
            xtype:'toolbar',
            itemId:'tbar',
            docked: 'top',
            items:[
                {
                    xtype:'textfield',
                    name:'paramA',//自定义要查询的参数的key 
                    role: 'filter',//可以设置一个role字段来标识
                    placeholder:'查询条件1'
                },
                {
                    xtype:'textfield',
                    name:'paramB',
                    role: 'filter',
                    placeholder:'查询条件2'
                },
                {
                    xtype:'button',
                    text:'查询',
                    handler:'onSearch'//当点击查询时调用store的过滤查询
                }
            ]
        }