EXTJS 分页工具栏的按钮中是否有任何事件处理程序？答案

【问题标题】：Is there any event handler in EXTJS Paging Toolbar's Buttons?EXTJS 分页工具栏的按钮中是否有任何事件处理程序？
【发布时间】：2011-10-18 09:58:23
【问题描述】：

我是 EXTJS 4 和这个论坛的新手。对不起，如果它已经在另一个帖子中讨论过，但我没有找到它。

我的问题是，我希望我的分页网格面板每 10 秒更新一次它的存储。我找到了使用userStore.loadPage(current_page) 的解决方案，但它有一个问题。

有时，用户在分页中单击“下一个”或“上一个”几乎同时更新网格面板。这使网格面板无法正常工作。我想要的是，当我单击“下一个”或“上一个”或“刷新”时，上一个请求（userStore.loadPage(current_page)）被中止。所以它不会干扰我当前的请求。

但我没有在 EXTJS 分页工具栏中找到处理“下一个”、“上一个”或“刷新”按钮的事件。这个问题的解决方案是什么？有什么办法吗？

这是我的代码仅供参考：

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

每10秒更新一次

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

【问题讨论】：

标签： event-handling extjs4

【解决方案1】：

我认为您的问题是您的“自动加载”和“手动加载”非常接近，以至于您的网格将第一个请求返回的结果作为第二个请求处理。

我同意 Alshten 的观点，即最好的方法是避免如此接近的请求，您可以通过在已经有存储加载正在进行时禁用存储加载来做到这一点。但如果你想要你的功能，我认为你可以这样做：

在商店收听beforeload( Ext.data.Store store, Ext.data.Operation operation, Object eOpts )事件，保存eOpts；听load( Ext.data.Store this, Ext.util.Grouper[] records, Boolean successful, Ext.data.Operation operation, Object eOpts )比较eOpts和你保存的那个，如果它们不一样，你就知道这不是你想要的结果。

【讨论】：

【解决方案2】：

您可以查看有关分页工具栏组件的文档： http://docs.sencha.com/ext-js/4-0/#!/api/Ext.toolbar.Paging

有一个change，每次当前页面更改时都会触发它，因此它会在“下一个”和“上一个”点击事件时触发。我没有尝试过，但我认为它也可能因“刷新”而被解雇。

在我看来，最好的设计是在自动重新加载加载时禁用分页工具栏的按钮（使用该组件的disable() 功能）。

【讨论】：

你如何区分按下下一个或上一个按钮？

【解决方案3】：

我使用这个选择器：“gridpanel pagingtoolbar #refresh”。我主要可以在 init 方法中的 Controller 类中使用。您可以将 gridpanel 替换为网格的别名或 itemid。

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

【讨论】：

【解决方案4】：

使用

 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 是页码

所有的按钮点击比如下一个/上一个/刷新都会触发这个功能

【讨论】：

我应该把这个放在哪里？另外，我认为有一些错字：“beforehange”，（假设它应该是 beforechange）