Dojo - dijit / ComboBox - 鼠标选择不起作用

Posted 2021-05-03

不确定这是ComboBox的错误还是我的实现错误。我正在使用数组中的值填充ComboBox。 ComboBox似乎主要工作 - 所有值都在那里，默认值正在设置，建议即将到来。唯一的问题是我无法通过鼠标单击选择任何下拉选项。我只能使用箭头按钮+ Enter来选择选项。这是设计还是错误？

这是我的html的摘录，用于模板化小部件：

<td style="width:25%;"><input data-dojo-attach-point="testReports" data-dojo-type="dijit/form/ComboBox"></input></td>

这是我的javascript代码。我填充ComboBox，然后将其放入HTML模板：

var reportStore = new Memory();
for(i = 0; i < this.parent.reportNames.length; i++){
    var reportObject = {};
    reportObject.id = i;
    reportObject.name = this.parent.reportNames[i];
    reportStore.put(reportObject);
}
this.testReports.set("id", "reportsDropDown");
this.testReports.set("name", "reports");
this.testReports.set("value", this.parent.reportNames[0]);
this.testReports.set("store", reportStore);
this.testReports.set("searchAttr", "name");

还有什么我应该考虑让鼠标选择工作吗？

谢谢！

答案

您是否尝试将onchange事件添加到输入标记中？这应该选择并选择使用鼠标进行的列表更改。

<input data-dojo-attach-point="testReports" data-dojo-type="dijit/form/ComboBox" onchange="processComboChange(this)"></input>

另一答案

我尝试以不同的方式定义插件，它现在似乎正在工作：

HTML：

<td style="width:25%;"><input data-dojo-attach-point="testReports"></td>

JavaScript的：

var reportStore = new Memory();

for(i = 0; i < this.parent.reportNames.length; i++){
    var reportObject = {};
    reportObject.id = i;
    reportObject.name = this.parent.reportNames[i];
    reportStore.put(reportObject);
}

var comboBox= new ComboBox({
    id: "reportsDropDown",
    name: "reports",
    value: this.parent.reportNames[0],
    store: reportStore,
    searchAttr: "name"
}, this.testReports).startup();

我在想，我尝试的另一种方式是搞乱需要加载的顺序。不确定是否有其他人可以更好地解释它？

另一答案

我不知道究竟是什么导致了你的问题，但看起来是因为你混合了创建widget的编程和声明方法。 Dojo对这些事情非常敏感，你可以花上几个小时，试图弄清楚为什么你的广告不起作用......我想提一下你的代码。如果以声明方式创建窗口小部件，则可以内联传递必要的属性，而无需在js中设置它们。因此，您可以通过以下方式制作它，而不是this.testReports.set("id", "reportsDropDown");：

  <input data-dojo-attach-point="testReports" 
        data-dojo-type="dijit/form/ComboBox"
        data-dojo-props="store: store, searchAttr: name">
  </input>

或者如果您更喜欢程序化创建：

模板

<input id="test-reports"></input>  

JS

var testReports = new ComboBox({
        id: "testReports",
        name: "reports",
        value: "",
        store: store,
        searchAttr: "name"
    }, "test-reports").startup();      

在第二种情况下，您不必为元素定义data-dojo-attach-point属性，并使用元素ID而不是引用this.someNode