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，這個引數後臺接受查詢的引數。