Question

我正在为我的某个网格使用pagingtoolbar，但只刷新并手动输入页码。 pagingtoolbar的下一个和上一个按钮不工作它没有触发任何事件，因为我在firebug中注意到点击按钮时没有任何服务器调用。所以请帮我弄清楚这个按钮有什么问题。

//添加到网格的分页工具栏

dockedItems :[ {
                                            xtype : 'pagingtoolbar',
                                            store : 'Laborcosts',
                                            dock : 'bottom',
                                            displayInfo : true
                                        } ],

//商店

Ext.define('MD.store.Laborcosts', { 
extend : "Ext.data.Store",
storeID:'Laborcosts',       
model: 'MD.model.Laborcosts',
autoLoad: {start: 0, limit: 10},
remoteSort: true,
pageSize :10 ,
loadMask: true,
proxy: {
    type: 'rest',
     url: '../services/mdcat/laborcost/getLaborCostCDM',
    timeout: 300000,
    reader: {
        type: 'json',
        root: 'records',
        totalProperty: 'total'
    }
}
});

next /previous button event execute only when click on specific portion of bar mark in red

这是我的观察：下一个/上一个按钮事件仅在单击条的特定部分时执行，即在下一个/上一个按钮图标下方稍微点亮。
经过大量的尝试，我发现这种行为只适用于IE中的Chrome，它运行正常。请看下面的工具栏源代码内部元素“button-1121-btnIconEl”渲染箭头图像，但它不会在chrome中触发点击事件。根据我的理解，ext js点击事件绑定到id“button-1121-btnEl”。 所以PLZ帮我解决了这个问题为什么点击事件不会点击内部图标，这是按钮的子元素。

"<em id="button-1121-btnWrap"><button id="button-1121-btnEl" type="button" class="x-      btn-center" role="button" autocomplete="off" data-qtip="Next Page" style="height: 16px; "><span id="button-1121-btnInnerEl" class="x-btn-inner" style="">&nbsp;</span><span id="button-1121-btnIconEl" class="x-btn-icon x-tbar-page-next"></span></button></em>"

Answer 1

尝试在工具栏中引用商店，如下所示：

  store: this.store , //where this would point to grid (you would need to move the toolbar declaration into the initComponent method).

如果不起作用，请尝试评论

 autoLoad: {start: 0, limit: 10},

Answer 2

终于解决了 - 这个问题归因于我的自定义css

.menubarCls .x-btn-default-toolbar-small-menu-active, .x-btn-default-toolbar-small-pressed
{
background-image:none !important;
border:none !important;
background-color:#91877B !important;
border-radius:0px !important;
padding:6px 15px 6px !important;
}

我已从css上方删除 .x-btn-default-toolbar-small-pressed ，现在pagingtoolbar工作正常。

ExtJs 4.1 pagingtoolbar next和上一个按钮不起作用

2 个答案: