diff --git a/controllers/default.py b/controllers/default.py index 9f02c091805c402e436c87339ec63952e526557b..3d19415c68aad19b7e2312f4a56cbb8de848912d 100644 --- a/controllers/default.py +++ b/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'), diff --git a/static/appjs/appcombobox.js b/static/appjs/appcombobox.js new file mode 100644 index 0000000000000000000000000000000000000000..b2acc8625d8bc2c1405e2821c52472c439e5d384 --- /dev/null +++ b/static/appjs/appcombobox.js @@ -0,0 +1,81 @@ +/** + * 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); diff --git a/static/script/combo_2.js b/static/script/combo_2.js index 9a94206ba3ff64ac3e7263f9dd38a02b34520038..3c030c5f253225d21a5af8ddac42f3628d1610e8 100644 --- a/static/script/combo_2.js +++ b/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',