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

Question

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

1. Неправильно, InLineEditBox не имеет начальное значение, установленное в качестве выбранного
2. Соответственно, после выбора выбора вместо метки отображается значение, которое должно быть скрыто.
3. Ширина не установлена ​​в 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

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

В моем каталоге приложений, на том же уровне, что и dojo, 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");
    });
});

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

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

Dijit select проверяет значение VALUE, а не attr.

Answer 3

Хорошо, после нескольких БОЛЕЕ часов, борющихся с беспорядком, который составляет dijit.InlineEditBox, я думаю, что у меня есть решение оставшейся проблемы (# 2).

РЕДАКТИРОВАТЬ: Мое первое решение # 2 -все еще несовершенен;реализация в http://jsfiddle.net/kfranqueiro/Vuet8/10/ никогда не вернет фактическое внутреннее значение при вызове get ('value').

EDIT # 2: Я изменил решение так, чтобыЗначение по-прежнему сохраняет реальное (скрытое) значение, сохраняя отдельно отображаемое значение.Посмотрите, работает ли это лучше:

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 4

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

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

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