如何写extjs-的多条件搜索框
目录
如何写extjs 的多条件搜索框
多条件搜索框的功能是：拥有搜索按钮，并且借助单个或多个条件的任意组合进行搜索。
一. 先上个全是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 );