Ext.define('Ext.ux.form.SearchField', {
    extend: 'Ext.form.field.Text',
 
    alias: 'widget.searchfield',
 
    triggers: {
        clear: {
            weight: 0,
            cls: Ext.baseCSSPrefix + 'form-clear-trigger',
            hidden: true,
            handler: 'onClearClick',
            scope: 'this'
        },
        search: {
            weight: 1,
            cls: Ext.baseCSSPrefix + 'form-search-trigger',
            handler: 'onSearchClick',
            scope: 'this'
        }
    },
 
    hasSearch : false,
    paramName : 'query',
 
    initComponent: function() {
        var me = this,
            store = me.store,
            proxy;
 
        me.callParent(arguments);
        me.on('specialkey', function(f, e){
            if (e.getKey() == e.ENTER) {
                me.onSearchClick();
            }
        });
        
        if (!store || !store.isStore) {
            store = me.store = Ext.data.StoreManager.lookup(store);
        }
 
        // We're going to use filtering 
        store.setRemoteFilter(true);
 
        // Set up the proxy to encode the filter in the simplest way as a name/value pair 
        proxy = me.store.getProxy();
        proxy.setFilterParam(me.paramName);
        proxy.encodeFilters = function(filters) {
            return filters[0].getValue();
        }
    },
 
    onClearClick : function(){
        var me = this,
            activeFilter = me.activeFilter;
 
        if (activeFilter) {
            me.setValue('');
            me.store.getFilters().remove(activeFilter);
            me.activeFilter = null;
            me.getTrigger('clear').hide();
            me.updateLayout();
        }
    },
 
    onSearchClick : function(){
        var me = this,
            value = me.getValue();
 
        if (value.length > 0) {
            // Param name is ignored here since we use custom encoding in the proxy. 
            // id is used by the Store to replace any previous filter 
            me.activeFilter = new Ext.util.Filter({
                property: me.paramName,
                value: value
            });
            me.store.getFilters().add(me.activeFilter);
            me.getTrigger('clear').show();
            me.updateLayout();
        }
    }
});