SearchField.js in extjs_scaffold-0.2.0

- old
+ new

@@ -1,7 +1,7 @@
 /**
- * @author Adapted from Ext.ux.form.SearchField example
+ * @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
@@ -23,82 +23,76 @@
 		});
 	</code></pre>
 */
 Ext.define('<%= app_name %>.ux.form.field.SearchField', {
 	extend: 'Ext.form.field.Trigger',
+
 	alias: 'widget.searchfield',
 
-	trigger1Cls: 'x-form-clear-trigger',
-	trigger2Cls: 'x-form-search-trigger',
+	trigger1Cls: Ext.baseCSSPrefix + 'form-clear-trigger',
+	
+	trigger2Cls: Ext.baseCSSPrefix + 'form-search-trigger',
 
-	emptyText: '',
-	width: 180,
+	hasSearch : false,
+	paramName : 'query',
 
-	/**
-	* @cfg {store} store
-	* The associated data store to receive query
-	*/
-	store: '',
+	initComponent: function() {
+		var me = this;
 
-	/**
-	* @cfg {String} queryParam
-	* The query param name sent to store
-	* (defaults to <tt>query</tt>)
-	*/
-	queryParam: 'query',
+		me.callParent(arguments);
+		me.on('specialkey', function(f, e){
+			if (e.getKey() == e.ENTER) {
+				me.onTrigger2Click();
+			}
+		});
 
-	initComponent: function(){
-		this.callParent(arguments);
-		this.on('specialkey', this.checkEnterKey, this);
-	},
+		// We're going to use filtering
+		me.store.remoteFilter = true;
 
-	onRender: function() {
-		this.callParent(arguments);
-		this.triggerEl.elements[0].setDisplayed('none');
-	},
+		// Set up the proxy to encode the filter in the simplest way as a name/value pair
 
-	// Handle enter key presses, execute the search if the field has a value
-	checkEnterKey: function(field, e) {
-		var value = this.getValue();
-		if (e.getKey() === e.ENTER) {
-			this.search();
+		// 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;
+		}
 	},
 
-	onTrigger2Click: function() {
-		this.search();
+	afterRender: function(){
+		this.callParent();
+		this.triggerCell.item(0).setDisplayed(false);
 	},
 
-	onTrigger1Click: function() {
-		this.clearSearch();
-	},
-
-	search: function() {
+	onTrigger1Click : function(){
 		var me = this;
-		me.triggerEl.elements[0].setDisplayed('block');
-		var v = this.getRawValue();
-		if (v.length < 1){
-			me.clearSearch();
-			return;
+
+		if (me.hasSearch) {
+			me.setValue('');
+			me.store.clearFilter();
+			me.hasSearch = false;
+			me.triggerCell.item(0).setDisplayed(false);
+			me.updateLayout();
 		}
-		if (me.store) {
-			var query = {}
-			query[me.queryParam] = v;
-			Ext.apply(me.store.proxy.extraParams, query); 
-			me.store.load();
-		}
-		me.doComponentLayout();
 	},
 
-	clearSearch: function() {
-		var me = this;
-		me.triggerEl.elements[0].setDisplayed('none');
-		me.setValue('');
-		if (me.store) {
-			var query = {}
-			query[me.queryParam] = '';
-			Ext.apply(me.store.proxy.extraParams, query); 
-			me.store.load();
+	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();
 		}
-		me.doComponentLayout();
 	}
 });
\ No newline at end of file