前情描述:
Ext JS中,Grid上可以使用tbar或bbar等添加分页的工具栏。一般状况下,该分页工具栏可以和该Grid的Store自动绑定,也就是可以自动显示笔数、页数等信息。
在Grid中添加的代码如下:
tbar:{
xtype: ‘pagingtoolbar’,
displayInfo: true
}
问题描述:
如果在tbar中添加除’pagingtoolbar’的其他按钮之后,分页工具栏自动绑定Store就会失效。添加其他按钮的配置如下:
tbar: [{
xtype : ‘button’,
text : ‘Select’,
iconCls : ‘x-fa fa-plus’
},{
xtype: ‘pagingtoolbar’,
//store:‘NplmPnmPkgInfoStore’,
displayInfo: true
}]
解决方法:
思路:
1.'pagingtoolbar’提供了绑定store的方法,思路是手动绑定一次。
2. 绑定的时机设定在Grid渲染完成之后。通过afterrender事件触发。
实现如下:
listeners:{
afterrender:function(thisGrid){
var pagingtoolbars = this.query("pagingtoolbar");
if(pagingtoolbars!=null){
var pagingtoolbar = pagingtoolbars[0];
pagingtoolbar.setStore(thisGrid.getStore());
}
}
}
当然,也可以将按钮放到Grid之外,不过就会占用更多的页面空间。
以上方式的好处是,如果该场景较多,该处理可以放在父类的定义上,子类自动继承。
,