ext.js grid怎么把分页放在底部

ext.js grid怎么把分页放在底部

Ext JS是一款强大的，重度封装的前段框架。事实上，正是因为其重度封装，把文档写成了词典而非教程，导致其对初学者较为不友好，前期的学习曲线非常陡峭，常常会有不知如何下手的感觉。ext js的grid分页放置其实是一个较为简单的问题，接下来我们结合Ext JS的官方教程来解决这一问题。

首先，我们进入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的官方文档写的是真懒，就是出了一部工具书的感觉，对于没有入门的新手来讲完全不知道如何下手，所以多看看示例比直接看文档会好一些。