Ext.ux.form.SearchField使用方法

来源：互联网发布：c语言hello world程序编辑：程序博客网时间：2024/06/05 00:43

这学期一直在做一个管理系统，前台用到了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上，这个可以根据个人需要设定。