Why doesn't the simple click function: function () ... work in ExtJS?

Question

When a user clicks on this item, I want it to show a warning.

However, when I click on the DIV that this panel generates, nothing happens.

How can I make a warning when the user clicks on the next panel?

var content = new Ext.Panel({ region:'center', margins:'5 0 5 5', cls:'empty', bodyStyle:'background:ivory; font-size: 13pt', html:'<p id="test123">This is where the content goes for each selection.</p>', click: function() { alert('was clicked'); } }); 

Answer 1

You did not accept the answer, so I assume that you are still unclear. Here are some pointers ...

First, how your encoded panel will display as a simple square. If you expect it to look like a panel, you should give it a name (so that the title bar will be displayed).

Secondly, as already mentioned, click not a Panel event (this is an Element event). Thus, you have several ways to achieve your desired behavior. You can manually connect the listener to the basic DOM element after visualizing the panel:

 Ext.get('txest123').on('click', function(){ alert('foo'); }); 

You can also do as I mentioned in the comments of another answer to generally handle any click of the body:

 // .body is a Panel property for the body element content.body.on('click', function(){ alert('foo'); }); 

If you really want to limit the click to only a child of p , you can add a check:

 // e is the event object, t is the target DOM node content.body.on('click', function(e,t){ if(t.id == 'txest123'){ alert('clicked the p'); } }); 

If I encoded this, I would probably do something similar:

 var content = new Ext.Panel({ region:'center', renderTo: document.body, margins:'5 0 5 5', cls:'empty', title: 'My Panel', id: 'txest123', bodyStyle:'background:ivory; font-size: 13pt', html:'This is where the content goes for each selection.', listeners: { 'render': { fn: function() { this.body.on('click', this.handleClick, this); }, scope: content, single: true } }, handleClick: function(e, t){ alert(this.id); // the panel alert(t.innerHTML); // the clicked el } }); 

Now the identifier is in the panel (where it should be), and you can use the Panel and / or Element methods to access the children as needed. It is best to maintain your identity at the highest level. You will also notice that the callback function is executed in the Panel area ( scope:this ), therefore inside handleClick you can consider this as the panel itself and refer to any of its properties or methods.

So, not knowing exactly what you are trying to achieve, I cannot provide you with the exact code that you need. However, this will hopefully give you some ideas.

EDIT . I wanted to say this initially ... in your code (as published) you are not actually showing Panel. As I mentioned in my answer to your related question, if you add Panel as an element to a container that is lazy, the DOM panel will not be selectable until the container provides it. In my code above, I added renderTo so that I don't have this problem, but if you don't, you will have to wait for the panel to be transferred after a while to access it.

Answer 2

The Panel component does not throw a click event, so the one you go into the configuration never starts.

Try putting the identifier in your Ext.Panel object and then get its element using Ext.get() . Then add the click event via on() :

 var content = new Ext.Panel({ id: 'myPanel', region:'center', margins:'5 0 5 5', cls:'empty', bodyStyle:'background:ivory; font-size: 13pt', html:'<p id="txest123">This is where the content goes for each selection.</p>' }); Ext.get('myPanel').on('click', function() {alert('You clicked me');}); 

Answer 3

The following example is a little rude, but it works for me. This is the panel with the box component that displays the sketch. When you click on a thumbnail, a lightbox with slimbox2 is displayed. Not very, but very effective. Hard coded images are for testing here.

 var panel = new Ext.Panel({ title : 'Image', header : false, frame : true, border : false, bodyStyle : 'padding : 5px', width : 125, items : [{ xtype : 'box', height : 115, width : 115, listeners : { 'render': function() { var id = Ext.id(this); Ext.fly(id).addListener('click', function () { jQuery.slimbox('thisisnotanimage', 'CBX'); }); } }, autoEl: { tag : 'div', html : 'somehtmltagstuff' } } ] }); 

Answer 4

According to the API, clicking is not a valid event for panels ... However, you can still add the click event to the underlying DIV element.

 Ext.fly(e.id).addListener('click', Ext.getCmp(e.id) , this); 

Answer 5

I believe you need something like:

 var content = new Ext.Panel({ region:'center', margins:'5 0 5 5', cls:'empty', bodyStyle:'background:ivory; font-size: 13pt', html:'<p id="test123">This is where the content goes for each selection.</p>', listeners: { click: function() { alert('was clicked'); } } });