Bạn có thể kích hoạt hành động/sự kiện trong Sencha Touch từ các phần tử html không?

Question

Tôi có bảng điều khiển tab Sencha, mỗi tab tải nội dung html qua ajax. Một trong những thành phần là một bài viết/danh sách mà khách truy cập có thể sử dụng để tìm hiểu sâu hơn một lần nữa để đọc toàn bộ bài đăng.

Câu hỏi của tôi là, bằng cách nào đó tôi có thể kích hoạt chuyển đổi chế độ xem qua html? Hoặc tôi có nên tải dữ liệu bài đăng qua JSON và tạo kiểu bảng danh sách trong Sencha không?

Cảm ơn bạn!

Answer 1

Bạn có thể thêm người nghe vào các phần tử trong HTML của mình để có thể kích hoạt công tắc chế độ xem. Ví dụ,

// simple HTML snippet contained in Panel 
<a class="my-link">Click Me!</a> 

// on after load/after render (need to ensure that the elements exists in the page!) 

// get reference to the containing panel (tab) 
var panel = this.items.get(0); 

panel.getEl().on({ 
    tap: function(e){ 
     console.log('i was clicked!'); 
    }, 
    delegate: 'a.my-link' 
}); 

Tùy chọn đại biểu cho phép bạn vượt qua một selector đó có nghĩa là sự kiện này sẽ chỉ bắn khi một yếu tố phù hợp với selector đó là trong chuỗi các mục tiêu sự kiện (tức là trả về một cái gì đó trong một e.getTarget (đại biểu) gọi điện).

EDIT Bạn có thể truy cập các thuộc tính của phần tử được khai thác bằng nút DOM khai thác hoặc sử dụng Ext.fly để bọc một thể hiện Ext.Element xung quanh nó và sử dụng các phương thức trợ giúp.

console.log(e.getTarget('a.my-link')); // logs DOM node 
console.log(Ext.fly(e.getTarget('a.my-link'))); // logs Ext.Element wrapping DOM node 

console.log(e.getTarget('a.my-link').href); // logs href via DOM node property 
console.log(Ext.fly(e.getTarget('a.my-link')).getAttribute('href')); // logs href via Ext.Element getAttribute() method 

Tùy thuộc vào làm tổ, bạn có thể loại bỏ các selector từ() gọi getTarget (tức là nếu bạn luôn khai thác trên phần tử nghe của bạn trên thì bạn có thể gỡ bỏ nó, nhưng nếu có trẻ em trong phần tử bạn đang nghe thì bạn sẽ cần đến nó. Trong trường hợp thứ hai, 'mục tiêu' sẽ là đứa trẻ mà sự kiện sôi nổi từ vì vậy href sẽ sai. Nếu điều đó có ý nghĩa ... :))

Answer 2

giải pháp cho 2.2.1:

initialize: function() { 
    this.element.on({ 
     tap: <function>, 
     delegate: <query_expression> 
    }); 

    this.callParent(arguments); 
} 

<query_expression> cũng có thể phù hợp với Ext.query().