Có trình xử lý sự kiện nào trong các Nút của Thanh công cụ phân trang EXTJS không?

Question

Tôi mới sử dụng EXTJS 4 và diễn đàn này. Xin lỗi nếu nó đã được thảo luận trong một chủ đề khác, nhưng tôi đã không tìm thấy nó.

Câu hỏi của tôi là, tôi muốn Bảng điều khiển lưới của tôi có Phân trang để cập nhật cửa hàng đó sau mỗi 10 giây. Tôi đã tìm thấy một giải pháp sử dụng userStore.loadPage(current_page), nhưng nó có một vấn đề.

Một thời gian, cập nhật Bảng điều khiển lưới gần như trong cùng một thời điểm với người dùng nhấp "tiếp theo" hoặc "chiếm ưu thế" trong Phân trang. Điều này làm cho Grid Panel không hoạt động đúng cách. Những gì tôi muốn là, khi tôi nhấp vào "tiếp theo" hoặc "trước" hoặc "làm mới", yêu cầu trước đó (userStore.loadPage(current_page)) bị hủy. Vì vậy, nó sẽ không can thiệp yêu cầu hiện tại của tôi.

Nhưng tôi không tìm thấy sự kiện trong Thanh công cụ phân trang EXTJS để xử lý nút "tiếp theo", "trước" hoặc "làm mới". Giải pháp cho vấn đề này là gì? Không có cách nào khác ư?

Đây là mã của tôi chỉ để tham khảo:

// create User Store 
var userStore = Ext.create('Ext.data.Store', { 
    model: 'EDC', 
    autoLoad: true, 
    pageSize: 10, 
    proxy: { 
     type: 'ajax', 
     url : 'Monitoring', // it is using Java servlet, so I write it this way 
     reader: { 
      type: 'json', 
      root: 'edc', 
      totalProperty: 'total' 
     } 
    } 
}); 

// create Grid Panel 
Ext.create('Ext.grid.Panel', { 
    store: userStore, 
    width: 800, 
    height: 400, 
    columns: [ 
     { 
      text: "ID", 
      width: 50, 
      dataIndex: 'id' 
     }, 
     { 
      text: 'Serial Number', 
      flex: 1, 
      dataIndex: 'sn' 
     } 
     // etc... 
    ], 
    dockedItems: [{ 
     xtype: 'pagingtoolbar', 
     store: userStore, 
     dock: 'bottom', 
     displayInfo: true 
    }] 
}); 

Đó là cách nó được cập nhật mỗi 10 giây

// after on Ready, reload every 10 seconds 
Ext.onReady(function(){ 
    self.setInterval("reloadCurrentEdc()", 10000); 
}); 

// function for update 
function reloadCurrentEdc(){ 
    if(typeof userStore != 'undefined'){ 
     userStore.loadPage(userStore.currentPage); 
    } 
} 

Answer 1

Bạn có thể có một cái nhìn vào tài liệu về các thành phần thanh công cụ phân trang: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.toolbar.Paging

Có một số change được kích hoạt mỗi lần trang hiện tại được thay đổi, vì vậy nó sẽ là fi màu đỏ cho các sự kiện nhấp "tiếp theo" và "trước". Tôi đã không cố gắng nhưng tôi nghĩ rằng nó có thể được bắn cho "làm mới" là tốt.

Theo quan điểm của tôi, thiết kế tốt nhất là vô hiệu hóa các nút của trang toobar (sử dụng chức năng disable() của thành phần này) trong khi tải lại tự động đang tải.

Answer 2

Tôi nghĩ rằng vấn đề của bạn là 'tải tự động' và 'tải thủ công' của bạn gần nhau đến mức lưới của bạn xử lý kết quả quay lại từ yêu cầu đầu tiên làm yêu cầu thứ hai.

Tôi đồng ý với Alshten rằng cách tốt nhất là tránh yêu cầu ở gần nhau, bạn có thể thực hiện việc này bằng cách tắt tải cửa hàng khi đã có tải lưu trữ. nhưng nếu bạn muốn chức năng của mình, tôi nghĩ bạn có thể làm điều gì đó như thế này:

nghe beforeload(Ext.data.Store store, Ext.data.Operation operation, Object eOpts) sự kiện trên cửa hàng, lưu eOpts; hãy nghe theo số load(Ext.data.Store this, Ext.util.Grouper[] records, Boolean successful, Ext.data.Operation operation, Object eOpts) so sánh các eOpts với tệp bạn đã lưu, nếu chúng không giống nhau, bạn biết đó không phải là kết quả bạn muốn.

Answer 3

Tôi sử dụng công cụ chọn này: "gridpanel pagingtoolbar #refresh". Tôi có thể sử dụng trong các lớp Bộ điều khiển của mình trong phương thức init chủ yếu. Bạn có thể thay thế gridpanel bằng bí danh hoặc itemid của lưới của bạn.

. 
. 
. 
init: function() { 
    this.control({ 
    'gridpanel pagingtoolbar #refresh':{ 
     click:function(){ 
     console.log('grid panel', arguments); 
     } 
    } 
    }); 
}, 
. 
. 
. 

Answer 4

Sử dụng

beforehange: function (tbar, pageData, eOpts) { 
// here you can load data from server and load the data to store 
    return false // will avoid triggering store events 
} 

pageData là số trang

tất cả các nhấp chuột vào nút như sau/trước/refresh sẽ kích hoạt chức năng này