Question

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

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

以下是工作代码：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的第一个解决方案仍然存在缺陷; <{3}}的实现在调用get（'value'）时永远不会返回实际的内部值。

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

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

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

问题＃1正在发生，因为未正确设置值作为InlineEditBox本身的顶级属性;它没有从包装的小部件中正确地拾取它。

问题＃3正在发生，因为InlineEditBox为了尝试解析样式而执行了一些非常疯狂的逻辑。事实证明，InlineEditBox通过将其作为顶级数字属性公开，使设置宽度变得特别容易。（虽然IINM你也可以指定百分比作为字符串，例如“50％”）

现在，问题＃2 ......那是杀手。问题是，虽然InlineEditBox似乎有某些逻辑来解释具有displayedValue属性的小部件，但该逻辑有时是错误的（它期望displayedValue属性实际存在在小部件上，不一定是这种情况），其他时间完全丢失（当InlineEditBox初始化时）。我已经在我自己的dojo.declare d扩展InlineEditBox及其使用的内部窗口小部件_InlineEditor中尽可能地解决了这些问题，因为通常最好保持原始版本不受影响。

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

但男人，这很有趣。并且可能与我的兴趣相关，因为我们也在我们的UI中使用了这个小部件，并且将来会更多地使用它。

如果发生任何事情，请告诉我。

Answer 2

... HM

    <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“选中”而是值。

如果您在<span ...blah > prof </span>内输入教授，则会选择您选择的正确选项;）

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

Answer 3

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

在我的app目录中，与dojo，dijit和dojox处于同一级别，我创建了一个InlineSelectBox.js文件，该文件使用代码扩展InlineEditBox，以便在Dijit的值上设置相关domNode上的HTML，并将其连接起来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上构建Filtering Select。

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无法正常工作。

注意：该功能尚未完成。

使用dijit.InlineEditBox和dijit.form.Select

4 个答案: