[ExtJS 6]Grid分页工具栏无效问题解决

前情描述：

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之外，不过就会占用更多的页面空间。
以上方式的好处是，如果该场景较多，该处理可以放在父类的定义上，子类自动继承。

,