Dojo _hasDropDown — Как декларативно связать свойства?

ExpandableSearchComponent.html:

<div class="${baseClass}">
    <div data-dojo-type="dijit/_HasDropDown" data-dojo-props="dropDown: 'containerNode'">
        <div data-dojo-type="dijit/form/TextBox"
        name="${SearchViewFieldName}Textbox"
        class="${baseClass}Textbox"
        data-dojo-props="placeholder:'${fieldName}'"></div>
        <div class="${baseClass}Container" data-dojo-attach-point="containerNode"></div>
    </div>
</div>

ExpandableSearchComponent.js:

/**
 * Javascript for ExpandableSearchComponent
 */
define([ "dojo/_base/declare", "dijit/_WidgetBase", "dijit/_TemplatedMixin",
        "dojo/text!./templates/ExpandableSearchComponent.html",
        "dijit/form/TextBox", "dijit/_HasDropDown" ], function(declare,
        _WidgetBase, _TemplatedMixin, template, TextBox) {

    return declare([ _WidgetBase, _TemplatedMixin ], {
        templateString : template,
        SearchViewFieldName : "",
        fieldName : ""
    });

});

Предназначен для использования следующим образом:

<div data-dojo-type="js/widgets/ExpandableSearchComponent"                                  
    data-dojo-props="SearchViewFieldName: 'machineSearchView.name', fieldName: 'Name:'">    
    <div data-dojo-type="dojo/store/Memory"                                                 
        data-dojo-id="machineNameStore"                                                     
        data-dojo-props="<s:property value='%{getNameJsonString()}'/>"></div>               
    <s:set name="MachineName" value="machineSearchView.name"                                
        scope="request"></s:set>                                                            
    <div data-dojo-type="dijit/form/ComboBox"                                               
        data-dojo-props="store:machineNameStore, searchAttr:'name', value:'${MachineName}'" 
        name="machineSearchView.name" id="machineSearchView.name"></div>                    
</div>

Цель:

  1. Сначала пользователь видит только текстовое поле с заполнителем.
  2. Когда они щелкают по нему, containerNode расширяется и показывает, что находится внутри containerNode, который может быть либо dijit/Select, либо dijit/form/ComboBox, либо dijit/form/FilteringSelect. Внутренний элемент также автоматически расширяется.
  3. Пользователь выбирает значение во внутреннем выборе, которое затем немного изменяется, поэтому оно отображается в текстовом поле как ${fieldName}:${value}.

Данные, которые в конечном итоге обрабатываются сервером, являются значением внутреннего элемента.

Проблема, с которой я сейчас сталкиваюсь, заключается в том, что я понятия не имею, как заставить _HasDropDown работать правильно, как указано выше. Он отображает TextBox как элемент с высотой 0, а затем сразу же показывает внутренний элемент. Я не уверен, как связать внутренние узлы, чтобы они работали так, как должно работать раскрывающееся меню.


javascript drop-down-menu dojo dijit.form
person Nzall    schedule 13.09.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

dijit/_HasDropDown — это миксин для добавления функциональности выпадающего списка в виджет по наследству. Он не предназначен для использования в качестве виджета, особенно в декларативной разметке.

dijit/_HasDropDown — миксин виджета dijit, обеспечивающий функциональность раскрывающегося меню. Такие виджеты, как dijit/form/Select, dijit/form/ComboBox, dijit/form/DropDownButton и dijit/form/DateTextBox, используют dijit/_HasDropDown для реализации своих раскрывающихся функций.

Пожалуйста, обратитесь к этому документу о том, как использовать dijit/_HasDropDown. http://dojotoolkit.org/reference-guide/1.10/dijit/_HasDropDown.html

define([ "dojo/_base/declare", "dijit/form/Button", "dijit/_HasDropDown" ],
    function(declare, Button, _HasDropDown){
    return declare([Button, _HasDropDown], {
        isLoaded: function(){
            // Returns whether or not we are loaded - if our dropdown has an href,
            // then we want to check that.
            var dropDown = this.dropDown;
            return (!!dropDown && (!dropDown.href || dropDown.isLoaded));
        },

        loadDropDown: function(callback){
            // Loads our dropdown
            var dropDown = this.dropDown;
            if(!dropDown){ return; }
            if(!this.isLoaded()){
                var handler = dropDown.on("load", this, function(){
                    handler.remove();
                    callback();
                });
                dropDown.refresh();
            }else{
                callback();
            }
        }
    });
});

person T Kambi    schedule 13.09.2016
comment
Можете ли вы привести пример, чтобы он был здесь в качестве ссылки на случай, если ссылка не работает? - person Castro Roy; 13.09.2016
comment
Итак, я не могу сделать это декларативно, мне нужно определить свойства программно? - person Nzall; 13.09.2016