Thành phần HTML ExtJs Nhấp vào Sự kiện

Question

Tôi đã tạo thành phần HTML tùy chỉnh trong extJS bằng cách chỉ định giá trị html của bảng. Tôi không thể đính kèm các trình xử lý sự kiện vào phần tử (hoặc bằng cách nào đó chúng không kích hoạt). Tuy nhiên, tôi có thể thực hiện những việc khác trên thành phần như ẩn, nối thêm v.v.

Ext.select('#toFieldDiv').on('click',function() { 
    alert("something"); 
}); //Doesn't Work 

Ext.select('#toFieldDiv').hide('slow'); //Works 

Bất kỳ ý tưởng nào?

Dưới đây là định nghĩa thành phần của tôi:

{ 
    xtype: 'panel', 
    x: 70, 
    y: 0, 
    html: "<div id=\"toFieldDiv\" class=\"to-field\"> </div>" 
} 

Tôi thậm chí còn cố gắng cùng với jQuery. Một lần nữa ẩn hoạt động, nhưng không phải là nhấp chuột.

Answer 1

Cuối cùng tôi đã giải quyết được vấn đề. Vấn đề không nằm trong đoạn mã này (đúng như tôi tưởng tượng). Sự kiện nên và không hoạt động bởi vì nó chỉ là một sự kiện nhấp bình thường trên một phần tử div.

Vấn đề là do một trường văn bản khác đã được chồng lên phần tử div, qua đó chuyển các sự kiện nhấp vào TextField thay vì phần tử div.

Answer 2

Tôi tìm thấy một số example and explanation lý do tại sao tính năng này không hoạt động trên hộp trên diễn đàn Sencha. Tôi đã triển khai giải pháp được đề xuất bên dưới.

Ext.create('Ext.panel.Panel', { 
    title: 'Hello', 
    width: 200, 
    html: '<p>World!</p>', 
    listeners: {render: function(c){c.el.on('click', function() { alert('onclick');});}}, 
    renderTo: Ext.getBody() 
}); 

Answer 3

Bạn đang sử dụng ExtJS 4?

Trước tiên, bạn đã thử "Ext.get" thay vì "Ext.select" chưa?

Nếu bạn đang sử dụng ExtJS 4, có một cách dễ dàng hơn để thực hiện điều này. 4 cho phép bạn thiết lập các sự kiện trên "el" của các widget.

Answer 4

Đối với Extjs 3.3.1, bạn có thể sử dụng Ext.getCmp() để thay thế.

Ở đây Ext.select() trả về CompositeElementLite/CompositeElement và các thành phần này không mở rộng từ Quan sát được. Vì vậy, nó không hỗ trợ ràng buộc với on().

Ext.getCmp() trả về Ext.Component, vì vậy có thể.