日期:2014-05-16  浏览次数:20436 次

ExtJs结合QBC,简化工作量的一个尝试

QBC中用得比较普遍的莫过于 property op value 这种形式

较常用的一些方法


?

而在界面的表单上,我们的查询,做成公共实现还是有较多方案的,不过问题在于像between,not等这类关系,并不能很好的控制,尤其是between,一个property对应两个value,表示一个区间。

?

之前我做的一个项目中,前端使用extjs,后台索引部分使用compass,而compass与spring结合后,风格跟spring-hibernate,以及hibernate的qbc很像。

?

下面就以extjs3.2,以及compass进行简要说明我的思路。

?

1、有一个这样的查询



其中"公司名称"是模糊匹配,即"like"

"添加日期"是精确匹配,即"eq"

当然,你也可以处理时间跨度的查询,即between,不过这种方式使用">"、"<"相结合计较好实现。

like你也可以自己设定规则,如headLike,endLike等,只要后台有相应的解析处理程序。

?

2、我希望界面能传给后台这样的一个信息:

?

[{
	name:'companyName',
	value:'长江',
	relation:'like'
},{
	name:'createDate',
	value:'2011-08-03',
	relation:'eq'
}]

?

我希望不需要每次都手工去拼写这样的JSON,ExtJs的FormPanel(实际上是BasicForm的方法)有提供这样的一种方式获取json,用以提交:

?

var formJSON = formPanel.getForm().getValues();

?

可是通过这样获取到的JSON格式是:

?

{companyName:'长江',createDate:'2011-08-03'}

?

这并不是我所希望的格式,我想要的是三元关系。

要得到三元关系JSON的效果,需要对ExtJs的BasicForm进行扩展,如下:

?

Ext.override(Ext.form.BasicForm, {
	getRelations : function(tarName, tarFun) {
		var _this = this;
		var form = this.el.dom;
		var fElements = form.elements
		  || (document.forms[form] || Ext.getDom(form)).elements, hasSubmit = false, encoder = encodeURIComponent, name, relation, data = [], type, hasValue;

		Ext.each(fElements, function(element) {
			  var record;
			  name = element.name;
			  type = element.type;
			  if (_this.findField(name)) {
				  relation = _this.findField(name).relation;
				  nullValue = _this.findField(name).nullValue;
				  hiddenValue = _this.findField(name).hiddenValue;
			  }
			  if (!element.disabled && name) {
				  if (/select-(one|multiple)/i.test(type)) {
					  Ext.each(element.options, function(opt) {
						    if (opt.selected) {
							    hasValue = opt.hasAttribute ? opt.hasAttribute('value') : opt
							      .getAttributeNode('value').specified;
							    data += String.format("{0}={1}&", encoder(name), encoder(hasValue
							        ? opt.value
							        : opt.text));
						    }
					    });
				  } else if (!(/file|undefined|reset|button/i.test(type))) {
					  if (!(/radio|checkbox/i.test(type) && !element.checked)
					    && !(type == 'submit' && hasSubmit)) {
						  var value = hiddenValue ? hiddenValue : element.value;
						  if (relation && value && value != '' && value != nullValue) {
							  if (/\./.test(name)) {
								  name = name.substring(0, name.indexOf('.'));
							  }
							  record = 'name=' + encoder(name) + '&value=' + encoder(value)
							    + '&relation=' + relation;
							  var json = Ext.urlDecode(record);
							  if (tarName == name && tarFun) {
								  json = tarFun(json);
							  }
							  data.push(json);
						  }
						  hasSubmit = /submit/i.test(type);
					  }
				  }
			  }
			  relation = null;
		  });
		return data;
	}
});

?

使用的时候,form还是一样的写法,只是多了一个relation属性

?

  this.formPanel = new Ext.form.FormPanel({
	    xtype : 'form',
	    title : '查询区',
	    regio