cách xử lý nút quay lại thiết bị trên ứng dụng cảm ứng sencha

Question

Trong liên lạc Sencha nếu tôi sử dụng chế độ xem điều hướng, tôi có thể lấy lại nút. Điều này là khá tốt.

Nhưng điều gì xảy ra nếu người dùng nhấn nút quay thiết bị? nó là trực tiếp thoát khỏi applicaiton. Trong yêu cầu của tôi nó không nên thoát khỏi ứng dụng nó phải quay trở lại màn hình trước đó. Làm thế nào tôi có thể làm điều này ?.

Answer 1

Bạn có thể xử lý phần cứng trở lại nút như thế này:

if (Ext.os.is('Android')) { 
    document.addEventListener("backbutton", Ext.bind(onBackKeyDown, this), false); 

    function onBackKeyDown(eve) { 

     eve.preventDefault(); 

     //do something 
     alert('back button pressed'); 

    } 
} 

Answer 2

Tôi không tìm thấy hướng dẫn trên trang hỗ trợ lịch sử hữu ích khi cố gắng thực hiện việc này; Tôi không thể nhìn thấy anyway để sử dụng các tuyến đường khi giao dịch với một giao diện điều hướng mà có thể có một chồng lớn các quan điểm trên nó bất cứ lúc nào.

Nếu bạn chỉ muốn nút quay lại hoạt động, bạn có thể sử dụng các chức năng popstate và pushstate (xem https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history để tham khảo). Ý tưởng là bạn push trạng thái khi thêm chế độ xem và pop tắt khi xóa một chế độ xem. Nút quay lại vật lý trên điện thoại Android hoặc nút quay lại trên trình duyệt trên máy tính để bàn có hiệu quả các cuộc gọi history.back(); vì vậy tất cả những gì bạn cần làm là đảm bảo rằng việc nhấn nút quay lại trên thanh tiêu đề sẽ thực hiện tương tự, và điều đó sẽ kích hoạt chế độ xem điều hướng để bật.

Để sử dụng nó làm việc trong Sencha Touch, tôi thêm dòng sau vào bộ điều khiển chính:

Trong refs Tôi có tham chiếu đến main view (một thể hiện của Ext.navigation.View) và thanh tiêu đề của nó, từ đó bạn có thể treo vào sự kiện của nút ví dụ sau:

refs: { 
     main: 'mainview', 
     mainTitleBar: 'mainview titlebar', 
}... 

tôi đính kèm các chức năng sau thông qua đối tượng control cấu hình ..

control: { 
     main: { 
      push: 'onMainPush' 
     }, 
     mainTitleBar: { 
      back: 'onBack' 
     }, 
     ... 

Đây là những định nghĩa là:

onMainPush: function(view, item) { 
     //do what ever logic you need then.. 
     history.pushState(); 
    }, 
    onBack: function() { 
     history.back(); //will cause the onpopstate event to fire on window.. 
     //prevent back button popping main view directly.. 
     return false; 
    }, 

sau đó tôi đính kèm một chức năng để thực hiện khi nhà nước được popped qua hàm init của ..

init: function() { 
    /* pop a view when the back button is pressed 
     note: if it's already at the root it's a noop */ 
    var that = this; 
    window.addEventListener('popstate', function() { 
     that.getMain().pop(); 
    }, false); 
}, 

Bây giờ, nhấn trở lại trên thanh tiêu đề, thực hiện history.back() , điều này lần lượt kích hoạt sự kiện popstate, sau đó làm cho chế độ xem chính bật lên.

Nếu bạn muốn thấy điều này làm việc trên một ứng dụng thực tế, có một ứng dụng công cụ tìm kiếm (v. Basic!) Sử dụng kỹ thuật này trên github here.