extjs学习笔记（四--2）带分页的grid

           // 定制用户界面
 94            viewConfig: {
 95                forceFit: true,
 96                enableRowBody: true,
 97                showPreview: true,
 98                getRowClass: function(record, rowIndex, p, store) {
 99                    if (this.showPreview) {
100                        p.body = '<p>' + record.data.excerpt + '</p>';
101                        return 'x-grid3-row-expanded';
102                    }
103                    return 'x-grid3-row-collapsed';
104                }
105            },
106            
107            //在顶部的分页工具栏
108            //tbar: pagingToolbar,
109            
110            // 在底部的分页工具栏
111            bbar: pagingToolbar
112        });
113
114        // 加载数据
115        store.load({ params: { start: 0, limit: 25} });
116
117        // 主题列的renderer函数
118        function renderTopic(value, p, record) {
119            return String.format(
120                '<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
121                value, record.data.forumtitle, record.id, record.data.forumid);
122        }
123        //最后回复列的renderer函数
124        function renderLast(value, p, r) {
125            return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
126        }
127    })    运行下看看效果，我们可以看到在获取数据的时候，页面被动画遮盖住，如图：

    当数据加载完成，我们看到数据在grid中分页显示，并且按照最后发表列降序排列，其中作者列被隐藏：

    当点击列名进行排序时，会从服务器上重新加载新的数据，点击向右的箭头，可以翻页，还可以点点“预览”按钮看看效果。虽然这次的代码相对最简单的grid多了不少，但效果也cool了不少。我们从头开始把代码理一下吧：
    第8行使用了图片占位符，它指向的图片是一张空图片。在extjs的库文件中，根据需要会把这个图片占位符替换成另一张图片，在我们的例子中，如果去掉这一行，影响不会太大，只是标题栏中“最后回复”旁边向下的小箭头会不见了。我们还是养成把这一行写上的习惯吧。
    11-28行构造了一个Store类的对象，这个没什么好说的了。
    第30行设置lastpost列为默认排序的列，并且是按降序排列，注意“DESC"必须是大写，升序是“ASC”。
    33-51行构造带分页的工具栏，前边都已经说过了。
    54-112行构造带有分页功能的grid。
        其中第60行指示鼠标在行上悬浮时行不会高亮显示。
        61行指示用户不能对grid进行选择。
        62行指示在加载数据的时候遮盖住页面，我们可以在截图上看到效果，不过还是推荐自己运行看下效果，毕竟这里显示的是动画。当数据加载完毕之后遮盖效果消失。
        94-105行设置用户界面，我们看看每个参数的意义：
            forceFit：是否强制列调整宽度使得不出现水平滚动条，默认是false。
            enableRowBody：为true的时候允许每行增加一个tr元素用来扩展数据行。
            showPreview：自定义的bool类型的属性，用来在代码中控制是否显示预览。
            getRowClass：这是一个方法，用来改写行的css样式，它有四个参数，第一个是代表该行数据的Record对象，第二个是行的索引，第三个就是enableRowBody设置true时传递进来的
                                      参数，可以通过该参数的body属性扩展行数据。该方法应当返回一个css类名。我们的例子中，根据showPreview的值来动态显示文章的摘要信息。
        111行将分页工具栏显示在grid底部，如果想显示在顶部可以用tbar来代替bbar。
        115行向服务器发出请求获取数据，extjs会以post方式将params中的参数发送给服务器，其中start指明从地几条数据开始，limit则表示每页显示多少数据。
    118到126是两个renderer函数，在上一个系列中已经解释过用法了。
    最后要指出的是，分页的功能其实还是在服务器端完成的。当在客户端进行翻页的时候，会和115行一样提交参数，我们需要在服务器端根据传递过来的star和limit的值来计算出应当返回的数据并且按照正确的格式来发送给客户端。至于服务器端如何获得客户端传递过来的参数和如何发送数据给客户端，可参阅本系列的第一节。