Dojo CheckedMultiSelect下拉菜单,单击文本时如何打开

时间:2013-10-11 09:37:12

标签: javascript dojo

我正在页面上使用dojo checkedmulitselect并让它正常工作。 我如何配置它,以便无论我在哪里点击控件,下拉打开?目前只有当我点击控件的箭头部分时它才会打开。 这可能吗?

我从http://jsfiddle.net/phusick/894af/

得到了这个例子

当前代码:

require(["dojo/parser", "dijit/form/Form"]);

require([
    "dojo/_base/declare",
    "dojo/_base/lang",
    "dojo/_base/array",
    "dojo/on",
    "dojo/dom",
    "dojo/store/Memory",
    "dojo/store/Observable",
    "dojo/data/ObjectStore",
    "dojox/form/CheckedMultiSelect",
    "dijit/Tooltip",
    "dojo/mouse",
    "dojo/dom-attr",
    "dojo/query",
    "dojo/dom-class",
    "dijit/place",
    "dojo/domReady!"
], function( 
    declare,
    lang,
    array,
    on,
    dom,        
    Memory,
    Observable, 
    DataStore,
    CheckedMultiSelect,
    Tooltip,
    mouse,
    domAttr,
    query,
    domClass,
    place
) {

    var memoryStore = new Memory({
        idProperty: "value",
        data: [
            {value: "CT", label: "Label One"}
        ]
    });

    var dataStore = new DataStore({ 
        objectStore: memoryStore,
        labelProperty: "label" 
    });

    var MyCheckedMultiSelect = declare(CheckedMultiSelect, {

        startup: function() {
            this.inherited(arguments);  
            setTimeout(lang.hitch(this, function() {
                this.dropDownButton.set("label", this.label);            
            }));       

        },

        _updateSelection: function() {
            this.inherited(arguments);                
            if(this.dropDown && this.dropDownButton) {
                var numOptionsSelected = 0;
                var label = "";
                array.forEach(this.options, function(option) {
                    if (option.selected) {
                        label += (label.length ? ", " : "") + option.label;                     
                        numOptionsSelected++;
                    }
                });

                if (numOptionsSelected > 0) {
                  this.dropDownButton.set("label", label.length ? label : this.label);
                }

            }
        }       

    });

    var checkedMultiSelect = new MyCheckedMultiSelect ({
        dropDown: true,
        multiple: true,
        label: 'Code Table',
        name: 'queryType',
        store: dataStore
    }, "placeholder");

    array.forEach(checkedMultiSelect.options, function(option){ 
        option.selected = true;     
    });

    checkedMultiSelect.startup();

});

1 个答案:

答案 0 :(得分:1)

我经理通过使用以下代码更新jsfiddle示例,就在checkedMultiSelect.startup()之后:

checkedMultiSelect.on('click', function(evt){
    if(evt.target.nodeName == "INPUT"){
        checkedMultiSelect.dropDownButton.toggleDropDown();
    }
});