首先,我们进入Ext JS官网,通过结合官网示例,一方面能够快速实现这一问题,另一方面,官网教程虽然写得对新手不友好,但是丰富的示例也是开发过程中较为重要的参考。官网地址:https://www.sencha.com/products/extjs/#overview。
点击上图中右下角的"Examples"链接,进入官方的示例页,如下图,我们看到,官方提供了大量的相关示例,点击进入“Kitchen Sink (Classic)”。进入相关示例页。Ext JS在最近的几个版本中,分为了Classic和Modern两类,其底层核心是一致的,只不过在表现层的展现不一致,前者更适合通常的浏览器,后者更适合触屏(移动端)表现。我们选择Classic来进行演示。
在打开的页面中,有很多示例分类,选择“Grids”。
进入Grids分类后,有核心(基础)特性,附加元件,先进特性三个模块,每个模块下都有众多的相关特性示例,各位网友可以自行点开学习相关的示例写法。鉴于本篇经验是教学分页组件的摆放,我们进入“Add-ons and Decorations”。
我们想要研究的分页工具栏,就在对应的“Paging”示例里。
打开Paging示例,我们发现分页工具栏就在下面,显然,这是我们想要的效果。但是代码如何写呢?
看页面的最右侧,蓝色的“Details”,点击打开,就能够看到实现当前示例的View,Model,Controller,Store以及可能的ViewModel的写法。分页工具栏的布局明显是属于视图层,切换到View,滚动条拉动到下方,我们可以看到分页之所以在下面,是因为使用了bbar。
事实上,Ext JS的bar(可以理解为工具条)分为tbar/bbar/lbar/rbar四个,分别代表Top Bar、Bottom Bar、Left Bar、Right Bar,所以,如果想把page分页放到表格底部或者是panel顶部,就使用tbar,放到底部则使用bbar。对于相关组件的详细说明,可以在官方文档中进行检索。官方文档地址:http://docs.sencha.com/extjs/6.5.1/guides/quick_start/introduction.html。注意看右上方的搜索框。
最后的总结,Ext JS的官方文档写的是真懒,就是出了一部工具书的感觉,对于没有入门的新手来讲完全不知道如何下手,所以多看看示例比直接看文档会好一些。