如何写extjs 的多条件搜索框

最新推荐文章于 2021-03-22 10:55:17 发布
最新推荐文章于 2021-03-22 10:55:17 发布
阅读量6.3k 收藏 3
点赞数
分类专栏： extjs 学习 文章标签： extjs layout function constructor button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tqwwilliam/article/details/7299163
版权

多条件搜索框的功能是：拥有搜索按钮，并且借助单个或多个条件的任意组合进行搜索。

一. 先上个全是textfield的效果图：



上代码：

Ext.ns("modMaterialKindManage.SearchFieldset");

/**@description 搜索Fieldset
 * @arguments  
 * @author William
 * @lastEdit William
 * @version 2012/2/27
 * */
modMaterialKindManage.SearchFieldset = Ext.extend(Ext.form.FieldSet,{

	//属性代码全部写在这里   
	
	//初始化组件
	constructor:function(){   
	   
		// 创建自身成员变量
		this.store = global.util.Stores.getMaterialInputStore();
		
		modMaterialKindManage.SearchFieldset.superclass.constructor.call(this,{
			     title:'搜索条件'
	   			,layout:'form'
	   			,items:[
	   				{
	   					xtype:'container'
	   					,layout:'hbox'
	   					,items:[
	   						{
	   						xtype:'container'
		   				   ,layout:'form'
//						  ,bodyStyle: "background-color:#dfe8f6;padding:10 0 10 10"
						  ,items:[{
									  xtype:'textfield'
									  ,fieldLabel:'类型'
									  ,name:'AddForm_sMaterialType'
									  ,labelStyle: "text-align: right;"
//									  ,value:sMaterialType
								  }
								  ,{
									   xtype:'textfield'
									  ,fieldLabel:'国产/进口'
									  ,name:'AddForm_sDomestic'
									   ,labelStyle: "text-align: right;"
//									  ,value:sDomestic
								  }
								  ]
		   				}
		   				,{
		   					xtype:'container'
		   				   ,layout:'form'
						  ,items:[{
							  	 xtype:'textfield'
							  	  ,fieldLabel:'名称'
					 			 ,name:'AddForm_sName'
					 			  ,labelStyle: "text-align: right;"
//					 			 ,value:sGender
					 		 	 },{
							  	 xtype:'textfield'
							  	  ,fieldLabel:'产地'
					 			 ,name:'AddForm_sProducePlace'
					 			  ,labelStyle: "text-align: right;"
//					 			 ,value:sGender
					 		 	 }]
		   				},{
		   					xtype:'container'
		   				   ,layout:'form'
						  ,items:[{
							  	 xtype:'textfield'
							  	  ,fieldLabel:'规格'
					 			 ,name:'AddForm_sType'
					 			 ,labelStyle: "text-align: right;"
//					 			 ,value:sType
					 		 	 },{
								  	  xtype:'textfield'
								  	 ,fieldLabel:'出产公司'
						 			 ,name:'AddForm_sProduceCompany'
						 			 ,width:320
						 			 ,labelStyle: "text-align: right;"
			//					 		 ,value:sType
				   				}
	   					]
	   				}
	   				]
	   				},{
					  	  xtype:'container'
					  	  ,layout:'hbox'
//					  	  ,layoutConfig: {  //也可以使用，但在这用处不大
//							    align : 'middle' 
//							    ,pack  : 'end' 
//						  }
			 			 ,items:[
			 			 		{
			 			 		xtype:'spacer'
			 			 		,width:600
			 			 		}
			 			 		,{
			 			 			xtype:'button'
			 			 			,text:'搜索'
			 			 			,width:70
			 			 			,iconCls:'searchpart'
			 			 			,handler:this.onSearchClick
			 			 			,scope:this
			 			 		},{
			 			 		xtype:'box'
			 			 		,width:10
			 			 		},{
			 			 			xtype:'button'
			 			 			,text:'添加原料'
			 			 			,width:80
			 			 			,iconCls:'addpart'
			 			 			,handler:this.onAddClick
			 			 			,scope:this
			 			 		}
			 			 ]
	   				}
	   			]
		});
		
	} 
	// 其他函数
	
	/**根据条件对记录进行过滤
	 * @param record
	 * @author William
	 * */
	,filterByTextfields:function(record){
		
		//获取搜索面板中的搜索条件值
		var name			= this.find('name','AddForm_sName')[0].getValue();
		var materialType 	= this.find('name','AddForm_sMaterialType')[0].getValue();
		var type 			= this.find('name','AddForm_sType')[0].getValue();
		var domesticOrNot 	= this.find('name','AddForm_sDomestic')[0].getValue();
		var producePlace 	= this.find('name','AddForm_sProducePlace')[0].getValue();
		var produceCompany 	= this.find('name','AddForm_sProduceCompany')[0].getValue();
		
		// 创建 搜索 使用的条件数组
		var aryField = new Array('name','materialType','type','domesticOrNot','producePlace','produceCompany');// 这里填的是store 中的各个field的名称
		var aryValue = new Array(name,materialType,type,domesticOrNot,producePlace,produceCompany);//这里是刚刚得到的搜索值
		
		/*-----------------根据创建好的数组进行匹配查找并返回(改变数组无需修改本区域中代码)----------------------*/
		var bReturn = true; // 返回值
		for( var i = 0; i < aryField.length; i++ )
		{
			if( (aryValue[i] != "")&&(aryValue[i] != "所有" )){
				if(record.get(aryField[i]) == aryValue[i] ){
					bReturn = true;
				}else {
					return false;
				}
			}else{
				bReturn = true;
			}
		}
		return bReturn;
		/*----------------/根据创建好的数组进行匹配查找并返回(改变数组无需修改本区域中代码)----------------------*/
		
	}
	// 事件处理函数 
	
	/**处理搜索按钮的点击事件，搜索原料
	 * @author William
	 * */
	,onSearchClick:function(){
		this.store.filterBy(this.filterByTextfields,this);
	}
	/**处理添加原料按钮的点击事件，显示原料添加的弹窗
	 * @author William
	 * */
	,onAddClick:function(){
		var bOldMaterial 	= false;
    	var bHiddenNum		= true;
    	 var frmAdd = new modMaterialInput.AddForm(bOldMaterial,bHiddenNum);
		 var wndAdd = new modMaterialInput.FormWnd("添加原料", frmAdd );
		 wndAdd.show();
	}
});

