EXtjs 使用Ext.ux.form.SearchField 加入搜索框前后台实例

最新推荐文章于 2020-12-21 16:46:05 发布

原创最新推荐文章于 2020-12-21 16:46:05 发布 · 3.4k 阅读

1 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

59 篇文章

订阅专栏

本文介绍如何在项目中引入并应用SearchField.js，通过定制触发器和参数配置，实现灵活且高效的搜索功能。重点展示了如何获取并处理搜索条件，以及与后台交互以动态加载数据。此外，还提供了具体实例和显示效果，帮助开发者快速上手。

需要引入 SearchField.js,其中代码如下：

/*!
 * Ext JS Library 3.3.1
 * Copyright(c) 2006-2010 Sencha Inc.
 * licensing@sencha.com
 * http://www.sencha.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.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.hasSearch = true;
        this.triggers[0].show();
    }
});

var filterRange = [["authors","作者"],["fruit_name","成果名称"],["company_name","所在单位"]];
		var filterField = new Ext.ux.form.SearchField({
			store:store,
			onTrigger2Click : function(){
		        var v = this.getRawValue();
		        var o = {start: 0};
		        this.store.baseParams["filterCond"]=fruitList.getTopToolbar().findById("filterCond").getValue();
		        if(v.length < 1){
		            this.store.baseParams[this.paramName] = '';
		        }else{
			        this.store.baseParams = this.store.baseParams || {};
			        this.store.baseParams[this.paramName] = v;
		        }
		        this.store.reload({params:o});
	            this.hasSearch = true;
		        this.triggers[0].show();
		    }
	    });
		var filterBar = new Ext.Toolbar({
			items:[{text:"删除选中成果",handler:delSelFruits},"-",
					{text:"分享选中成果",handler:shareSelFruits},"-",
					{text:"返回",handler:returnToCollect},"->","搜索：",
			{xtype:"combo",labelSeparator:"：",width:80,id:"filterCond",name:"filterCond",
				store:filterRange,value:"authors",editable:false,triggerAction:"all"},
			filterField
			       ]
		});

后台获取搜索条件方式如下：

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

获取到的值分别是：

filterCond 是 authors

query 是王强

显示效果如下图：