Ext.ux.form.SearchField 应用,非简单的应用

Ext.ux.form.SearchField,我觉得好的地方有两点:

1.简化了代码;

2.可以有X效果,就是关闭查询,停止查询;

具体应用:\

视图添加到tbar里

tbar  :[
                'Search: ', ' ',
                this.picTypeCombo,' ',
                this.keywordField
                
            ]

相关的两个查询组件

this.keywordField = new Ext.ux.form.SearchField({
            store: this.photoView.store,
            width:320,
            paramName:"keyword",//?,*
            allowBlank:false,
            labelStyle: 'font-weight:bold;color:#F90;',
            emptyText:'关键字可配合使用"*"通配符,能更快速精确的查询',
            fieldLabel:"关键字"
        });
        //console.dir(this.keywordField.events);
        this.picTypeCombo = new Ext.ux.SelectBox({
            width:220,
            fieldLabel:"活动类型",
            store : activityTypeStore,
            valueField : "val",
            id:'searchType',
            hiddenName:"picType",
            displayField : "lab"
        });

查询时将会按照store的参数提交,如果想追加参数 ,就要在store里添加监听开始载入前的事件('beforeload'),这里我额外加了个参数'picType',具体如 :

this.store = new Ext.data.Store({
            autoLoad:true,
            proxy   :new Ext.data.HttpProxy({
                url:basePath+"getEpenPhotos.action"
            }),
            baseParams:{                
                ascProperty:'id',
                isAsc:true
            },
            reader : new Ext.data.JsonReader({
                root:"pager.entityList",
                totalProperty:"pager.totalCounts"
            }, this.Photo),
            listeners: {
                'beforeload' : function(){
                    this.baseParams.searchType = Ext.getCmp('searchType').getValue();
                }
            }
        });