`
kangsoft
  • 浏览: 70494 次
  • 性别: 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 Datefield控件的基础上增加了插件

    extjs4.2 datetime控件

    extjs4.2的日期扩展插件,支持时分秒显示。支持动态赋值

    extjs3.0部分插件代码

    这一点资料希望给大家带来帮助

    EXTJS4自学手册

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

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

    Ext日期时间控件 Spiiner控件及其它Ext代码

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

    IP控件 时间控件(可TEXT输入,可下拉输入) 判断输入的合法性 休整上次的一些BUG,内附使用说明

    EXTJS 样式 修正 css 可以调整extjs里面的字体大小

    EXTJS 样式 extjs字体大小 可以轻松在这个CSS文件里面调整EXTJS插件的字体大小,对这个有需求的同志们有福了!

    ExtJS(ajax框架) 4.2.1

    可以把ExtJS用在.Net、Java、Php等各种开发语言...全新的图表库:ExtJS4中, 全新的、插件自由的图表库是最激动人心的新功能之一,创建了饼图、线图、面积图、雷达图等等,所有这些都是动画的、易于配置的和可扩展的。

    Extjs精华版图书管理系统源码_商业源码_sqlserver_ExtJS6._extjs_V2_

    3、演示插件使用和封装插件、面向对象继承等等。4、演示更换皮肤功能。 5、演示json数据封装。6、演示前台和后台数据的传递。7、演示权限管理。8、系统已经后台管理的基本架构,适合二次开发。注意事项:1、开发环境...

    ExtJS_Designer(安装程序与破解补丁)

    很多用户都希望可以有可以视化的工具,通过拖拉控件,更改属性等操作就可以完成ExtJs的开发工作.在圣诞节来临之前ExtJs的创始人JackSlocum给了我们一个圣诞大礼,演示了ExtJs3.0的可视化开发工具. Ext JS Road Map Ext...

    精通JS脚本之ExtJS框架.part2.rar

    《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...

    简单地图插件源码(ExtJS/Javascript)

    这就是个简单的地图控件,可以根据经纬度确定点的坐标,并触发相应的事件。 其实还可以实现一些其他功能。 只不过这个控件是最适合客户那边的要求滴,SO。。。 发上来,给大家看着玩儿~~ 图片是地图的图片(可以...

    顺表网页电子表格(基于ExtJS插件) v2.0.rar

    顺表控件是基于Web的类似于微软Excel的网页电子表格控件,是一款Javascript电子表格控件,顺表的源代码开放,可以用于Web报表设计器,Web电子表格编辑器,中国特色的电子表单设计器等,该Web Excel控件可以和Java/...

    Ext.NET(基于.NET Framework 3.5的一套支持ASP.NET AJAX的Web控件)

    由于Ext.NET基于ExtJS的缘故,所以不可避免会有类似ExtJS控件运行又大又慢的毛病,但因为它界面美观,减少了很多美工的精力,你就可以省掉一大串的js代码,界面完全可以用Ext.NET简单配置就得到很炫的页面效果,使...

    精通JS脚本之ExtJS框架.part1.rar

    《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...

    龙博甘特图控件(Web版)

    龙博甘特图控件(Web版)源码 特图(Gantt chart )又叫横道图、条状图(Bar chart)。它是以图示的方式通过活动列表和时间刻度形象地表示出任何特定项目的活动顺序与持续时间。 Ext Gantt甘特图是基于Extjs核心库的开发...

    Ext扩展控件-------可以通过下拉列表框选择每页的分页条数

    可以通过下拉列表框选择每页的分页条数 主要用于动态选择分页表格每页显示记录的条数

Global site tag (gtag.js) - Google Analytics