`
kangsoft
  • 浏览: 71987 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ExtJs搜索控件、插件

阅读更多


插件代码如下:
 

Ext.app.SearchField = Ext.extend(Ext.form.TwinTriggerField, {
	    initComponent : function(){
	        if(!this.store.baseParams){
				this.store.baseParams = {};
			}
			Ext.app.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.store.baseParams[this.paramName] = '';
				this.store.removeAll();
				this.el.dom.value = '';
	            this.triggers[0].hide();
	            this.hasSearch = false;
				this.focus();
	        }
	    },
	
	    onTrigger2Click : function(){
	        var v = this.getRawValue();
	        if(v.length < 1){
	            this.onTrigger1Click();
	            return;
	        }
			if(v.length < 2){
				Ext.Msg.alert('无效搜索', '最小需要输入两个字符进行搜索!');
				return;
			}
			this.store.baseParams[this.paramName] = v;
	        var o = {start: 0};
	        this.store.reload({params:o});
	        this.hasSearch = true;
	        this.triggers[0].show();
			this.focus();
	    }
	});
Ext.reg('searchfield', Ext.app.SearchField);

 创建部分如下所示:

new Ext.app.SearchField({
	         width:200,
	         store: searchStore,//此store为数据源部分
	         paramName: 'city'//搜索字段
})

 

  • 大小: 1.2 KB
分享到:
评论

相关推荐

    extjs年份控件(只显示年,无月日时分秒)

    Extjs DateField控件 - 只选择年份(找了很久发现网上只有选择年月的控件,于是基于extjs年月控件设计了只选择年份的控件)

    很好用的extjs年份控件

    自己新写的extjs年份控件,直接new Ext.ux.MyYear 即可使用

    extjs 时间控件

    在ExtJS中,时间控件是一种用户界面元素,允许用户选择或输入特定的时间值。它提供了丰富的交互性和自定义选项,使得时间选择过程更加直观和高效。在本篇文章中,我们将深入探讨ExtJS时间控件的使用、功能和配置。 ...

    extjs插件开发教程

    本教程将深入探讨如何开发ExtJS插件,以及通过实例来理解插件的运用。 首先,我们要明白什么是ExtJS插件。插件是包含特定功能的一段代码,它可以注入到ExtJS的组件中,以添加新的行为或修改现有组件的功能。开发...

    ExtJs:收集基于ExtJs扩展的一些控件

    这个文件可能是对一些自定义或第三方开发的ExtJs控件的概述,它可能包括了各种特定用途的组件,如日历控件、拖放功能、树形视图、图表插件等。这些控件通常是为了满足特定项目需求或者优化原有组件性能而创建的。...

    extjs年月选择控件

    extjs的年月选择控件,主要针对原有的extjs Datefield控件的基础上增加了插件

    extjs3.0部分插件代码

    在"extjs3.0部分插件代码"这个资料中,我们可以期待学习到关于ExtJS 3.0版本的一些关键插件的实现细节。 首先,让我们关注一下"spinner"这个文件名。在ExtJS中,Spinner是一个常见的组件,它通常用作数值输入框,...

    Extjs相关插件

    本篇文章将深入探讨ExtJS的相关插件及其在实际开发中的应用。 一、ExtJS 插件概述 ExtJS 插件(Plugins)是扩展框架功能的一种方式,它们为内置组件或布局添加额外的功能或行为。插件通常包含一组特定的配置选项,...

    ExtJs4.2.1年月日时分秒、时分秒控件

    你可以通过创建自定义插件或扩展来改变控件的行为,甚至完全重新设计UI。 总之,"ExtJs4.2.1年月日时分秒、时分秒控件"是关于使用ExtJS框架创建日期和时间选择功能的。通过理解和利用提供的组件、配置以及测试样例...

    Extjs4 日期控件,带年月日时分秒

    在ExtJS4中,日期控件是开发人员经常使用的组件之一,它允许用户选择日期、时间或两者兼有,以便进行数据输入或显示。本篇文章将深入探讨ExtJS4中的日期控件,特别是那些包含年、月、日、时、分、秒的复杂日期时间...

    ExtJS日期时间控件

    在"ExtJS日期时间控件"这个下载包中,包含了三种不同的日期控件实现方式。这可能是通过不同的配置、插件或者自定义扩展来实现的,旨在满足不同场景下的需求。下面我们将深入探讨这些知识点: 1. **ExtJS内置的...

    Ext日期时间控件 Spinner控件 Ext代码 Extjs Grid

    在本文中,我们将深入探讨`ExtJS`框架中的两个关键组件——`Ext日期时间控件`和`Spinner控件`,以及它们在`Grid`中的应用。`ExtJS`是一款强大的JavaScript库,专用于构建富客户端应用程序,尤其适用于创建复杂的、...

    ExtJs日期时间选择控件

    在ExtJs中,日期时间选择控件是开发人员常用的一个组件,它允许用户方便地选择日期和时间,极大地提升了用户体验。本篇文章将深入探讨ExtJs日期时间选择控件的使用、功能以及优化后的特性。 1. **ExtJs日期时间选择...

    extJs之分页控件

    在ExtJS中,分页控件(Pagination)是数据展示模块的重要组成部分,它允许用户以多页形式浏览大量的数据,提高用户体验并优化页面加载性能。在本案例中,我们关注的是"extJs之分页控件",这将涉及如何使用ExtJS实现...

    ExtJS-4.2.6扩展ux插件89个

    这个特定的压缩包"ExtJS-4.2.6扩展ux插件89个"包含了Ext JS 4.2.6版本的一个重要组件:ux(用户界面扩展)插件。这些插件提供了额外的功能和组件,增强了框架的原生能力,帮助开发者构建更复杂、功能更丰富的应用...

    EXTJS4自学手册

    目录: 一 Extjs 基础 EXTJS4自学手册——EXT文件目录,本地加载文档,命名规范 ...EXTJS4自学手册——页面控件(表格的插件) EXTJS4自学手册——页面控件(树形控件) EXTJS4自学手册——页面控件(表单控件)

    ext时间控件(精确到分/秒)IP控件(修正)

    在IT领域,开发用户友好的界面是至关重要的,这涉及到各种控件的使用,以便用户可以方便地输入和处理数据。"ext时间控件(精确到分/秒)IP控件(修正)"是一个这样的解决方案,它专注于提供精确的时间选择功能,并且...

    强大的Extjs拖动示例

    在实际开发中,为了使代码更易理解和维护,通常会使用ExtJS的插件系统,如`Ext.ux.dd.DragAndDropManager`,它提供了一种统一的方式来管理和协调拖放操作。通过这种方式,开发者可以避免重复编写拖放逻辑,而专注于...

    Selenium识别Extjs控件的解决方法整理.pdf

    本文将深入探讨如何有效地使用XPath在EXTJS控件中进行元素定位。 EXTJS是一种流行的JavaScript库,它创建了丰富的用户界面,其页面元素通常具有动态生成的ID,这给Selenium测试脚本的编写带来了困难。为了解决这个...

Global site tag (gtag.js) - Google Analytics