如何写extjs 的多条件搜索框
来源:互联网 发布:值乎下载 编辑:程序博客网 时间:2024/03/29 19:16
多条件搜索框的功能是:拥有搜索按钮,并且借助单个或多个条件的任意组合进行搜索。
一. 先上个全是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 );
- 如何写extjs 的多条件搜索框
- 如何将搜索框上次的搜索条件固定
- ExtJs 4 store 在分页时如何保持搜索条件不变
- 一个简单的ExtJS搜索建议框
- 如何写一个extjs插件
- extjs 通用搜索框
- 如何给odoo的应用指定默认搜索条件?
- 搜索学习--Lucene中搜索的排序、范围区间搜索、分页搜索、多条件搜索
- vx弹出搜索框 多条件查询
- 多条件搜索 sql
- grep 多条件搜索
- 多条件搜索
- sphinx多条件搜索
- yii2 多条件搜索
- 处理多条件搜索
- datatables 多条件搜索
- 根据输入的搜索条件返回指定的sql字符串(多条件搜索)
- 3、ExtJs写的js页面中的输入框的值如何传输到Java后台Controller控制层?
- 路由器设置:没有交换机怎么实现上网?
- RejectedPolicy--DiscardPolicy
- 程序是设计出来的
- Perl数组的应用
- Android平台下实现渐变效果
- 如何写extjs 的多条件搜索框
- 嵌入式linuxTCP/IP路由器
- javascript验证邮箱格式代码
- Session原理
- undefined macro: AM_CONFIG_HEADER solution
- 为mysql的用户赋予权限
- android加载include
- 图像处理滤波器(三)——高斯平滑滤波器(Gaussian Smoothing Filter)
- Android实现图片的倒影效果