Ext.ux.form.SearchField使用方法

   这学期一直在做一个管理系统，前台用到了ExtJs，现在开始总结这一学期的学习心得，首先我们从Ext.ux.form.SearchField开始讲，因为这个东西一直困扰我好长时间，直到项目结束前几天我才解决这个问题。

首先我们先附上Ext.ux.form.SearchField的源代码：

[c-sharp]  view plain copy print ?

1. /*! 
2.  * Ext JS Library 3.2.0 
3.  * Copyright(c) 2006-2010 Ext JS, Inc. 
4.  * licensing@extjs.com 
5.  * http://www.extjs.com/license 
6.  */  
7. Ext.ns('Ext.ux.form');  
8. Ext.ux.form.SearchField = Ext.extend(Ext.form.TwinTriggerField, {  
9.     initComponent : function(){  
10.         Ext.ux.form.SearchField.superclass.initComponent.call(this);  
11.         this.on('specialkey', function(f, e){  
12.             if(e.getKey() == e.ENTER){  
13.                 this.onTrigger2Click();  
14.             }  
15.         }, this);  
16.     },  
17.     validationEvent:false,  
18.     validateOnBlur:false,  
19.     trigger1Class:'x-form-clear-trigger',  
20.     trigger2Class:'x-form-search-trigger',  
21.     hideTrigger1:true,  
22.     width:180,  
23.     hasSearch : false,  
24.     paramName : 'query',  
25.     onTrigger1Click : function(){  
26.         if(this.hasSearch){  
27.             this.el.dom.value = '';  
28.             var o = {start: 0};  
29.             this.store.baseParams = this.store.baseParams || {};  
30.             this.store.baseParams[this.paramName] = '';  
31.         //    this.store.reload({params:o});  
32.             this.store.reload();  
33.             this.triggers[0].hide();  
34.             this.hasSearch = false;  
35.         }  
36.     },  
37.     onTrigger2Click : function(){  
38.         var v = this.getRawValue();  
39.         if(v.length < 1){  
40.             this.onTrigger1Click();  
41.             return;  
42.         }  
43.         var o = {start: 0};  
44.         this.store.baseParams = this.store.baseParams || {};  
45.         this.store.baseParams[this.paramName] = v;  
46.       //  this.store.reload({params:o});  
47.         this.store.reload();  
48.         this.hasSearch = true;  
49.         this.triggers[0].show();  
50.     }  
51. });  

 

从源代码中我们看到我注视了一行：

[c-sharp]  view plain copy print ?

1. //    this.store.reload({params:o});  

 

这个参数是用于分页的，我实际的项目中，分页用到了2个参数，分别是start和limit，但是这里只有start，因此如果reload只传start会报错，而且我通过测试发现，reload方法不需要传递参数，他它自动会使用原来的分页参数start和limit。

      看到这个搜索框，我们一般可能会想，这个搜索控件是如何给后台传递参数的呢？从源代码中我们看到有一行

[c-sharp]  view plain copy print ?

1. paramName : 'query',  

 

当我们在搜索控件中输入查询条件，这个查询条件会赋值给query，查询条件就是通过这个参数名为query来传递的。我们在后台可以通过以下方式获取搜索条件中的文本：

[c-sharp]  view plain copy print ?

1. String query=request.getParameter("query");  

 

得到搜索条件以后我们就可以使用这个搜索条件查询数据库了。

 

下面我附上前台的ExtJs中使用SearchField的代码。

首先定义工具栏，定义如下：

[c-sharp]  view plain copy print ?

1. var toolbar = new Ext.Toolbar( [ {// 创建GridPanel的工具栏组件  
2.         text : '新增员工信息',  
3.         iconCls : 'add',  
4.         handler : addUser  
5.     }, {  
6.         text : '删除员工信息',  
7.         iconCls : 'remove',  
8.         handler : deleteUser  
9.     }, {  
10.         text : '修改员工信息',  
11.         iconCls : 'plugin',  
12.         handler : updateUser  
13.     }  
14.     , '-','查询：',' ', new Ext.ux.form.SearchField( {  
15.         store : userStore,  
16.         width : 110  
17.     })  
18.     ]);  
19.       

 

然后在grid中使用该工具栏：

[c-sharp]  view plain copy print ?

1. var userGrid = new Ext.grid.GridPanel( {// 创建Grid表格组件  
2.         applyTo : 'user-grid-div',// 设置表格现实位置  
3.         frame : true,// 渲染表格面板  
4.         tbar : toolbar,// 设置顶端工具栏  
5.         stripeRows : true,// 显示斑马线  
6.         autoScroll : true,// 当数据查过表格宽度时，显示滚动条  
7.         store : userStore,// 设置表格对应的数据集  
8.         viewConfig : {// 自动充满表格  
9.             autoFill : true  
10.         },  
11.         sm : sm,// 设置表格复选框  
12.         cm : cm,// 设置表格的列  
13.         bbar : new Ext.PagingToolbar( {  
14.             pageSize : 25,  
15.             store : userStore,  
16.             displayInfo : true,  
17.             displayMsg : '显示第{0}条到{1}条记录,一共{2}条记录',  
18.             emptyMsg : '没有记录'  
19.         //  ,items:['-',new Ext.app.SearchField({store:userStore})]  
20.         })  
21.     });  

 

搜索控件不一定非要放在toolbar上，这个可以根据个人需要设定。

 

本文转自xwdreamer博客园博客，原文链接：http://www.cnblogs.com/xwdreamer/archive/2010/12/29/2297055.html，如需转载请自行联系原作者