partkeepr

commit 1bf8aef9d2489d4f807037fa5ddc1acbe6270bc1
parent 2b4328dadce03c4e445a6199a7160dbcafc02187
Author: Felicitus <felicitus@felicitus.org>
Date:   Mon, 14 May 2012 09:53:02 +0200

Display category, description and footprint when choosing parts. Fixes #166

Diffstat:
M
src/frontend/js/Components/Widgets/RemotePartComboBox.js
 | 
70
++++++++++++++++++++++++++++++++++++++++++++++++----------------------

1 file changed, 48 insertions(+), 22 deletions(-)
diff --git a/src/frontend/js/Components/Widgets/RemotePartComboBox.js b/src/frontend/js/Components/Widgets/RemotePartComboBox.js
@@ -1,26 +1,52 @@
 /**
- * Represents a part combobox which supports type-ahead and remote querying. 
+ * Represents a part chooser which supports type-ahead and remote querying.
  */
-Ext.define("PartKeepr.RemotePartComboBox",{
-    extend:"Ext.form.field.ComboBox",
-    alias: 'widget.RemotePartComboBox',
-    displayField: 'name',
-    valueField: 'id',
-    queryMode: 'remote',
-    triggerAction: 'all',
-    typeAhead: true,
-    typeAheadDelay: 100,
-    pageSize: 30,
-    minChars: 2,
-    forceSelection: true,
-    initComponent: function () {
-    	this.store = Ext.create("Ext.data.Store",
-    			{
-    				model: 'PartKeepr.Part',
-    				proxy: PartKeepr.getRESTProxy("Part"),
-    				autoLoad: true
-    			});
+Ext.define("PartKeepr.RemotePartComboBox", {
+	extend : "Ext.form.field.ComboBox",
+	alias : 'widget.RemotePartComboBox',
+	
+	// Fixed configurations for the data
+	displayField : 'name',
+	valueField : 'id',
+	queryMode : 'remote',
+	triggerAction : 'all',
+	
+	// Typing configuration
+	typeAhead : true,
+	typeAheadDelay : 100,
+	minChars : 2,
+	
+	// Misc settings
+	pageSize : 30,
+	forceSelection : true,
+	
+	/**
+	 * Initializes the component. Applies a custom list configuration and an own store, then calls the ComboBox
+	 * superclass.
+	 */
+	initComponent : function() {
+
+		// Custom list configuration to display additional information about the part
+		this.listConfig = {
+			loadingText : i18n('Searching...'),
+			emptyText : i18n('No matching parts found.'),
+
+			itemTpl : Ext.create(	'Ext.XTemplate',
+									'<div style="margin-bottom: 5px;">',
+									'<h2>{name}</h2>',
+									'<p>{categoryPath}</p>',
+									'<p>{description}</p>',
+									'<p>{footprintName}</p>',
+									'</div>')
+		};
+
+		// Create a separate store used for querying parts
+		this.store = Ext.create("Ext.data.Store", {
+			model : 'PartKeepr.Part',
+			proxy : PartKeepr.getRESTProxy("Part"),
+			autoLoad : true
+		});
+
 		this.callParent();
-    }
+	}
 });
-