1

我正在尝试使用 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>

任何帮助是极大的赞赏！谢谢！

4

4 回答 4

1

好的，在与混乱斗争了几个小时之后dijit.InlineEditBox，我想我已经解决了剩下的问题（#2）。

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

编辑#2：我已经修改了解决方案，以便 value 仍然保留真实（隐藏）值，保持 displayValue 分开。看看这是否效果更好：

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

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

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

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

现在，问题#2……那是杀手。问题是，虽然 InlineEditBox 似乎有一些逻辑来解释具有displayedValue属性的小部件，但该逻辑有时是错误的（它希望displayedValue小部件上实际存在一个属性，这不一定是这种情况），并且有时会丢失完全（当 InlineEditBox 初始化时）。在我自己dojo.declare对 InlineEditBox 的 d 扩展及其使用的内部小部件 _InlineEditor 中，我已经尽我所能解决了这些问题——因为通常最好不要触及原始发行版。

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

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

让我知道是否适得其反。

于 2011-01-13T06:40:56.583 回答
1

嗯……

    <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”，而是值。

如果你在里面输入教授<span ...blah > prof </span>而不是你正确选择的选项将被选中；）

Dijit select 检查 VALUE，而不是 attr。

于 2011-03-07T01:19:27.477 回答
1

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

在我的应用程序目录中，与 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");
    });
});
于 2013-02-09T22:30:55.643 回答
0

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

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

注意：功能不完整。

于 2011-04-04T11:09:04.890 回答