Verwenden Sie dijit.InlineEditBox mit dijit.form.Select

Question

Ich versuche, eine dijit.form.Select als Editor für meine dijit.InlineEditBox zu verwenden. Zwei Probleme/unerwartetes Verhalten scheinen aufzutreten:

1. Unregelmäßig, die InLineEditBox nicht den Anfangswert gesetzt, wie
2. Konsequent ausgewählt hat, nach Wahl der Auswahl des Wert, der ausgeblendet werden soll, wird statt der gezeigten Etikette. http://jsfiddle.net/mimercha/Vuet8/7/

   Die 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> 
   

   Jede Hilfe wird sehr geschätzt:

3. Die Breite wird auf 130px

Hier funktioniert Code nicht gesetzt! Vielen Dank!

Answer 1

Okay, nach ein paar weiteren Stunden mit dem Chaos zu kämpfen, das dijit.InlineEditBox ist, denke ich, ich habe die Lösung für das verbleibende Problem (# 2).

EDIT: Meine erste Lösung zu # 2 ist immer noch fehlerhaft; Die Implementierung unter http://jsfiddle.net/kfranqueiro/Vuet8/10/ wird niemals den tatsächlichen internen Wert zurückgeben, wenn get ('value') aufgerufen wird.

EDIT # 2: Ich habe die Lösung überarbeitet, so dass der Wert immer noch den wahren (versteckten) Wert behält und displayvalue separat bleibt. Prüfen Sie, ob das funktioniert besser:

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

Erstens, für diejenigen rekapitulieren, die nicht im IRC waren:

Ausgabe # 1 wurde aufgrund geschieht nicht richtig als Top-Level-Eigenschaft auf Wert ist der InlineEditBox selbst; es hat es nicht richtig aus dem eingepackten Widget übernommen.

Problem # 3 geschah aufgrund einiger ziemlich verrückter Logik, die InlineEditBox ausführt, um zu versuchen, Stile aufzulösen. Es stellt sich jedoch heraus, dass InlineEditBox die Einstellung der Breite besonders einfach macht, indem es auch als numerisches Attribut der obersten Ebene verfügbar gemacht wird. (Obwohl IINM können Sie auch einen Prozentsatz als Zeichenfolge angeben, z. B. "50%")

Nun, Ausgabe # 2 ... das war der Mörder. Das Problem ist, während InlineEditBox scheint einige Logik Widgets mit einem displayedValue Attribut zu haben, ist diese Logik manchmal falsch (es erwartet eine displayedValue Eigenschaft auf dem Widget tatsächlich vorhanden ist, die nicht unbedingt der Fall ist), und andere Zeiten fehlen ganz (wenn die InlineEditBox initialisiert wird). Ich habe so gut wie möglich in meiner eigenen dojo.declare d Erweiterungen zu InlineEditBox und dem internen Widget, das es verwendet, _InlineEditor gearbeitet - da es im Allgemeinen eine gute Idee ist, die ursprüngliche Distribution unberührt zu lassen.

Es ist nicht schön (noch ist der zugrunde liegende Code, den ich durchforstet habe, um zu verstehen und damit zu kommen), aber es scheint seine Arbeit zu machen.

Aber Mann, das war ziemlich interessant. Und möglicherweise auch für meine Interessen relevant, da wir dieses Widget auch in unseren UIs verwendet haben und es in Zukunft häufiger verwenden werden.

Lassen Sie mich wissen, wenn etwas nach hinten losgeht.

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> 

Auch wenn dijit.form.Select Verwendung gewählter Wert wird nicht attr "ausgewählt", sondern Wert.

Und wenn Sie prof innen <span ...blah > prof </span> als der richtige gewählte Option wird ausgewählt eingeben;)

Dijit prüft Wert auswählen, nicht attr.

Answer 3

Ich hatte vor ein paar Monaten mit dieser Situation zu tun, und ohne eine Auflösung zu finden, habe ich meinen eigenen Algorithmus erstellt.

Ich legte ein div mit einem Ereignis auf Onclick, die programmatisch ein Filtering Select auf diesem div mit dem Speicher, den ich verwenden möchte, erstellen.

Ich habe das onBlur-Ereignis verwendet, um das Widget zu zerstören, und den onchange, um xhr den neuen Wert zu speichern.

Der Fokus liegt unten, weil der onBlur nicht richtig funktioniert.

Hinweis: Die Funktion ist nicht vollständig.

Answer 4

Das in der letzten Dojo befestigt werden kann - siehe http://bugs.dojotoolkit.org/ticket/15141 - aber 1.7.3 unter Verwendung fand ich dies gearbeitet:

In meinem App-Verzeichnis auf dem gleichen Niveau wie Dojo, dijit und Dojox, habe ich eine Datei InlineSelectBox.js die InlineEditBox mit Code erweitert das HTML auf dem zugehörigen DOMNode aus dem Wert der Dijit setzen, und welche Drähte bis dieser Code an die onChange() Ereignis:

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(); 
     } 
    }); 
}); 

Dann meiner Meinung nach Skript:

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"); 
    }); 
});