Question

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

我的问题是，我希望我的Grid Panel with Pagination每10秒更新一次它的商店。我找到了使用userStore.loadPage(current_page)的解决方案，但它有问题。

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

但我没有在EXTJS Paging Toolbar中找到处理“next”，“prev”或“refresh”按钮的事件。这个问题的解决方案是什么？有什么办法吗？

这是我的代码仅供参考：

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

Answer 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和你保存的eOpts，如果它们不相同，你知道它不是你想要的结果。

Answer 2

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

每次更改当前页面时会触发change，因此会针对“next”和“prev”点击事件触发它。我没有尝试，但我认为它也可能因“刷新”而被解雇。

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

Answer 3

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

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

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

所有按钮点击如next / prev / refresh将触发此功能

EXTJS Paging Toolbar的按钮中是否有任何事件处理程序？

4 个答案: