dijit.InlineEditBox与dijit.form.Select的结合

Question

我正在尝试使用dijit.form.Select作为dijit.InlineEditBox的编辑器。似乎出现了两个问题/意外行为：

1. Inconsistently，在选择后，InLineEditBox没有将初始值设置为selected
2. Consistently，，应该隐藏的值将被显示，而不是标签。

下面是工作代码：http://jsfiddle.net/mimercha/Vuet8/7/

jist

<span dojoType="dijit.InlineEditBox" editor="dijit.form.Select" 
  editorParams="{ 
    options: [
      {label:'None',value:'none'},
      {label:'Student',value:'stu'},
      {label:'Professor',value:'prof',selected:true},
    ],
    style:'width:1000px;',
  }"
  editorStyle="width: 1000px;"
>
</span>

任何帮助都是非常感谢的！谢谢!

Answer 1

好吧，经过几个小时与混乱的dijit.InlineEditBox做斗争之后，我想我已经有了解决剩下的问题的方法(#2)。

编辑:我对#2的第一个解决方案仍然有缺陷；调用get(' value ')时，http://jsfiddle.net/kfranqueiro/Vuet8/10/的实现永远不会返回实际的内部值。

编辑#2: --我已经修改了解决方案--使值仍然保留真实的(隐藏的)值，使displayedValue保持独立。看看这是否更有效：

http://jsfiddle.net/kfranqueiro/Vuet8/13/

首先，回顾一下那些不在IRC上的人：

问题1之所以发生，是因为值没有被正确地设置为InlineEditBox本身的顶级属性；它没有从包装好的小部件中正确地提取它。

问题3之所以发生，是因为InlineEditBox执行一些非常疯狂的逻辑来解决样式。结果发现，InlineEditBox还将设置宽度公开为顶级数值属性，从而使设置宽度变得特别容易。(虽然IINM还可以将百分比指定为字符串，例如"50%")

现在，问题#2...that是凶手。问题是，虽然InlineEditBox似乎有一些逻辑来解释具有displayedValue属性的小部件，但这个逻辑有时是错误的(它期望小部件上实际存在displayedValue属性，但情况不一定是这样)，而其他时候则完全缺失(当InlineEditBox初始化时)。在我自己对InlineEditBox的InlineEditBox d扩展和它使用的内部小部件_InlineEditor中，我已经尽了最大努力解决这些问题--因为一般来说，保持原始发行版不受影响是个好主意。

它不是很漂亮(我为理解和想出这个问题而挖掘的底层代码也不太好)，但它似乎在做它的工作。

但伙计，这挺有意思的。而且可能也与我的兴趣相关，因为我们在UI中也使用了这个小部件，以后还会更多地使用它。

如果有什么事与愿违的话请告诉我。

Answer 2

嗯..。

    <span dojoType="dijit.InlineEditBox" editor="dijit.form.Select" 
  editorParams="{ 
    options: [
      {label:'None',value:'none'},
      {label:'Student',value:'stu'},
      {label:'Professor',value:'prof',selected:true},**<<<<** and this comma is for?
    ],
    style:'width:1000px;',**<<<<** and this comma is for?
  }"
  editorStyle="width: 1000px;"
>
</span>

另外，在使用dijit.form.Select时，选择的值不是“选择”，而是值。

如果您输入prof if <span ...blah > prof </span>，则将选择正确的选择选项;)

Dijit选择检查值，而不是attr。

Answer 3

这可能在最近的Dojo中得到了修正--参见http://bugs.dojotoolkit.org/ticket/15141 --但是使用1.7.3我发现这是有效的：

在我的应用程序目录中，在与dojo、Dijit和dojox相同的级别上，我创建了一个文件InlineSelectBox.js，它用代码扩展InlineEditBox以从dijit的值设置关联的domNode上的domNode，并将该代码连接到onChange()事件：

define(["dijit/InlineEditBox", 
        "dijit/form/Select",
        "dojo/on",
        "dojo/_base/declare",
        "dojo/_base/array"
        ],
function(InlineEditBox, Select, on, declare, array){
    return declare(InlineEditBox, {
        _setLabel: function() {
            array.some(this.editorParams.options, function(option, i){
                if (option.value == this.value) {
                    this.domNode.innerHTML = option.label;
                    return true;
                }
                return false;
            }, this);
        },

        postMixInProperties: function(){
            this.inherited(arguments);
            this.connect(this, "onChange", "_setLabel");
        },

        postCreate: function(){
            this.inherited(arguments);
            this._setLabel();
        }
    });
});

然后，在我看来脚本：

require(["dojo/ready", 
         "app/InlineSelectBox",
         "dijit/form/Select"
         ],
function(ready, InlineSelectBox, Select){
    ready(function(){
        // Add code to set the options array
        var options = [];
        // Add code to set the initial value
        var initialValue = '';
        var inlineSelect = new InlineSelectBox({
            editor: Select,
            editorParams: {options: options},
            autoSave: true,
            value: initialValue
        }, "domNodeToAttachTo");
    });
});