ExtJs 4.1 pagingtoolbar下一步和上一步按钮不工作
我正在为我的一个网格使用pagingtoolbar,但仅刷新并手动输入页码。pagingtoolbar的“下一步”和“上一步”按钮不起作用它不会触发任何事件,正如我在firebug中注意到的那样,单击按钮时没有任何服务器调用。 所以请帮我找出这个按钮有什么问题 //添加到网格的分页工具栏ExtJs 4.1 pagingtoolbar下一步和上一步按钮不工作,extjs,cross-browser,extjs4.1,Extjs,Cross Browser,Extjs4.1,我正在为我的一个网格使用pagingtoolbar,但仅刷新并手动输入页码。pagingtoolbar的“下一步”和“上一步”按钮不起作用它不会触发任何事件,正如我在firebug中注意到的那样,单击按钮时没有任何服务器调用。 所以请帮我找出这个按钮有什么问题 //添加到网格的分页工具栏 dockedItems :[ { xtype : 'pagingtoolbar',
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'
}
}
});
这是我的观察:下一个/上一个按钮事件仅在单击栏的特定部分时执行,即下一个/上一个按钮图标下方的一点。经过多次尝试,我发现这种行为只适用于IE中的chrome浏览器,效果很好。plz查看以下工具栏源代码内部元素“button-1121-btnIconEl”渲染箭头图像,但在chrome中未触发单击事件。根据我的理解,ext js点击绑定到id“button-1121-btnEl”的事件所以请帮助我解决这个问题,为什么单击按钮的子元素内部图标时单击事件不会触发。
"<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=""> </span><span id="button-1121-btnIconEl" class="x-btn-icon x-tbar-page-next"></span></button></em>"
“”
尝试在工具栏中引用存储,如下所示:
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},
终于解决了这个问题,因为我的自定义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工作正常