EXTJS查询框架SearchField怎么用？

var find = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:"/Shopping/AllWareServlet",method:'GET'}),
reader: new Ext.data.JsonReader({totalProperty:'totalProperty', root:'root'}, [
{name: 'url'},
{name: 'id'},
{name: 'name'},
{name: 'date'},
{name: 'type'},
{name: 'oprice'},
{name: 'memberprice'},
])
});

new Ext.app.SearchField({
store: find,
width:320
})
问问各位大侠这个查询框架是怎么用的，特别是它根据什么属性查询的最好有内部代码
[b]问题补充：[/b]
:) chanball 的回答虽然看懂了，但不够详细，最好有详细的例子

看下我在源代码加的注解,其实看下面的源代码就已经知道啦
[code="js"]
Ext.app.SearchField = Ext.extend(Ext.form.TwinTriggerField, {
initComponent : function(){
Ext.app.SearchField.superclass.initComponent.call(this);
this.on('specialkey', function(f, e){
if(e.getKey() == e.ENTER){//按回车键时
this.onTrigger2Click();
}
}, this);
},

validationEvent:false,
validateOnBlur:false,
trigger1Class:'x-form-clear-trigger',
trigger2Class:'x-form-search-trigger',
hideTrigger1:true,
width:180,
hasSearch : false,
paramName : 'query',//查询的参数名

onTrigger1Click : function(){//清空查询条件
    if(this.hasSearch){
        this.el.dom.value = '';
        var o = {start: 0};
        this.store.baseParams = this.store.baseParams || {};
        this.store.baseParams[this.paramName] = '';
        this.store.reload({params:o});
        this.triggers[0].hide();
        this.hasSearch = false;
    }
},

onTrigger2Click : function(){//点击查询按钮或回车调用该方法
    var v = this.getRawValue();
    if(v.length < 1){
        this.onTrigger1Click();
        return;
    }
    var o = {start: 0};
    this.store.baseParams = this.store.baseParams || {};
    this.store.baseParams[this.paramName] = v;
    this.store.reload({params:o});
    this.hasSearch = true;
    this.triggers[0].show();
}

});
[/code]