Почему простой щелчок: функция () ... не работает в ExtJS?

Question

Когда пользователь нажимает на этот элемент, я хочу, чтобы он показывал предупреждение.

Однако, когда я нажимаю на DIV, который генерирует эта панель, ничего не происходит.

Как заставить оповещение исполняться, когда пользователь нажимает на следующую панель?

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

Вы не приняли ответ, поэтому я предполагаю, что вы до сих пор не уверены в этом. Вот несколько указателей ...

Во-первых, как закодировано, ваша Панель будет отображаться как простой квадрат. Если вы ожидаете, что он будет выглядеть как Panel, вы должны дать ему заголовок (чтобы строка заголовка отображалась).

Во-вторых, как уже упоминалось, click не является событием Panel (это событие элемента). Таким образом, у вас есть несколько способов получить желаемое поведение. Вы можете вручную присоединить слушатель к базовому элементу DOM после рендеринга Panel:

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

Вы также можете сделать, как я уже упоминал в комментариях к другому ответу, обычную обработку любого клика по телу:

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

Если вы действительно хотите ограничить клик только дочерним элементом p, вы можете добавить проверку:

// 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');
    }
});

Если бы я кодировал это, я, вероятно, сделал бы что-то более похожее на это:

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
    }
});

Теперь идентификатор находится на Panel (где он должен быть), и вы можете использовать методы Panel и / или Element для доступа к дочерним элементам по мере необходимости. Лучше всего хранить идентификаторы на самом высоком уровне. Вы также заметите, что функция обратного вызова выполняется в области действия Panel (scope:this), поэтому внутри handleClick вы можете рассматривать this как саму Panel и получать доступ к любым ее свойствам или методам.

Так что, не зная точно, чего вы пытаетесь достичь, я не могу предоставить вам точный код, который вам нужен. Однако, надеюсь, это даст вам некоторые идеи.

РЕДАКТИРОВАТЬ : Я хотел сказать это изначально ... в своем коде (как опубликовано) вы фактически не рендерите Panel. Как я уже упоминал в моем ответе на ваш связанный вопрос, если вы добавляете Panel как элемент в контейнер с отложенной визуализацией, DOM Panel не будет доступен для выбора, пока контейнер не будет оказал это. В моем коде выше я добавил renderTo, чтобы у меня не возникло этой проблемы, но если вы этого не делаете, вам придется подождать, пока Panel не будет визуализирована через некоторое время, чтобы получить к ней доступ.

Answer 2

Следующий пример немного грубоват, но у меня работает.Это панель с компонентом box, который показывает миниатюру.При нажатии на миниатюру, он показывает лайтбокс с slimbox2.Не красиво, но очень эффективно.Жестко закодированные изображения только для проверки здесь.

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 3

Компонент Panel не предоставляет событие click, поэтому тот, который вы передаете в конфигурацию, никогда не срабатывает.

Попробуйте добавить id в ваш объект Ext.Panel и затем получить его элементиспользуя Ext.get().Затем добавьте событие click через 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 4

Согласно API, щелчок не является допустимым событием для панелей ... Однако вы все равно сможете добавить событие щелчка к базовому элементу DIV.

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

Answer 5

Я думаю, вам нужно что-то вроде:

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');
        }
    }
});