From 6c38485deccf51ce8911c7406ac645e2215c66ab Mon Sep 17 00:00:00 2001
From: Renaud Le Gac <renaud.legac@free.fr>
Date: Mon, 25 Jan 2010 21:05:50 +0000
Subject: [PATCH] Add new script to handle combobox and form.
---
static/script/combo_1.js | 58 +++++++++++++++++++++--
static/script/combo_2.js | 99 ++++++++++++++++++++++++++++++++++++++++
static/script/form_1.js | 11 +----
3 files changed, 155 insertions(+), 13 deletions(-)
create mode 100644 static/script/combo_2.js
diff --git a/static/script/combo_1.js b/static/script/combo_1.js
index da224bbb..fbc5533d 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 00000000..9a94206b
--- /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 fee80ba5..63fc6e84 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);
};
--
GitLab