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

时间:2017-12-19 19:37:10

标签: javascript combobox dojo

不确定这是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");

还有什么我应该考虑让鼠标选择起作用吗?

谢谢!

3 个答案:

答案 0 :(得分:0)

我不知道究竟是什么导致了您的问题,但看起来就像是因为您混合了创建小部件的编程和声明方法。 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

答案 1 :(得分:0)

我尝试以不同的方式定义插件,现在似乎正在运行:

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();

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

答案 2 :(得分:0)

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

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