extjs4 searchField的使用方法 及 remodeFiter 未定义问题的解决

先来看看效果吧，有点不好的地方就是只能由一个查询参数，不过有需求的话可以自己另设一个from表单来装查询参数

Js部分

1、在使用searchField的地方先设置这个插件的路径

Ext.Loader.setPath('Ext.ux', 'extjs/examples/ux');Ext.define('yang.view.sysManage.UserList', {extend : 'Ext.grid.Panel',alias : 'widget.userList',id : 'userList',title : '用户管理',

2、创建一个searchField对象，在yang.view.sysManage.UserList初始化方法里

var searchField = Ext.create('Ext.ux.form.SearchField', {store : userListStore,  //这个store和这个grid panel是同一个store。width : 205,emptyText : '请输入要查找的 username ......'});

然后再toolbar上添加一个这个item

3、在userListStore设置一下remoteFilter 及查询的参数，一下是store的全部源码，查询的关键部分加黑了

Ext.define('yang.store.sysManage.UserListStore', {extend : 'Ext.data.Store',model : 'yang.model.sysManage.UserListModel',pageSize : 5,autoLoad : true,remoteFilter : true,proxy : {type : 'ajax',url : adminFolder + '/listUser.do', // 提交的urlactionMethods : {read : 'POST' // 提交的方式是 POST方式},filterParam : 'name',reader : {type : 'json', // 读到的数据格式是json格式root : 'list', // 数据的根名是 resultListtotalProperty : 'totalCount' // 总记录数的根名是 totalCount}},sorters : [{property : 'id',direction : 'asc'}]});

然后是后台源码，应为列表和查询都在的同一个store了，所以后台需要判断后发查找数据库

@RequestMapping(value = "/listUser.do", method = RequestMethod.POST)@ResponseBodypublic String listUser(@RequestParam(value = "start") Integer offset,@RequestParam(value = "limit") Integer pageSize,@RequestParam(value = "name", required = false) String name) {if (offset == null) {offset = 1;}if (pageSize == null) {pageSize = 5;}String hql = null;PageUtil<User> userPage = null;System.out.println("name=" + name);if (name == null) {hql = "from User";userPage = this.userService.getPageData(hql, offset, pageSize);} else {hql = "from User u where u.name=?";userPage = this.userService.getPageData(hql, offset, pageSize, name);}JSONObject jsonObject = JSONObject.fromObject(userPage);return jsonObject.toString();}

常见问题：

1、出现 substring 错误是因为未引入该插件，只需在该文件引入一下

Ext.Loader.setPath('Ext.ux', 'extjs/examples/ux');

2、出现 remoteFilter 错误是因为这个插件使用的store里面的remoteFilter默认是false，需要设置成true，同时在proxy里面添加 filterParam，这个参数后台接受查询的参数。