将 dijit.InlineEditBox 与 dijit.form.Select 结合使用

Question

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

1. 不一致，InLineEditBox 没有将初始值设置为选定的
2. 一致，选择一个选项后，显示应隐藏的值而不是标签。
3. 宽度未设置为 130px

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

要点

<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 的第一个解决方案仍然有缺陷； http://jsfiddle.net/kfranqueiro/Vuet8/10/ 的实现永远不会返回调用 get('value') 时的实际内部值。

编辑#2：我修改了解决方案，以便该值仍然保留真实（隐藏）值，使 displayedValue 保持独立。看看这是否效果更好：

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

首先，为那些没有使用 IRC 的人回顾一下：

问题 #1 的发生是由于值没有正确设置为 InlineEditBox 本身的顶级属性；它没有从包装的小部件中正确拾取它。

问题 #3 的发生是由于 InlineEditBox 执行一些非常疯狂的逻辑来尝试解析样式。事实证明，InlineEditBox 通过将其公开为顶级数字属性，使设置宽度变得特别容易。 （尽管 IINM 您也可以将百分比指定为字符串，例如“50%”）

现在，问题#2...这就是杀手。问题是，虽然 InlineEditBox 似乎有一些逻辑来解释具有 displayedValue 属性的小部件，但该逻辑有时是错误的（它需要一个 displayedValue code> 属性实际存在于小部件上，但情况不一定如此），而其他时候则完全缺失（当 InlineEditBox 初始化时）。我已经在自己的 InlineEditBox 及其使用的内部小部件 _InlineEditor 的 dojo.declare 扩展中尽我所能地解决了这些问题 - 因为通常最好保持原始发行版不变。

它并不漂亮（我为理解并提出这一点而挖掘的底层代码也不是），但它似乎正在完成它的工作。

但是伙计，这很有趣。并且也可能与我的兴趣相关，因为我们也在 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 时，选定的值不是 attr“selected”而是值。

如果您在 内输入 prof prof 比您正确选择的选项将被选择;)

Dijit select 检查 VALUE，而不是 attr。

Answer 3

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

在我的应用程序目录中，与 dojo、dijit 和 dojox 处于同一级别，我创建了一个文件 InlineSelectBox.js，它使用代码扩展了 InlineEditBox，以在关联的 domNode 上设置 HTML Dijit 的值，并将该代码连接到 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");
    });
});

Answer 4

几个月前我正在处理这种情况，但没有找到解决方案，我制定了自己的算法。

我在 Onclick 上放置了一个带有事件的 div，该事件以编程方式在该 div 上构建了一个带有我想要使用的商店的过滤选择。

function create(id,value){
    var name =  dojo.byId(id).innerHTML;
    dojo.byId(id).parentNode.innerHTML = '<div id="select"></div>';

    new dijit.form.FilteringSelect({
        store: store,
        autoComplete: true,
        invalidMessage:"Invalid Selection",
        style: "width: 80px;",  
        onBlur: function(){ },  
        onChange: function(){ },
        required: true,
        value: value,
        disabled: false,
        searchAttr: "name",
        id: "status"+id,
        name: "status"
    },"select");

    dijit.byId('status'+id).focus();
}

我使用 onBlur 事件来销毁小部件，并使用 onchange 来通过 xhr 保存新值。

焦点位于下方，因为 onBlur 无法正常工作。

注意：功能尚不完整。