diff --git a/static/script/combo_1.js b/static/script/combo_1.js index da224bbb1a6afba401e5b588001af11abf4e5dff..fbc5533dd4fc3b2e0ea6e35d7e3ead28b16fab04 100644 --- a/static/script/combo_1.js +++ b/static/script/combo_1.js @@ -1,7 +1,7 @@ /** * combo_1.js * - * To test and debug combo widget and associated store. + * To test and debug combo widget with a local store. * * $Id$ * @@ -9,6 +9,12 @@ Ext.namespace('App.combo'); +App.combo.ComboBox = Ext.extend(Ext.form.ComboBox, { + selectOnFocus: true, + triggerAction: 'all', + typeAhead: true, +}); + /** * main function * The scope, this, contains the models return by the server @@ -17,11 +23,55 @@ Ext.namespace('App.combo'); var main = function(){ // var model = this.form.distributions; - var model = this.form.rpms; +// var model = this.form.rpms; + +// console.log("Model items"); +// console.dir(model.items); + + var store = new Ext.data.ArrayStore({ + fields: [ + {name: 'id', type: 'int'}, + {name: 'idcategory', type: 'int'}, + {name: 'category'}] + }); + + var myData = [ + [1, 10, 'database'], + [2, 11, 'development'], + [3, 12, 'emulator'], + [4, 13, 'system'], + ]; + + store.loadData(myData); - console.log("Model items"); - console.dir(model.items); + var combo = new App.combo.ComboBox({ + displayField: "category", + fieldLabel: "Category", + valueField: "id", + hiddenName: "idcategory", + emptyText: "Select a category... ", + mode: 'local', + store: store + }); + + combo.on("select", function(){ + console.log(this.getValue()); + }); + form = new Ext.FormPanel({ + renderTo: "appmain", + bodyStyle: 'padding:5px 5px 0', + height: 50, + width: 350, + defaultType: 'textfield', + frame: true, + labelWidth: 75, + items: [combo], + }); + + // select a value + combo.setValue(2); + }; diff --git a/static/script/combo_2.js b/static/script/combo_2.js new file mode 100644 index 0000000000000000000000000000000000000000..9a94206ba3ff64ac3e7263f9dd38a02b34520038 --- /dev/null +++ b/static/script/combo_2.js @@ -0,0 +1,99 @@ +/** + * combo_2.js + * + * To test and debug combo widget with a remote store. + * + * $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 + */ + +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({ + displayField: "category", + fieldLabel: "Category", + valueField: "id", + hiddenName: "idcategory", + emptyText: "Select a category... ", + store: store, + }); + + combo.on("select", function(){ + console.log(this.getValue()); + }); + + form = new Ext.FormPanel({ + renderTo: "appmain", + bodyStyle: 'padding:5px 5px 0', + height: 50, + width: 350, + defaultType: 'textfield', + frame: true, + labelWidth: 75, + items: [combo], + }); + + // to select a value the store has to be loaded + combo.setValue(5); +}; + + +Ext.onReady(function(){ + + Ext.QuickTips.init(); + + // Request widget models from the server + // It is strongly relate'd to the database model + var models = new App.Cfg({ + url: App.cfgurl, + }); + + // The response of the server is asynchronous. + // When the model is load launch the main function + models.on('cfgloaded', main, models); + + //request the models from the server + models.load({ + debug: App.debug, + exclude: ["systemsAddRpms", "systemsRemoveRpms"], + }) + +}); \ No newline at end of file diff --git a/static/script/form_1.js b/static/script/form_1.js index fee80ba5657cf406c7ee80431ca127a7760e9eab..63fc6e8401b2e392ad0ab4d1675ba388f50345ec 100644 --- a/static/script/form_1.js +++ b/static/script/form_1.js @@ -3,7 +3,7 @@ * * To test and debug form. * - * $Id: form_1.js -1 $ + * $Id$ * */ Ext.namespace('App.form'); @@ -83,14 +83,7 @@ var main = function(){ // render comboboxes to get see the correct values var combo = form.items.items[2]; - combo.getStore().load(); - combo.selectByValue(5); - console.log(combo.getRawValue()); - console.log(combo.getValue()); - console.log(combo.getName()); - console.log(combo.valueField); - console.log(combo.displayField); - console.log(combo.hiddenField); + combo.setValue(2); };