Использование dijit.InlineEditBox с dijit.form.Select

Question

Я пытаюсь использовать dijit.form.Select как редактор для моего dijit.InlineEditBox. Две проблемы/неожиданное поведение, кажется, происходят:

1. непоследовательно, то InLineEditBox не имеет начальное значение, заданное в качестве выбранного
2. Последовательно, после выбора выбора, значение, которое должно быть скрыто показано вместо метка.
3. Ширина не установлен на уровне 130 пикс

Вот рабочий код: 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).

EDIT: Мое первое решение для № 2 по-прежнему имеет недостатки; реализация при http://jsfiddle.net/kfranqueiro/Vuet8/10/ никогда не вернет фактическое внутреннее значение при вызове get ('value').

EDIT # 2: Я обновил решение, так что значение все еще сохраняет реальное (скрытое) значение, сохраняя displayValue отдельно. Смотрите, если это работает лучше:

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

Во-первых, чтобы резюмировать для тех, кто не был на IRC:

Выпуск № 1 происходит из-за дорожить не правильно установить в качестве свойства верхнего уровня самого InlineEditBox; он не подбирал его правильно из обернутого виджета.

Проблема № 3 происходила из-за довольно сумасшедшей логики, которую выполняет InlineEditBox, чтобы попытаться разрешить стили. Оказывается, несмотря на то, что InlineEditBox делает установку ширины особенно простой, выставляя ее как числовой атрибут верхнего уровня. (Хотя IINM вы также можете указать процент в виде строки, например «50%»)

Теперь, номер № 2 ... это был убийца. Проблема заключается в том, что у InlineEditBox есть некоторая логика для учета виджетов, у которых есть атрибут displayedValue, эта логика иногда ошибочна (она ожидает, что свойство displayedValue действительно существует в виджетах, что необязательно) и в других случаях полностью отсутствует (когда инициализируется InlineEditBox). Я работал над такими, как мог, в своих собственных расширениях dojo.declare d для InlineEditBox и внутреннего виджета, который он использует, _InlineEditor - поскольку обычно рекомендуется оставить исходный дистрибутив нетронутым.

Это некрасиво (ни один из основополагающих кодов, которые я прорыл, чтобы понять и придумать это), но он, похоже, выполняет свою работу.

Но человек, это было довольно интересно. И потенциально уместным для моих интересов, так как мы использовали этот виджет в наших пользовательских интерфейсах, а также будем использовать его в будущем.

Дайте мне знать, если что-нибудь случится.

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, выбранное значение не атр "выбрано", но значение.

А если ввести проф внутри <span ...blah > prof </span> чем будет выбран ваш правильный выбран вариант;)

Dijit выбрать для проверки VALUE, не атр.

Answer 3

Я имел дело с этой ситуацией несколько месяцев назад, и не найдя разрешения, я сделал свой собственный алгоритм.

Я положил div с событием Onclick, который строит программно Filtering Select на этом 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 не работает должным образом.

примечание: функция не завершена.

Answer 4

Это может быть исправлено в последнее Dojo - см http://bugs.dojotoolkit.org/ticket/15141 - но с использованием 1.7.3 я нашел, что это сработало:

В моем каталоге приложения, на том же уровне, как додзе, Dijit и dojox, я создал файл InlineSelectBox.js который расширяет InlineEditBox с кодом, чтобы установить HTML на соответствующем DOMNode от стоимости 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"); 
    }); 
});