在ExtJs项目开发过程中少不了筛选查询功能，而对于这部分功能又基本是大同小异，无非就是对相应条件数据进行筛选查看了，所以我们针对这部分专门去实现了一个控件，用于对所有的数据列表进行查询的通用筛选！

?

先看下示例图：

?

控件核心代码如下：

?

这部分代码比较多，可能再打开浏览器的时候看不到，请大家在附件中下载即可。

?

function createFilter(store,moduleCode,callback)
{
	Ext.form.Field.prototype.msgTarget = "side";
////////////////////变量、常量区////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	/**
	 * 当前筛选条件节点
	 * @type  TreeNode
	 */
	var currentFilter={attributes:{}};
	var allOperator={EQ:"0",NE:"1",LIKE:"2",NLIKE:"3",GT:"4",LT:"5",GE:"6",LE:"7",NULL:"8",NOTNULL:"9",ASC:"10",DESC:"11"};
	
	/**
	 * 数字操作运算符集合
	 * @type Array
	 */
	var numericOp = datetimeOp = [[allOperator.EQ, "等于"], [allOperator.NE, "不等于"], [allOperator.GT, "大于"]
					, [allOperator.LT, "小于"], [allOperator.GE, "大于等于"],[allOperator.LE, "小于等于"],[allOperator.NULL, "空白"], [allOperator.NOTNULL, "非空白"]];
	/**
	 * 所有的运算符
	 * @type  Array
	 */
	var allOp = [[allOperator.EQ, "等于"], [allOperator.NE, "不等于"],[allOperator.LIKE, "包含字符"], [allOperator.NLIKE, "不包含字符"], [allOperator.GT, "大于"]
					, [allOperator.LT, "小于"], [allOperator.GE, "大于等于"],[allOperator.LE, "小于等于"],[allOperator.NULL, "空白"], [allOperator.NOTNULL, "非空白"], [allOperator.ASC, "升序"], [allOperator.DESC, "降序"]];
	/**
	 * 字符操作运算符
	 * @type Array
	 */
	var stringOp = [[allOperator.EQ, "等于"], [allOperator.NE, "不等于"],[allOperator.LIKE, "包含字符"], [allOperator.NLIKE, "不包含字符"],[allOperator.NULL, "空白"], [allOperator.NOTNULL, "非空白"]];
	/**
	 * 自定义，下拉框，boolean操作运算符
	 * @type 
	 */
	var lookupOp = booleanOp = [[allOperator.EQ, "等于"], [allOperator.NE, "不等于"], [allOperator.NULL, "空白"], [allOperator.NOTNULL, "非空白"]];
	/**
	 * 最后一行下标
	 * @type Number
	 */
	var lineIndex = 0;// 新增行下标
	/**
	 * 当前编辑行
	 * @type  int
	 */
	var currentIndex=0;// 当前编辑行号
	/**
	 * 左边树面板折叠状态，默认为打开
	 * @type Boolean
	 */
	var treeColFlag=false;
	/**
	 * 第一行下标,默认为0
	 */
	var firstIndex=0;
	/**
	 * 存放排序字段的下标, 避免重复
	 */
	var sortInfo={};
	/**
	 * 筛选结果数据源
	 */
	var filterStore = new Ext.data.Store({//模块列数据源
		id:moduleCode+"_filterStore",
		proxy : new Ext.data.HttpProxy({
					url : "filterAction!getFilterInfo.action"
				}),
		reader : new Ext.data.JsonReader({
					root : "root",
					totalProperty : "total",
					fields : ["fieldName", "fieldId", "fieldLabel", "operator",
								"setValue", "inputType", "fieldType", "inputSql",
								"method", "relation", "rightBr", "leftBr", "sort",
								"displayValue", "delFlag", "idRender","userQueryId","custom"]
				})
	});
	
////////////////////初始化方法区////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	//初始化store，如果不是公用Grid 来的，要把fieldType转成相对应的数字
	if(store.getCount()>0)
		store.each(function(rec){
			switch(rec.get("fieldType"))
			{
				case "string":rec.set("fieldType",1);break;
				case "int":rec.set("fieldType",2);break;
				case "float":rec.set("fieldType",3);break;
				case "boolean":rec.set("fieldType",4);break;
				case "date":rec.set("fieldType",5);break;
				case "gender":rec.set("fieldType",6);break;
			}
		})
	else
		store.load();
	
	/**
	 * 文本输入框
	 * @param {int} index 行索引
	 */
	var objGridTextEditor = function(index) {
		return new Ext.form.TextField({
					id : moduleCode+"_setValue" + index,
					emptyText : "请输入..."
				});
	}
	
	/**
	 * 整型输入框
	 * @param {int} index 行索引
	 */
	var objGridIntegerEditor = function(index) {
		return new Ext.form.NumberField({
					id : moduleCode+"_setValue" + index,
					allowNegative : false,
					allowDecimals : false,
					emptyText : "请输入整数..."
				});
	}
	
	/**
	 * 浮点型输入框
	 * @param {int} index 行索引
	 */
	var objGridFloatEditor = function(index) {
		return new Ext.form.NumberField({
					id : moduleCode+"_setValue" + index,
					allowNegative : false,
					emptyText : "请输入数字..."
				});
	}
	/