如何在extJS中将事件处理程序附加到面板？ [英] How do I attach an event handler to a panel in extJS?

问题描述

我想做的只是处理一个extJS面板上的点击。

我已经尝试了所有关于。]

你缺少一些关键概念：

点击是 / strong>一个有效的Panel事件，所以在Panel上添加一个点击处理程序将不会执行任何操作（这是上面发布的大部分代码的问题）。

这个代码：

  var menuItem1 = new Ext.Panel（{
 ... 
}）; 
 content.body 
  

您从另一个答案复制粘贴但错误。另一个代码中的内容引用了创建的Panel - 它是一个变量。在此代码中，您创建了面板作为 menuItem1 ，但是尝试将其引用为内容？

请重新阅读我之前关于渲染如何在我给你的另一个答案中的解释。 必须将面板添加到呈现它的容器中，或直接渲染（通过 renderTo config） 。如果没有，面板将不会显示。

使用jQuery的委托功能是不是 Ext JS组件的正确方法。 p>

All I want to do is handle a click on an extJS panel.

I've tried all the of suggestions on this question plus all I could find elsewhere but each of them fail in the ways described below.

What is the correct syntax to add a click event handler to a extJS panel?

[Edit: For the sake of others who may find this question later, I'll add some comments inline to make this easier to decipher --@bmoeskau]

doesn't execute handler:

var menuItem1 = new Ext.Panel({
    id: 'panelStart',
    title: 'Start',
    html: 'This is the start page.',
    cls:'menuItem',
    listeners: {
        click: function() {
            alert('ok');
        }
    }
}); 

[Ed: click is not a Panel event]

doesn't execute handler:

var menuItem1 = new Ext.Panel({
    id: 'panelStart',
    title: 'Start',
    html: 'This is the start page.',
    cls:'menuItem',
    listeners: {
        render: function(c) {
            c.body.on('click', function() {
                alert('ok');
            });
        }
    }
}); 

[Ed: The Panel is never being rendered -- add renderTo config. Next, you'll hit a null error telling you that c is not a valid variable. Do you mean menuItem1 instead?]

doesn't execute handler:

var menuItem1 = new Ext.Panel({
    id: 'panelStart',
    title: 'Start',
    html: 'This is the start page.',
    cls:'menuItem'
}); 
Ext.getCmp('panelStart').on('click', function() {
    alert('ok');
});

[Ed: click is not a Panel event. Also, the Panel is not yet rendered, so if you switched the callback to be on the element rather than the Component you'd get a null error.]

gets error: Ext.get('panelStart') is null:

var menuItem1 = new Ext.Panel({
    id: 'panelStart',
    title: 'Start',
    html: 'This is the start page.',
    cls:'menuItem'
}); 
Ext.get('panelStart').on('click', function() {
    alert('ok');
});

[Ed: It's not rendered, see above. Switching from getCmp to get means you are switching from referencing the Component (which does exist, but does not have a click event) to referencing the Element (which does have a click event, but is not yet rendered/valid).]

makes the panel disappear:

var menuItem1 = new Ext.Panel({
    id: 'panelStart',
    title: 'Start',
    html: 'This is the start page.',
    cls:'menuItem',
    listeners: {
        'render': {
            fn: function() {
                this.body.on('click', this.handleClick, this);
            },
            scope: content,
            single: true
        }
    },
    handleClick: function(e, t){
        alert('ok');
    }        
}); 

[Ed: The scope being passed into the callback (content) is not a valid ref in this code (this was copy-pasted incorrectly from another sample). Since the Panel var is created as menuItem1 and the callback is intended to run in the panel's scope, scope var should be menuItem1. Also, this Panel is never rendered, see prev comments.]

gives the error "Ext.fly(menuItem1.id) is null":

var menuItem1 = new Ext.Panel({
    id: 'panelStart',
    title: 'Start',
    html: 'This is the start page.',
    cls:'menuItem'
}); 
Ext.fly(menuItem1.id).addListener('click', Ext.getCmp(menuItem1.id) , this);

[Ed: Panel is not rendered, see above]

...put outside Ext.onReady()... gets error: Ext.getCmp('panelStart') is null

Ext.getCmp('panelStart').on('click', function() {
    alert('okoutside');
});

[Ed: Panel is likely not rendered at the time this code is run. Also, click is not a Panel event.]

...put outside Ext.onReady()... gets error: Ext.get('panelStart') is null

Ext.get('panelStart').on('click', function() {
    alert('okoutside');
});

[Ed: See above]

...put outside Ext.onReady()... gets error: Ext.fly('panelStart') is null

Ext.fly('panelStart').on('click', function() {
    alert('okoutside');
});

[Ed: See above]

For the last three, I checked in Firebug and <div id="startPanel"> exists:

It works with JQuery:

So with JQuery I simply have to do this and it works:

$('body').delegate(('#panelStart'), 'click', function(){
    alert('ok with jquery');
});

[Ed: This is not a good approach. It's simply delaying attaching of the handler until later, when the element actually shows up in the DOM (which could also be done via Ext btw, but would still not be the proper approach). I spelled out the correct approach, as linked in my answer below. The OP's attempts are all very close, but each is missing one or two key pieces.]

How can I attach a click handler like this with extJS?

解决方案

[For anyone else reading this, I went through a fairly thorough explanation of this already here.]

You are missing a few key concepts:

click is not a valid Panel event, so adding a click handler on a Panel will do nothing (this is the issue in most of the code you posted above).

In this code:

var menuItem1 = new Ext.Panel({
   ...
}); 
content.body

You copy-pasted from another answer, but incorrectly. content in the other code referenced the Panel that was created -- it is a variable. In this code you created the Panel as menuItem1 but then are trying to reference it as content?

Please re-read my previous explanation about how rendering works in the other answer I gave you. You must either add a Panel to a container that renders it, or render it directly (via the renderTo config). If you do neither, the Panel will not show up.

Using jQuery's delegate function is not the proper approach with Ext JS components.

这篇关于如何在extJS中将事件处理程序附加到面板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！