ExtJs案例（一） ~~自由定义Grid表格的滚动条

目录

 

自由定义Grid表格的滚动条

一、需求分析：

二、自由定义滚动条

三、整理思路

四、代码编写

五、效率问题

六、动态展示：“加载更多”按钮内容

---

自由定义Grid表格的滚动条

一、需求分析：

在前一篇文章，已经分享了Grid表格加载更多的代码，现在需求是：加载更多之后，自动将滚动条定位到最底部。

二、自由定义滚动条

参考了网上各种博客代码，十几篇博客都在说同一个代码，几乎是Copy，很无奈。而且代码非常复杂，在Grid的viewConfig里面配置上百行的代码。这里就不贴出来了。无奈之下只能自己去看API。

三、整理思路

查看API所有的方法，看到有一个getSelectModel()方法。

思考：这个getSelectModel()是选择模型。

             那么，能不能这样子，在Grid中，使用getSelectModel()去指定选中某一行记录，然后滚动条就定义到那一行的上，不就实现了Grid滚动条滚动了么！

四、代码编写

测试代码

var model = DataGrid.getSelectionModel(); model.select(10);

效果：发现它真的定位到了：第十条记录。

基于上面这种代码。如果我们获取到Grid的条数的话，那么我就可以手动指定：滚动条到某一个位置上

 

1. 实现代码

// 选中最后一行，使滚动条滚动到最底部 var storeCount = DataGrid.getStore().getCount(); var model = DataGrid.getSelectionModel(); model.select(storeCount - 1);

结果就完成了。

 

很无奈，代码就三行，希望对你有帮助！

五、效率问题

上面这种，定位方法效率并不定，用new Date().getTime()测试过，定位时间1毫秒。为什么说这个呢？因为我开发完成之后，发现效率很低，然后对每个步骤进行了耗时检测，原因是：公司的服务器是海外的，请求的网络关系耗时比较长。

六、动态展示：“加载更多”按钮内容

Ext.getCmp('moreButton').setText('【 历史更多>> 】，当前总记录：【'+ storeCount + '】');