1

dijit.InlineEditBox のエディターとして dijit.form.Select を使用しようとしています。2 つの問題 / 予期しない動作が発生するようです。

  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に対する私の最初の解決策にはまだ欠陥があります。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ウィジェットにプロパティが実際に存在することを期待していますが、必ずしもそうではありません）。完全に（InlineEditBoxが初期化されるとき）。dojo.declareInlineEditBoxとそれが使用する内部ウィジェット_InlineEditorの独自のd拡張機能で可能な限りこれらを回避しました。通常、元のディストリビューションはそのままにしておくことをお勧めします。

それはきれいではありませんが（私がこれを理解して思いつくために掘り下げた基礎となるコードでもありません）、それはその仕事をしているようです。

しかし、男、これはかなり面白かったです。また、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"ではなく、valueです。

そして、あなたがあなたの適切な選択されたオプションよりも内部に教授を入力すると、選択されます;）<span ...blah > prof </span>

Dijit selectは、attrではなくVALUEのチェックを選択します。

于 2011-03-07T01:19:27.477 に答える
1

これは最近の Dojo で修正される可能性があります - http://bugs.dojotoolkit.org/ticket/15141を参照してください- しかし、1.7.3 を使用すると、これが機能することがわかりました:

私の app ディレクトリで、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");
    });
});
于 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 に答える