Extjs搜索重置搜索框关于页码问题向后台传递排序参数向后台传递参数

最新推荐文章于 2022-09-17 11:42:03 发布

原创最新推荐文章于 2022-09-17 11:42:03 发布 · 603 阅读

0 ·

CC 4.0 BY-SA版权

Extjs学习专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了在ExtJS中进行搜索操作时如何组合和提交搜索参数，以及如何重置搜索框。讨论了页码问题，强调保持前后端每页数据一致的重要性。此外，还探讨了向后台传递排序参数和额外数据的方法，提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

技术点：搜索重置搜索框关于页码问题向后台传递排序参数向后台传递参数

一、搜索

1、根据后台所需字段向后台提交搜索条件数据

       var searchParams = {
            keyword: keyword,
            status: status
        } //组合要传递的参数
        store.paramsData = { //修改store的参数数据
            data:JSON.stringify(searchParams) //把对象解析为字符串
        };
        store.reload();//触发重新加载store刷新数据

2、关于要提交的数据的获取

a、方法一（获取整个form组件的ContextItem的values对象，然后分别获取需要的值）

        var Values = Ext.getCmp("infoForm").getValues();//获取查询条件，返回组件的ContextItem ，这里的infoForm是form组件的id
        var keyword = Values.keyword;//Values.keyword指向的是name
        var search_roleType = Values.roleType; 
        var search_memberStatus = Values.memberStatus;

b、方法二（根据具体的Id获取需要的数值）

        var statusCmp = self.down('#search_status');
        var keywordCmp = self.down('#search_keyword');
        var status = statusCmp.getValue();
        var keyword = keywordCmp.getValue();

二、重置搜索框内容

        roleTypeCmp.setValue(0);
        memberStatusCmp.setValue(0);      //select框xtype: 'combobox'
        keywordCmp.reset();        //输入框xtype: 'textfield'

三、关于页码问题

每页显示的数据要根据后台的数据来做相应的修改，不然页面上的翻页可能会出问题，建议前后台每页显示数据保持一致

控制 store的配置项 pageSize: 10

四、向后台传递排序参数（store的配置项）

remoteSort : Boolean

设置为 true 则将所有的排序操作推送到服务器. 如果设置为 false, 则在客户端本地排序.

五、向后台传递数据

var url = service.snsadmin.user.addCommenter;  //请求的路径
var val = {  //要传递的数据
     commenterName:commenterName,
     commenterMobile:commenterMobile
};
MyApp.Basic.ajaxReq(url, val, function () {
        Ext.toast({          //弹出提示信息
            html: "信息已添加到白名单！",
            closable: false,
            align: 't',
            slideInDuration: 400,
            minWidth: 400
        });
        Ext.getCmp("paging").doRefresh(); //刷新页面
});