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', // 提交的url
				actionMethods : {
					read : 'POST' // 提交的方式是 POST方式
				},
				
				filterParam : 'name',
				reader : {
					type : 'json', // 读到的数据格式是json格式
					root : 'list', // 数据的根名是 resultList
					totalProperty : 'totalCount' // 总记录数的根名是 totalCount
				}
			},
			sorters : [{
						property : 'id',
						direction : 'asc'
					}]
		});

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

@RequestMapping(value = "/listUser.do", method = RequestMethod.POST)
	@ResponseBody
	public 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，这个参数后台接受查询的参数。