// 注册该类
Ext.reg('modMaterialKindManage_SearchFieldset', modMaterialKindManage.SearchFieldset );

二.  然后上个全是comboBox 的版本:


     上代码:

Ext.ns("modMaterialKindManage.SearchFieldset");

/**@description 搜索Fieldset
 * @arguments  
 * @author William
 * @lastEdit William
 * @version 2012/2/27
 * */
modMaterialKindManage.SearchFieldset = Ext.extend(Ext.form.FieldSet,{

	//属性代码全部写在这里   
	
	//初始化组件
	constructor:function(){   
	   
		// 创建自身成员变量
		this.store = global.util.Stores.getMaterialInputStore();
		this.storMaterialTypeCobo 	= global.util.Stores.getStorMaterialMaterialTypeCobo();
		this.storTypeCobo			= global.util.Stores.getStorMaterialTypeCobo();
		this.storNameCobo			= global.util.Stores.getStorMaterialNameCobo();
		this.storDomesticCobo		= global.util.Stores.getStorMaterialDomesticOrNotCobo();
		this.storProducePlaceCobo	= global.util.Stores.getStorMaterialProducePlaceCobo();
		this.storProduceCompanyCobo	= global.util.Stores.getStorMaterialProduceCompanyCobo();
		
		modMaterialKindManage.SearchFieldset.superclass.constructor.call(this,{
			     title:'搜索条件'
	   			,layout:'form'
	   			,items:[
	   				{
	   					xtype:'container'
	   					,layout:'hbox'
	   					,items:[
	   						{
	   						xtype:'container'
		   				   ,layout:'form'
//						  ,bodyStyle: "background-color:#dfe8f6;padding:10 0 10 10"
						  ,items:[{
									  xtype:'combo'
									  ,fieldLabel:'类型'
									  ,store:this.storMaterialTypeCobo
									  ,name:'AddForm_sMaterialType'
									  ,mode:'remote'
									  ,editable:true
									  ,triggerAction:'all'
									  ,valueField:'value'
									  ,displayField:'display'
									  ,labelStyle: "text-align: right;"
									  ,width:130
//									  ,value:sMaterialType
								  }
								  ,{
									   xtype:'combo'
									  ,fieldLabel:'国产/进口'
									  ,name:'AddForm_sDomestic'
									   ,labelStyle: "text-align: right;"
									   ,store:this.storDomesticCobo
									   ,mode:'remote'
									  ,editable:true
									  ,triggerAction:'all'
									  ,valueField:'value'
									  ,displayField:'display'
									  ,width:130
//									  ,value:sDomestic
								  }
								  ]
		   				}
		   				,{
		   					xtype:'container'
		   				   ,layout:'form'
						  ,items:[{
							  	 xtype:'combo'
							  	  ,fieldLabel:'名称'
					 			 ,name:'AddForm_sName'
					 			  ,labelStyle: "text-align: right;"
					 			   ,store:this.storNameCobo
								   ,mode:'remote'
								  ,editable:true
								  ,triggerAction:'all'
								  ,valueField:'value'
								  ,displayField:'display'
								  ,width:150
//					 			 ,value:sGender
					 		 	 },{
							  	 xtype:'combo'
							  	  ,fieldLabel:'产地'
					 			 ,name:'AddForm_sProducePlace'
					 			  ,labelStyle: "text-align: right;"
					 			   ,store:this.storProducePlaceCobo
								   ,mode:'remote'
								  ,editable:true
								  ,triggerAction:'all'
								  ,valueField:'value'
								  ,displayField:'display'
								  ,width:150
//					 			 ,value:sGender
					 		 	 }]
		   				},{
		   					xtype:'container'
		   				   ,layout:'form'
						  ,items:[{
							  	 xtype:'combo'
							  	  ,fieldLabel:'规格'
					 			 ,name:'AddForm_sType'
					 			 ,labelStyle: "text-align: right;"
					 			  ,store:this.storTypeCobo
								   ,mode:'remote'
								  ,editable:true
								  ,triggerAction:'all'
								  ,valueField:'value'
								  ,displayField:'display'
								  ,width:200
//					 			 ,value:sType
					 		 	 },{
								  	  xtype:'combo'
								  	 ,fieldLabel:'出产公司'
						 			 ,name:'AddForm_sProduceCompany'
						 			 ,width:320
						 			 ,labelStyle: "text-align: right;"
						 			  ,store:this.storProduceCompanyCobo
									   ,mode:'remote'
									  ,editable:true
									  ,triggerAction:'all'
									  ,valueField:'value'
									  ,displayField:'display'
									  ,width:250
			//					 		 ,value:sType
				   				}
	   					]
	   				}
	   				]
	   				},{
					  	  xtype:'container'
					  	  ,layout:'hbox'
//					  	  ,layoutConfig: {  //也可以使用，但在这用处不大
//							    align : 'middle' 
//							    ,pack  : 'end' 
//						  }
			 			 ,items:[
			 			 		{
			 			 		xtype:'spacer'
			 			 		,width:600
			 			 		}
			 			 		,{
			 			 			xtype:'button'
			 			 			,text:'搜索'
			 			 			,width:70
			 			 			,iconCls:'searchpart'
			 			 			,handler:this.onSearchClick
			 			 			,scope:this
			 			 		},{
			 			 		xtype:'box'
			 			 		,width:10
			 			 		},{
			 			 			xtype:'button'
			 			 			,text:'添加原料'
			 			 			,width:80
			 			 			,iconCls:'addpart'
			 			 			,handler:this.onAddClick
			 			 			,scope:this
			 			 		}
			 			 ]
	   				}
	   			]
		});
		
	} 
	// 其他函数
	
	/**根据条件对记录进行过滤
	 * @param record
	 * @author William
	 * */
	,filterByTextfields:function(record){
		
		//获取搜索面板中的搜索条件值
		var name			= this.find('name','AddForm_sName')[0].getValue();
		var materialType 	= this.find('name','AddForm_sMaterialType')[0].getValue();
		var type 			= this.find('name','AddForm_sType')[0].getValue();
		var domesticOrNot 	= this.find('name','AddForm_sDomestic')[0].getValue();
		var producePlace 	= this.find('name','AddForm_sProducePlace')[0].getValue();
		var produceCompany 	= this.find('name','AddForm_sProduceCompany')[0].getValue();
		
		// 创建 搜索 使用的条件数组
		var aryField = new Array('name','materialType','type','domesticOrNot','producePlace','produceCompany');// 这里填的是store 中的各个field的名称
		var aryValue = new Array(name,materialType,type,domesticOrNot,producePlace,produceCompany);//这里是刚刚得到的搜索值
		
		/*-----------------根据创建好的数组进行匹配查找并返回(改变数组无需修改本区域中代码)----------------------*/
		var bReturn = true; // 返回值
		for( var i = 0; i < aryField.length; i++ )
		{
			if( (aryValue[i] != "")&&(aryValue[i] != "所有" )){
				if(record.get(aryField[i]) == aryValue[i] ){
					bReturn = true;
				}else {
					return false;
				}
			}else{
				bReturn = true;
			}
		}
		return bReturn;
		/*----------------/根据创建好的数组进行匹配查找并返回(改变数组无需修改本区域中代码)----------------------*/
		
	}
	// 事件处理函数 
	
	/**处理搜索按钮的点击事件，搜索原料
	 * @author William
	 * */
	,onSearchClick:function(){
		this.store.filterBy(this.filterByTextfields,this);
	}
	/**处理添加原料按钮的点击事件，显示原料添加的弹窗
	 * @author William
	 * */
	,onAddClick:function(){
		var bOldMaterial 	= false;
    	var bHiddenNum		= true;
    	 var frmAdd = new modMaterialInput.AddForm(bOldMaterial,bHiddenNum);
		 var wndAdd = new modMaterialInput.FormWnd("添加原料", frmAdd );
		 wndAdd.show();
	}
});

