这学期一直在做一个管理系统，前台用到了ExtJs，现在开始总结这一学期的学习心得，首先我们从Ext.ux.form.SearchField开始讲，因为这个东西一直困扰我好长时间，直到项目结束前几天我才解决这个问题。
首先我们先附上Ext.ux.form.SearchField的源代码：
view plaincopy to clipboardprint?/*! * Ext JS Library 3.2.0 * Copyright(c) 2006-2010 Ext JS, Inc. * licensing@extjs.com * http://www.extjs.com/license */ Ext.ns('Ext.ux.form'); Ext.ux.form.SearchField = Ext.extend(Ext.form.TwinTriggerField, { initComponent : function(){ Ext.ux.form.SearchField.superclass.initComponent.call(this); this.on('specialkey', function(f, e){ if(e.getKey() == e.ENTER){ this.onTrigger2Click(); } }, this); }, validationEvent:false, validateOnBlur:false, trigger1Class:'x-form-clear-trigger', trigger2Class:'x-form-search-trigger', hideTrigger1:true, width:180, hasSearch : false, paramName : 'query', onTrigger1Click : function(){ if(this.hasSearch){ this.el.dom.value = ''; var o = {start: 0}; this.store.baseParams = this.store.baseParams || {}; this.store.baseParams[this.paramName] = ''; // this.store.reload({params:o}); this.store.reload(); this.triggers[0].hide(); this.hasSearch = false; } }, onTrigger2Click : function(){ var v = this.getRawValue(); if(v.length < 1){ this.onTrigger1Click(); return; } var o = {start: 0}; this.store.baseParams = this.store.baseParams || {}; this.store.baseParams[this.paramName] = v; // this.store.reload({params:o}); this.store.reload(); this.hasSearch = true; this.triggers[0].show(); } }); /*! * Ext JS Library 3.2.0 * Copyright(c) 2006-2010 Ext JS, Inc. * licensing@extjs.com * http://www.extjs.com/license */Ext.ns('Ext.ux.form');Ext.ux.form.SearchField = Ext.extend(Ext.form.TwinTriggerField, { initComponent : function(){ Ext.ux.form.SearchField.superclass.initComponent.call(this); this.on('specialkey', function(f, e){ if(e.getKey() == e.ENTER){ this.onTrigger2Click(); } }, this); }, validationEvent:false, validateOnBlur:false, trigger1Class:'x-form-clear-trigger', trigger2Class:'x-form-search-trigger', hideTrigger1:true, width:180, hasSearch : false, paramName : 'query', onTrigger1Click : function(){ if(this.hasSearch){ this.el.dom.value = ''; var o = {start: 0}; this.store.baseParams = this.store.baseParams || {}; this.store.baseParams[this.paramName] = ''; // this.store.reload({params:o}); this.store.reload(); this.triggers[0].hide(); this.hasSearch = false; } }, onTrigger2Click : function(){ var v = this.getRawValue(); if(v.length < 1){ this.onTrigger1Click(); return; } var o = {start: 0}; this.store.baseParams = this.store.baseParams || {}; this.store.baseParams[this.paramName] = v; // this.store.reload({params:o}); this.store.reload(); this.hasSearch = true; this.triggers[0].show(); }});
从源代码中我们看到我注视了一行：
view plaincopy to clipboardprint?// this.store.reload({params:o}); // this.store.reload({params:o});
这个参数是用于分页的，我实际的项目中，分页用到了2个参数，分别是start和limit，但是这里只有start，因此如果reload只传start会报错，而且我通过测试发现，reload方法不需要传递参数，他它自动会使用原来的分页参数start和limit。
看到这个搜索框，我们一般可能会想，这个搜索控件是如何给后台传递参数的呢？从源代码中我们看到有一行
view plaincopy to clipboardprint?paramName : 'query', paramName : 'query',
当我们在搜索控件中输入查询条件，这个查询条件会赋值给query，查询条件就是通过这个参数名为query来传递的。我们在后台可以通过以下方式获取搜索条件中的文本：
view plaincopy to clipboardprint?String query=request.getParameter("query"); String query=request.getParameter("query");
得到搜索条件以后我们就可以使用这个搜索条件查询数据库了。
下面我附上前台的ExtJs中使用SearchField的代码。
首先定义工具栏，定义如下：
view plaincopy to clipboardprint?var toolbar = new Ext.Toolbar( [ {// 创建GridPanel的工具栏组件 text : '新增员工信息', iconCls : 'add', handler : addUser }, { text : '删除员工信息', iconCls : 'remove', handler : deleteUser }, { text : '修改员工信息', iconCls : 'plugin', handler : updateUser } , '-','查询：',' ', new Ext.ux.form.SearchField( { store : userStore, width : 110 }) ]); var toolbar = new Ext.Toolbar( [ {// 创建GridPanel的工具栏组件 text : '新增员工信息', iconCls : 'add', handler : addUser }, { text : '删除员工信息', iconCls : 'remove', handler : deleteUser }, { text : '修改员工信息', iconCls : 'plugin', handler : updateUser } , '-','查询：',' ', new Ext.ux.form.SearchField( { store : userStore, width : 110 }) ]);
然后在grid中使用该工具栏：
view plaincopy to clipboardprint?var userGrid = new Ext.grid.GridPanel( {// 创建Grid表格组件 applyTo : 'user-grid-div',// 设置表格现实位置 frame : true,// 渲染表格面板 tbar : toolbar,// 设置顶端工具栏 stripeRows : true,// 显示斑马线 autoScroll : true,// 当数据查过表格宽度时，显示滚动条 store : userStore,// 设置表格对应的数据集 viewConfig : {// 自动充满表格 autoFill : true }, sm : sm,// 设置表格复选框 cm : cm,// 设置表格的列 bbar : new Ext.PagingToolbar( { pageSize : 25, store : userStore, displayInfo : true, displayMsg : '显示第{0}条到{1}条记录,一共{2}条记录', emptyMsg : '没有记录' // ,items:['-',new Ext.app.SearchField({store:userStore})] }) }); var userGrid = new Ext.grid.GridPanel( {// 创建Grid表格组件 applyTo : 'user-grid-div',// 设置表格现实位置 frame : true,// 渲染表格面板 tbar : toolbar,// 设置顶端工具栏 stripeRows : true,// 显示斑马线 autoScroll : true,// 当数据查过表格宽度时，显示滚动条 store : userStore,// 设置表格对应的数据集 viewConfig : {// 自动充满表格 autoFill : true }, sm : sm,// 设置表格复选框 cm : cm,// 设置表格的列 bbar : new Ext.PagingToolbar( { pageSize : 25, store : userStore, displayInfo : true, displayMsg : '显示第{0}条到{1}条记录,一共{2}条记录', emptyMsg : '没有记录' // ,items:['-',new Ext.app.SearchField({store:userStore})] }) });
搜索控件不一定非要放在toolbar上，这个可以根据个人需要设定。
