Question

When the user clicks on this element, I want it to show an alert.

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

How can I make an alert execute when the user clicks on the following 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 haven’t accepted an answer, so I’ll assume you’re still unclear on this. Here are a few pointers…

First, as coded your Panel will render as a plain square. If you’re expecting it to look like a Panel, you should give it a title (so the title bar will render).

Second, as mentioned, click is not a Panel event (it’s an Element event). So you have several ways of getting to the behavior you want. You can manually attach a listener to the underlying DOM element after the Panel is rendered:

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

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

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

If you really want to restrict the click to only the child p you could 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 was coding this, I’d probably do something more like this:

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 id is on the Panel (where it should be) and you can use Panel and/or Element methods to access child elements as needed. It’s best to keep id’s at the highest level possible. You’ll notice too that the callback function is executed in the scope of the Panel (scope:this) so that inside handleClick you can treat this as the Panel itself and access any of its properties or methods.

So, without knowing exactly what you’re trying to achieve, I can’t provide you with the exact code you need. However, this should hopefully give you some ideas.

EDIT: I meant to say this originally… in your code (as posted) you are not actually rendering the Panel. As I mentioned in my answer to your related question, if you are adding the Panel as an item to a container that is lazy-rendered, the Panel’s DOM won’t be available for selection until after the container has rendered it. In my code above I added renderTo so that I don’t have this issue, but if you’re not doing that you’ll have to wait until the Panel is rendered at some time later to access it.