如何写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 );


原创粉丝点击