版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xiaozhegaa/article/details/83008806
目录
自由定义Grid表格的滚动条
一、需求分析:
在前一篇文章,已经分享了Grid表格加载更多的代码,现在需求是:加载更多之后,自动将滚动条定位到最底部。
二、自由定义滚动条
参考了网上各种博客代码,十几篇博客都在说同一个代码,几乎是Copy,很无奈。而且代码非常复杂,在Grid的viewConfig里面配置上百行的代码。这里就不贴出来了。无奈之下只能自己去看API。
三、整理思路
查看API所有的方法,看到有一个getSelectModel()方法。
思考:这个getSelectModel()是选择模型。
那么,能不能这样子,在Grid中,使用getSelectModel()去指定选中某一行记录,然后滚动条就定义到那一行的上,不就实现了Grid滚动条滚动了么!
四、代码编写
测试代码
var model = DataGrid.getSelectionModel(); |
效果:发现它真的定位到了:第十条记录。
基于上面这种代码。如果我们获取到Grid的条数的话,那么我就可以手动指定:滚动条到某一个位置上
- 实现代码
// 选中最后一行,使滚动条滚动到最底部 var storeCount = DataGrid.getStore().getCount(); var model = DataGrid.getSelectionModel(); model.select(storeCount - 1); |
结果就完成了。
很无奈,代码就三行,希望对你有帮助!
五、效率问题
上面这种,定位方法效率并不定,用new Date().getTime()测试过,定位时间1毫秒。为什么说这个呢?因为我开发完成之后,发现效率很低,然后对每个步骤进行了耗时检测,原因是:公司的服务器是海外的,请求的网络关系耗时比较长。
六、动态展示:“加载更多”按钮内容
Ext.getCmp('moreButton').setText('【 历史更多>> 】,当前总记录:【'+ storeCount + '】'); |