/**
 * @author Ext.ux.form.SearchField example
 * http://www.sencha.com/
 * @class App.ux.form.field.SearchField
 * @extends Ext.form.field.Trigger
 * <p>Extends Triggers with an assoicated data store,
 * passing the entered text as an extra parameter to the store
 * For example:</p>
 * <pre><code>
		Ext.create('Ext.grid.Panel', {
			dockedItems: [{
				xtype: 'toolbar',
				dock: 'top',
				items: [{
					xtype: 'searchfield',
					store: Ext.data.StoreManager.lookup('store')
					}]
			}]
		});

		Ext.create('App.ux.form.field.SearchField', {
			store: Ext.data.StoreManager.lookup('store')
		});
	</code></pre>
*/
Ext.define('<%= app_name %>.ux.form.field.SearchField', {
	extend: 'Ext.form.field.Trigger',

	alias: 'widget.searchfield',

	trigger1Cls: Ext.baseCSSPrefix + 'form-clear-trigger',
	
	trigger2Cls: Ext.baseCSSPrefix + 'form-search-trigger',

	hasSearch : false,
	paramName : 'query',

	initComponent: function() {
		var me = this;

		me.callParent(arguments);
		me.on('specialkey', function(f, e){
			if (e.getKey() == e.ENTER) {
				me.onTrigger2Click();
			}
		});

		// We're going to use filtering
		me.store.remoteFilter = true;

		// Set up the proxy to encode the filter in the simplest way as a name/value pair

		// If the Store has not been *configured* with a filterParam property, then use our filter parameter name
		if (!me.store.proxy.hasOwnProperty('filterParam')) {
			me.store.proxy.filterParam = me.paramName;
		}
		me.store.proxy.encodeFilters = function(filters) {
			return filters[0].value;
		}
	},

	afterRender: function(){
		this.callParent();
		this.triggerCell.item(0).setDisplayed(false);
	},

	onTrigger1Click : function(){
		var me = this;

		if (me.hasSearch) {
			me.setValue('');
			me.store.clearFilter();
			me.hasSearch = false;
			me.triggerCell.item(0).setDisplayed(false);
			me.updateLayout();
		}
	},

	onTrigger2Click : function(){
		var me = this,
			store = me.store,
			proxy = store.getProxy(),
			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.store.filter({
				id: me.paramName,
				property: me.paramName,
				value: value
			});
			me.hasSearch = true;
			me.triggerCell.item(0).setDisplayed(true);
			me.updateLayout();
		}
	}
});