如何以编程方式打开Dojo djFilteringSelect下拉列表

时间:2015-08-27 08:28:31

标签: javascript dojo xpages

好的,这应该是可行的 - 而且非常简单,如果知道如何获取djFilteringSelect对象的句柄。

使用案例:我已经接管了扩展现有XPage的请求,其功能是下拉值列表,不仅仅是当用户点击djFilteringSelect输入字段右侧的小箭头时 - 而且还有用户只需点击该字段即可。此XPage的大多数初始条目都是在制造现场完成的(使用触摸屏 - 没有鼠标/键盘)。用户使用“普通”计算机完成后续处理。

所以我试图“抓住”“点击”,“mousedown”或“mouseup”事件。我可以这样做 - 但我无法掌握过滤选择,我知道有一个方法“openDropDown()”可能做我需要做的事情....我也尝试模拟一个按键事件“arrowdown”作为如果我这样做也会给出相同的体验......我甚至试图延迟按键事件并添加一些上下文 - 但没有任何工作。

所以这是我目前非常简单的例子:

                <xe:djFilteringSelect id="Antal" defaultValue="1">
                    <xp:selectItems id="selectItems13">
                        <xp:this.value><![CDATA[${javascript:var values=[];var i=0;while(i<=20){values.push(''+i++)};return values;}]]></xp:this.value>
                    </xp:selectItems>
                    <xp:selectItem itemLabel="20+"></xp:selectItem>

                    <xp:eventHandler event="onKeyUp" submit="false">
                        <xe:this.script><![CDATA[console.log("keyUp=" + thisEvent.keyCode)]]></xe:this.script>
                    </xp:eventHandler>
                    <xp:eventHandler event="onMouseDown" submit="false">
                        <xe:this.script><![CDATA[var ct = thisEvent.currentTarget;
var se = thisEvent.srcElement;
var te = thisEvent.toElement;
setTimeout(function(ct,se,te){
var keyboardEvent = document.createEvent("KeyboardEvent");
var initMethod = typeof keyboardEvent.initKeyboardEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent";

keyboardEvent[initMethod](
                   "keyup", // event type : keydown, keyup, keypress
                    true, // bubbles
                    true, // cancelable
                    Window, // viewArg: should be window
                    false, // ctrlKeyArg
                    false, // altKeyArg
                    false, // shiftKeyArg
                    false, // metaKeyArg
                    40, // keyCodeArg : unsigned long the virtual key code, else 0
                    0 // charCodeArgs : unsigned long the Unicode character associated with the depressed key, else 0
);
/// Hmmmm... not working
keyboardEvent.currentTarget = ct;
keyboardEvent.srcElement = se;
keyboardEvent.toElement = te;
console.log('Fire arrow down key...');
document.dispatchEvent(keyboardEvent);
},200);
]]></xe:this.script>
                    </xp:eventHandler></xe:djFilteringSelect>

所以任何想法都会受到赞赏 - 尤其是制造网站的用户: - )

1 个答案:

答案 0 :(得分:1)

  

...不仅在用户点击djFilteringSelect输入字段右侧的小箭头时下拉值列表 - 而且用户只需点击该字段。

如果我正确地阅读了您的问题,您只想在用户点击该字段时调出下拉菜单。这与您的其他代码不完全匹配,我不知道dojo如何解释 input 标记中的click事件并通过整个 dijit 进行处理,但是我尝试添加一个事件处理程序,就像我希望用户在点击相应的字段时强行触发 xe:namePicker 时那样。

我在 xe:djFilteringSelect 中添加了以下内容,它似乎工作正常;无论如何,正如我所期待的那样。

    ....
    <xp:eventHandler
        event="onClick"
        submit="false">
        <xe:this.script><![CDATA[var el = dijit.byId("#{id:Antal}");
el.toggleDropDown();]]></xe:this.script>
    </xp:eventHandler>
</xe:djFilteringSelect>

[更新] 正如我们注意到的那样(在对这个答案的评论中),这是在弹出已经被触发后工作,但不是第一次。解决方案非常简单,使用 toggleDropDown()函数而不是 openDropDown()。看起来相当稳固,我确认它在新页面加载后工作正如预期的那样。似乎toggle函数将触发创建包含值列表的DOM元素,而不是open函数。 [/更新]

showing before and after suggested change with djFilteringSelect