Introduce the App.form.ComboBox.

controllers/default.py

@@ -73,6 +73,7 @@ def index():
 				os.path.join(base, 'static', 'appjs', 'combobox.js'),
 				os.path.join(base, 'static', 'appjs', 'entryform.js'),
 				os.path.join(base, 'static', 'appjs', 'vieweditgrid.js'),
+				os.path.join(base, 'static', 'appjs', 'appcombobox.js'),
 				os.path.join(base, 'static', 'appjs', 'appgrid.js'),
 				os.path.join(base, 'static', 'appjs', 'appgridroweditor.js'),
 				os.path.join(base, 'static', 'appjs', 'appgridrowcontextmenu.js'),

static/appjs/appcombobox.js

+/**
+ * A pre-configured combobox reading its data in the database.
+ * Design to work with the class HttpDb on the server side.
+ * 
+ * MANDATORY PROPERTIES:
+ * 		- table   		the name of the database table
+ * 		- displayField	field of the table shown in the combobox
+ * 		- valueField	field of the table return by the combobox 
+ * 
+ * All configuration properties of Ext.form.ComboBox are understood.
+ * 
+ * @extends Ext.form.ComboBox 
+ * @author $Author$
+ * @version $Id$
+ *
+ */
+Ext.namespace('App.form');
+
+App.form.ComboBox = Ext.extend(Ext.form.ComboBox, {
+
+	/**
+	 * @cfg {String} the database table where data are retrieve.
+	 * This parameter is send to the server as a baseParams.
+	 * This parameter is mandatory.
+	 */	
+	table: null,
+	
+	/**
+	 * @cfg {Boolean} actiate the debug on the server side
+	 * This parameter is send to the server as a baseParams.
+	 */	
+	debug: false,
+
+	/**
+	 * Predefined setting
+	 *
+	 */
+	mode:'remote',
+	selectOnFocus: true,
+	triggerAction: 'all',
+	typeAhead: true,
+	
+	/**
+	 * The constructor
+	 * @param {Object} config
+	 */	
+	constructor: function(config){
+
+		Ext.apply(this, config);
+	
+		// defined the empty text from the field label
+		if(this.fieldLabel && !this.emptyText){
+			this.emptyText = "Select a "+this.fieldLabel+" ...";	
+		}
+
+		// setup the store if not defined by the user
+		// the autoLoad property set at true is mandatory to
+		// set a value when the combobox is not yet expend
+		if (!this.store) {
+			this.store = new App.data.JsonStore({
+				url: App.dburl,
+				table: this.table,
+				tableFields: [this.valueField, this.displayField],
+				sortInfo: {field: this.displayField},
+				debug: this.debug,
+				autoLoad: true,
+			});
+		}
+
+		// construct the underlying class. DON'T MOVE
+		App.ComboBox.superclass.constructor.apply(this);
+		
+		// This few lines are required to set a value 
+		// when the combobox is not yet expend
+		this.store.on('load', function(){
+			this.setValue(this.getValue());
+		}, this);
+	},
+});
+
+Ext.reg('xcombobox', App.form.ComboBox);

static/script/combo_2.js

@@ -6,16 +6,8 @@
  * $Id$
  *
  */
-Ext.namespace('App.combo');
 
 
-App.combo.ComboBox = Ext.extend(Ext.form.ComboBox, {
-	mode: 'remote',
-	selectOnFocus: true,
-	triggerAction: 'all',
-	typeAhead: true,
-});
-
 /**
  * main function
  * The scope, this, contains the models return by the server
@@ -24,42 +16,18 @@ App.combo.ComboBox = Ext.extend(Ext.form.ComboBox, {
 var main = function(){
 
 //	console.dir(this);
-	var model = this.viewedit.rpmCategories.store;
-	console.dir(model);
-	
-	var store = new App.data.JsonStore({
-		url: App.dburl,
-		table: model.table,
-		tableFields: model.tableFields,
-		debug: true,
-		autoLoad: true,
-	});
 
-	// Here is the trick to set properly a user value
-	// in the initialization phase.
-	// the store have to be in autoLoad mode to force
-	// the loading of the store.
-	// then when it is load apply the user value.
-	// Trick found on the extjs forum.
-	// However when the user will select a new value the
-	// store will be load again !
-	store.on("load", function(){
-		combo.setValue(combo.getValue());
-	});
-	
-	var combo = new App.combo.ComboBox({
+	var combo = new App.form.ComboBox({
+		table: "rpmCategories",
 		displayField: "category",
-		fieldLabel: "Category",
 		valueField: "id",
-		hiddenName: "idcategory",
-		emptyText: "Select a category... ",
-		store: store,
+		fieldLabel: "Category",
 	});
 
 	combo.on("select", function(){
 		console.log(this.getValue());
 	});
-	
+		
 	form = new Ext.FormPanel({
 		renderTo: "appmain",
 		bodyStyle: 'padding:5px 5px 0',