Ext.ux.form.SearchField 扩展

 

Ext.ux.form.SearchField 本身并非Ext的原生组件(你在Ext的api中找不到它的),它本身就是后来的封装产物,而它似乎并未提供继续扩展的接口,那么有没有办法来扩展它呢?

 

基础知识:

一般地,我们如下使用searchField:

        toolbar.add('->',{
        	xtype: 'searchfield',
        	store: this.grid.store,
			//width: 400,
			fieldLabel: '搜索',
			labelWidth: 30,
			align: 'right',
        });

 其中store项,是我们要传入的目标store,一般为一个grid的store.

 

问题背景:

如下图所示,现在我期望在点击搜索按钮时可以连带前面的“信息类型”值一并进行查询。
Ext.ux.form.SearchField 扩展_第1张图片
 

扩展思路:

下面有两个思路,我是采用思路2来实现的。

思路1:显然的,直接修改Ext.ux.form.SearchField源码可以达到扩展目的,但是这样做可能会影响通用性,而且需要阅读其源码;

思路2:在“信息类型”选择改变的时候(change事件中),获取目标store并绑定额外参数值即可,这样SearchField控件在查询的时候只管重新加载目标store,自然可以把我绑定的参数一并带过去了。附:“信息类型”触发change事件时,调用如下函数进行绑定:

    onChange: function(combo, newValue, oldValue, eOpts){
    	var store = Ext.getCmp('info-grid').getStore();
    	store.getProxy().extraParams.infoType = newValue;
    	store.reload();
    },

 

你可能感兴趣的:(WEB前端)