Okay, I think I have isolated the issue. I have included below three
variations of Martin Wittemann's original code demonstrating the
target2model conversion. The first one works, the second two do not. These
were all three tested in the online playground at this url:

http://demo.qooxdoo.org/current/playground/#Hello%20World-ria
http://demo.qooxdoo.org/current/playground/#Hello%20World-ria 

(Apparently you can't specify a blank playground, so just erase the hello
world stuff first)


*CASE 1:*


*This works fine:*

/* ************************************************************************

   qooxdoo - the new era of web development

   http://qooxdoo.org

   Copyright:
     2004-2008 1&1 Internet AG, Germany, http://www.1und1.de

   License:
     LGPL: http://www.gnu.org/licenses/lgpl.html
     EPL: http://www.eclipse.org/org/documents/epl-v10.php
     See the LICENSE file in the project's top-level directory for details.

   Authors:
     * Martin Wittemann (martinwittemann)

************************************************************************ */

/**
 * @tag databinding
 * @tag list contorller
 * @tag form controller
 */
qx.Class.define("demobrowser.demo.data.FormAndListController",
{
  extend : qx.application.Standalone,

  members :
  {
    main: function()
    {
      this.base(arguments);

      // create some dummy data
      var myFormData = {
        select: null
      };
      var formModel = qx.data.marshal.Json.createModel(myFormData);

      var selectModel = qx.data.marshal.Json.createModel([
          {id: "item1", name: "This is Item #1"}, 
          {id: "item2", name: "This is Item #2"}, 
          {id: "item3", name: "This is Item #3"}, 
          {id: "item4", name: "This is Item #4"}
        ]);

      // create the form
      var form = new qx.ui.form.Form();

      // device type
      var selectBox = new qx.ui.form.SelectBox();
      new qx.data.controller.List(selectModel, selectBox, "name");
      form.add(selectBox, "Select");

      // create the form and add it to the root
      this.getRoot().add(new qx.ui.form.renderer.Single(form), {left: 30,
top: 20});

      // create a form controller!
      var fc = new qx.data.controller.Form(formModel, form);
      
      // bind target and control
      fc.addBindingOptions("Select", {converter: function(data) {
        // model2target
        for (var i = 0; i < selectModel.getLength(); i++) {
          if (selectModel.getItem(i).getId() == data) {
            return selectModel.getItem(i)
          }
        }
        return selectModel.getItem(0);
      }}, {converter: function(data) {
        // target2model
        return data.getId();
      }});

      // A button to log the models content
      var logButton = new qx.ui.form.Button("Show form model data in the
log");
      this.getRoot().add(logButton, {left: 240, top: 20});
      logButton.addListener("execute", function() {
        this.debug(qx.dev.Debug.debugProperties(formModel));
      }, this);
    }
  }
});​



*CASE 2:*


*This does NOT work. Generates error:
-- 180754587 qx.data.controller.Form[2806-0]: Could not bind property
select_box of qx.data.model.select[2538-0]
The only line that's different is highlighted below. Apparently we are not
permitted to specify our own internal name for the form item for some
reason?:*

/* ************************************************************************

   qooxdoo - the new era of web development

   http://qooxdoo.org

   Copyright:
     2004-2008 1&1 Internet AG, Germany, http://www.1und1.de

   License:
     LGPL: http://www.gnu.org/licenses/lgpl.html
     EPL: http://www.eclipse.org/org/documents/epl-v10.php
     See the LICENSE file in the project's top-level directory for details.

   Authors:
     * Martin Wittemann (martinwittemann)

************************************************************************ */

/**
 * @tag databinding
 * @tag list contorller
 * @tag form controller
 */
qx.Class.define("demobrowser.demo.data.FormAndListController",
{
  extend : qx.application.Standalone,

  members :
  {
    main: function()
    {
      this.base(arguments);

      // create some dummy data
      var myFormData = {
        select: null
      };
      var formModel = qx.data.marshal.Json.createModel(myFormData);

      var selectModel = qx.data.marshal.Json.createModel([
          {id: "item1", name: "This is Item #1"}, 
          {id: "item2", name: "This is Item #2"}, 
          {id: "item3", name: "This is Item #3"}, 
          {id: "item4", name: "This is Item #4"}
        ]);

      // create the form
      var form = new qx.ui.form.Form();

      // device type
      var selectBox = new qx.ui.form.SelectBox();
      new qx.data.controller.List(selectModel, selectBox, "name");

*      //===================================================
      // form.add(selectBox, "Select"); // THIS WORKS
      form.add(selectBox, "Select", null, "select_box");  // THIS DOES NOT
WORK
      //===================================================*

      // create the form and add it to the root
      this.getRoot().add(new qx.ui.form.renderer.Single(form), {left: 30,
top: 20});

      // create a form controller!
      var fc = new qx.data.controller.Form(formModel, form);
      
      // bind target and control
      fc.addBindingOptions("Select", {converter: function(data) {
        // model2target
        for (var i = 0; i < selectModel.getLength(); i++) {
          if (selectModel.getItem(i).getId() == data) {
            return selectModel.getItem(i)
          }
        }
        return selectModel.getItem(0);
      }}, {converter: function(data) {
        // target2model
        return data.getId();
      }});

      // A button to log the models content
      var logButton = new qx.ui.form.Button("Show form model data in the
log");
      this.getRoot().add(logButton, {left: 240, top: 20});
      logButton.addListener("execute", function() {
        this.debug(qx.dev.Debug.debugProperties(formModel));
      }, this);
    }
  }
});​


*CASE 3:*


*This does not work and generates a similar error to above:
-- 400313 qx.data.controller.Form[767-0]: Could not bind property select_box
of qx.data.model.select[600-0]
 Apparently if the CAPTION NAME of the form item is appreciably different
from the INTERNAL name of the model item, it won't work. I've tried spaces,
various names in camel-case, various things, etc. Only a SIMPLE name works.
Presumably if we knew how the form item's CAPTION NAME were internally
transformed it might be possible to sync the generated form item name with
the model item name.*

/* ************************************************************************

   qooxdoo - the new era of web development

   http://qooxdoo.org

   Copyright:
     2004-2008 1&1 Internet AG, Germany, http://www.1und1.de

   License:
     LGPL: http://www.gnu.org/licenses/lgpl.html
     EPL: http://www.eclipse.org/org/documents/epl-v10.php
     See the LICENSE file in the project's top-level directory for details.

   Authors:
     * Martin Wittemann (martinwittemann)

************************************************************************ */

/**
 * @tag databinding
 * @tag list contorller
 * @tag form controller
 */
qx.Class.define("demobrowser.demo.data.FormAndListController",
{
  extend : qx.application.Standalone,

  members :
  {
    main: function()
    {
      this.base(arguments);

      // create some dummy data
      var myFormData = {
        myselect: null // Changed the item's name
      };
      var formModel = qx.data.marshal.Json.createModel(myFormData);

      var selectModel = qx.data.marshal.Json.createModel([
          {id: "item1", name: "This is Item #1"}, 
          {id: "item2", name: "This is Item #2"}, 
          {id: "item3", name: "This is Item #3"}, 
          {id: "item4", name: "This is Item #4"}
        ]);

      // create the form
      var form = new qx.ui.form.Form();

      // device type
      var selectBox = new qx.ui.form.SelectBox();
      new qx.data.controller.List(selectModel, selectBox, "name");

*      //===================================================
      form.add(selectBox, "MySelect"); // Attempted to CAPTION the item
similarly, taking a guess at the internal name translation
      //===================================================*

      // create the form and add it to the root
      this.getRoot().add(new qx.ui.form.renderer.Single(form), {left: 30,
top: 20});

      // create a form controller!
      var fc = new qx.data.controller.Form(formModel, form);
      
      // bind target and control

*      //===================================================
      fc.addBindingOptions("MySelect", {converter: function(data) {   // SO
THIS BINDING FAILS
      //===================================================*

        // model2target
        for (var i = 0; i < selectModel.getLength(); i++) {
          if (selectModel.getItem(i).getId() == data) {
            return selectModel.getItem(i)
          }
        }
        return selectModel.getItem(0);
      }}, {converter: function(data) {
        // target2model
        return data.getId();
      }});

      // A button to log the models content
      var logButton = new qx.ui.form.Button("Show form model data in the
log");
      this.getRoot().add(logButton, {left: 240, top: 20});
      logButton.addListener("execute", function() {
        this.debug(qx.dev.Debug.debugProperties(formModel));
      }, this);
    }
  }
});​



--
View this message in context: 
http://qooxdoo.678.n2.nabble.com/Having-problem-handling-selectBox-with-key-value-pairs-tp7581016p7581025.html
Sent from the qooxdoo mailing list archive at Nabble.com.

------------------------------------------------------------------------------
Live Security Virtual Conference
Exclusive live event will cover all the ways today's security and 
threat landscape has changed and how IT managers can respond. Discussions 
will include endpoint security, mobile security and the latest in malware 
threats. http://www.accelacomm.com/jaw/sfrnl04242012/114/50122263/
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

Reply via email to