如何确定在ExtJS 7.0.0中单击工具栏的时间

1tuwyuhd  于 2022-09-26  发布在  其他
关注(0)|答案(1)|浏览(131)

我想检测我的工具栏上的点击,或者是工具栏的焦点。
该用例是从LiveSearchGrid中提取出来的,它有一个工具栏,在代码中可以看到。提供的代码呈现得很好,但没有检测到点击、聚焦或其他任何内容。什么都没有。
见下文:

<div id="toolbar"></div>
<script type="text/javascript">
    Ext.create('Ext.toolbar.Toolbar', {
        renderTo: 'toolbar',
        name: 'searchBar',
        focusEl: 'toolbar',
        listeners: {
            focusenter: function () {
                console.log('focusenter')
            },
            focus: function () {
                console.log('focus')
            }
        },
        items: [
            {
                xtype: 'tbtext',
                html:  'Search',
                listeners: {
                    focusenter: function () {
                        console.log('focusenter')
                    }
                }
            },
            'Case Sensitive'
        ]
    })  
</script>

下面是简单的JavaScript,它解决了我的问题。

document.getElementById('toolbar').onclick = function () {
    console.log('hello world');
}

我做错了什么?

jckbn6z7

jckbn6z71#

可以使用侦听器配置的element属性在底层Ext.Element上设置DOM侦听器

Ext.create('Ext.toolbar.Toolbar', {
    renderTo: 'toolbar',
    name: 'searchBar',
    focusEl: 'toolbar',
    listeners: {
        click: {
            element: 'element', // bind to the underlying element 
            fn: function() {
              console.log('Toolbar element was clicked!');
            }
        },
        focusenter: {
            element: 'element', // bind to the underlying element 
            fn: function() {
              console.log('Toolbar element was focused!');
            }
        }
    },
    items: []
});

该属性可以设置为elementbodyElement

相关问题