// 注册该类
Ext.reg('modMaterialKindManage_SearchFieldset', modMaterialKindManage.SearchFieldset );


trymore_
关注
专栏目录
下拉(条件)搜索实例extjs4.2(亲测可用).zip
08-30
在这个“下拉(条件)搜索实例”中，我们看到开发者利用ExtJS 4.2实现了一个交互式的用户界面，其中包含了下拉菜单和条件搜索功能。 下拉搜索通常指的是在输入框中使用下拉列表作为候选选项的搜索方式，用户可以快速...
Extjs Tree增加搜索功能
weixin_33958585的博客
11-02 807
为什么80%的码农都做不了架构师？>>> ...
Extjs3.4 textfield组合button
ASparrowJack的博客
03-01 357
问题：将textfield和button组合成类似combobox的表单元素 思路： 1.建一个panel，布局为column，items分别为textfield和button { xtype: 'panel', id: 'mypanel', width: 290, height: 29, border: false, layout: 'co...
Win ddraw 最简化例子
Done Lin的专栏
12-20 1701
<br />#include <commctrl.h><br />#include "ddraw.h"<br />#pragma comment(lib,"ddraw.lib") <br />#define MAX_LOADSTRING 100<br />// Global Variables:<br />HINSTANCEg_hInst;// current instance<br />HWNDg_hWndCommandBar;// command bar handle<br />/
Ext Js 4实现的一个搜索框，调用的是谷歌的api，使用谷歌来搜索
张波的技术积累
07-26 2840
1：searchfiled.jsp的内容如下： <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":
ExtJs4.2应用：使用ExtJs扩展组件searchfield实现数据搜索功能
Stop Tears
12-08 9111
ExtJs4.2应用：使用ExtJs扩展组件searchfield 实现数据搜索功能 1.引入searchfield组件 在Ext目录下放入ux目录将searchfield组件放入ux目录下的form文件下，如图所示： 2.在对应Js文件中引入searchfield组件 dockedItems: [{ dock: 'top', /**在顶部显
ExtJS 工具栏 分页事件参数
10-29
ExtJS 工具栏分页事件参数使用说明 ExtJS 是一个流行的 JavaScript 框架，用于构建丰富的互联网应用程序...工具栏分页事件参数是 ExtJS 中一个非常重要的概念，通过设置这些参数，可以实现复杂的数据分页和搜索功能。
extjs-grid-searching:ExtJS网格工具栏扩展添加了搜索功能
05-11
5. **清除按钮**：为了方便用户取消搜索并恢复到原始数据视图，工具栏中应该有一个清除按钮，点击后会清空搜索框并重新加载所有数据。 6. **事件监听**：扩展可能包含了对搜索事件的监听，如`search`事件，当搜索...
ExtJs搜索控件、插件
03-20
搜索插件可能包括对搜索历史的管理、多条件搜索支持、高亮匹配结果等特性。`SearchField.js`可能就包含了一个这样的插件，为搜索控件增加了额外的交互和行为。 6. **响应式设计**：考虑到现代Web应用的多设备兼容性...
ExtJS中设置下拉列表框不可编辑的方法
10-25
本文将详细介绍如何在ExtJS中设置下拉列表框为不可编辑状态的方法。 首先，要理解ExtJS中的下拉列表框组件是如何工作的。ExtJS提供了多种方式来配置和使用下拉列表框，其中之一是使用`***boBox`类。这个类结合了...
ExtJs简单的快速搜索例子[search]
05-18
基于HTML方式运行，可单一的搜索指定的某一列名，搜索多列的请自行到官网下载
extjs 通用搜索框
争一代雄风
01-21 1149
先来张效果图： 采用triggerfield组件实现。 { xtype: 'triggerfield', onTrigger1Click: function() { var m
extjs,下拉多选
小鑫子的博客
03-22 394
store: { fieldLabel: '类型', name:'search_storageWay', allowBlank:true, xtype:'combobox', bind:{ store:'{exportMethodStore}' }, displayField:'exportName', queryMode: 'local', anchor: '10%', valueField: 'exportCode', multi
extjs获取多选框_extjs下拉框，多选，单选，动态传值
weixin_35969301的博客
12-24 259
后台java代码@RequestMapping(params = "command=adduser")public void getUser(HttpServletResponse response) throws Exception{JSONObject result1 = new JSONObject();JSONArray rows1 = new JSONArray();String sea...
extjs grid多选插件-类Excel多选插件
renwuqiangg的博客
12-21 509
我自己写的mulselect-grid插件，是插件是基于extjs3的。可以实现的功能是对grid进行多选（可配合ctrl和shift），拖拽多选，点击标题行或第一列选择一列或一行，就像execl那样。并可以按ctrl+c复制到建贴板（复制功能仅支持ie）。 Ext.ns('Ext.rr.grid'); Ext.rr.grid.MultiCellSelectionModel = Ext.ext...
Extjs之多选下拉框（MultiSelect）
热门推荐
落日小屋
03-05 3万+
扩展js类库，在项目中建立一个 js文件，命名为:xxx.js  其代码为： if ('function' !== typeof RegExp.escape) { RegExp.escape = function (s) { if ('string' !== typeof s) { return s;
Extjs combobox模糊匹配（过滤结果）
weixin_33737774的博客
02-10 522
2019独角兽企业重金招聘Python工程师标准>>> ...
关于 Ext.form.ComboBox的模糊过滤
huanyingjung的专栏
07-20 2032
Ext.form.ComboBox的过滤方式有点儿和传统的不一样，不一样的地方就是，如果你输入“test”，而下拉框里有一个值也为“test”，传统的做法就是下拉框里的test值就不会出现了，而Ext.form.ComboBox的下拉框里还是显示“test值”如图：我们可以通过Ext.form.ComboBox的“beforequery”事件来过滤掉这个“test”值js代码如下：注：只需看beforequery事件的处理函数即可
ExtJs-ComboBox按拼音首字母进行过滤
chuishidao30073的博客
07-11 336
1、引用chinesePY.js 文件，下载地址 http://download.csdn.net/detail/gj_diy/8988705 注：这个js编码有点问题，自己改成 utf-8 的，不然汉字无法获取首字母 2、在下拉数据来源中添加一个 key，value为Pinyin.G...
extjs6 写一个模糊查询的完整例子
最新发布
03-30
以下是一个使用ExtJS 6实现模糊查询的完整例子： 1. 创建一个包含表格和搜索框的页面： ```javascript Ext.create('Ext.panel.Panel', { title: 'Search Example', width: 500, height: 400, layout: 'border', items: [{ region: 'center', xtype: 'grid', id: 'dataGrid', columns: [{ text: 'Name', dataIndex: 'name', flex: 1 }, { text: 'Email', dataIndex: 'email', flex: 1 }, { text: 'Phone', dataIndex: 'phone', flex: 1 }], store: Ext.create('Ext.data.Store', { fields: ['name', 'email', 'phone'], data: [{ name: 'John', email: 'john@example.com', phone: '555-1234' }, { name: 'Jane', email: 'jane@example.com', phone: '555-5678' }, { name: 'Bob', email: 'bob@example.com', phone: '555-9012' }] }) }, { region: 'north', xtype: 'textfield', id: 'searchField', fieldLabel: 'Search', labelWidth: 50, margin: 5, listeners: { change: function(field, newValue) { var grid = Ext.getCmp('dataGrid'); var store = grid.getStore(); store.clearFilter(); if (newValue) { var matcher = new RegExp(Ext.String.escapeRegex(newValue), 'i'); store.filter({ filterFn: function(record) { return matcher.test(record.get('name')) || matcher.test(record.get('email')) || matcher.test(record.get('phone')); } }); } } } }], renderTo: Ext.getBody() }); ``` 2. 在搜索框的change事件监听器中添加代码，以便根据输入的文本过滤表格中的数据。使用正则表达式进行模糊匹配。如果搜索框为空，则清除所有过滤器。 3. 运行代码并输入搜索条件，可以看到表格中只显示与搜索条件匹配的记录。 完整的代码如下： ```javascript Ext.create('Ext.panel.Panel', { title: 'Search Example', width: 500, height: 400, layout: 'border', items: [{ region: 'center', xtype: 'grid', id: 'dataGrid', columns: [{ text: 'Name', dataIndex: 'name', flex: 1 }, { text: 'Email', dataIndex: 'email', flex: 1 }, { text: 'Phone', dataIndex: 'phone', flex: 1 }], store: Ext.create('Ext.data.Store', { fields: ['name', 'email', 'phone'], data: [{ name: 'John', email: 'john@example.com', phone: '555-1234' }, { name: 'Jane', email: 'jane@example.com', phone: '555-5678' }, { name: 'Bob', email: 'bob@example.com', phone: '555-9012' }] }) }, { region: 'north', xtype: 'textfield', id: 'searchField', fieldLabel: 'Search', labelWidth: 50, margin: 5, listeners: { change: function(field, newValue) { var grid = Ext.getCmp('dataGrid'); var store = grid.getStore(); store.clearFilter(); if (newValue) { var matcher = new RegExp(Ext.String.escapeRegex(newValue), 'i'); store.filter({ filterFn: function(record) { return matcher.test(record.get('name')) || matcher.test(record.get('email')) || matcher.test(record.get('phone')); } }); } } } }], renderTo: Ext.getBody() }); ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值