Ext.grid.plugin.RowExpander的简单用法

有时候，我们在grid里渲染数据时，由于某些字段的内容太长，而grid又不会自动出现滚动条，于是溢出的内容后面就会出现省略号， 导致信息展示不完全。如果，这个信息不太重要，展示不完全也无关紧要。可是，有时候，用户需要查看溢出部分的详细内容时，怎么办呢？比如下图中的grid：

 

因为信息内容太长，导致“消息内容”展示不全，这时候想要查看详细信息怎么办呢？

最简单的解决方法就是利用 Ext.grid.plugin.RowExpander 

 

我们在grid配置项里面添加一个plugins属性。如下图所示

 this.plugins = [
　　{
　　　　ptype: 'rowexpander',
　　　　rowBodyTpl : new Ext.XTemplate(
　　　　　　'<p >信息详情</p>',
　　　　　　'<p>{content}</p>',
　　　　　　'<p >收件人</p>',
　　　　　　'<p>{reciever}</p>'
　　　　)
　　}
];

这是候，我们在浏览器刷新页面，就会发现每一行数据前面都会有一个加号了，然后，点击那个加号就会出现一个展看详细信息了。添加了上述代码之后，效果图如下所示：

本例子的详细代码如下：

js代码：

//定义数据模型类
Ext.define("MsgModel", {
　　extend: "Ext.data.Model",
　　fields: [
　　　　"id", "content", "reciever", "time"
　　]
});

//定义一个数据缓存Stroe类
Ext.define("MsgStore", {
　　extend: "Ext.data.Store",
　　model: "MsgModel",
　　autoLoad: true,
　　proxy: {
　　　　type: 'ajax',
　　　　url: 'msglist.json',
　　　　reader: {
　　　　　　type: 'json',
　　　　　　root: 'data'
　　　　}
　　}
});

//定义视图类
Ext.define("MsgView", {
　　extend: "Ext.grid.Panel",
　　forceFit: true, //强制充满表格
　　initComponent: function() {
　　　　this.store = Ext.create("MsgStore");
　　　　this.columns = [
　　　　　　{
　　　　　　　　text: "消息id",
　　　　　　　　hidden: true,
　　　　　　　　dataIndex: "id"
　　　　　　},
　　　　　　{
　　　　　　　　text: "消息内容",
　　　　　　　　flex: 10,
　　　　　　　　dataIndex: "content"
　　　　　　},
　　　　　　{
　　　　　　　　text: "接受人",
　　　　　　　　flex: 10,
　　　　　　　　dataIndex: "reciever"
　　　　　　},
　　　　　　{
　　　　　　　　text: "发送日期",
　　　　　　　　flex: 2,
　　　　　　　　dataIndex: "time"
　　　　　　},
　　　　　　//删除按钮
　　　　　　{
　　　　　　　　xtype: "actioncolumn",
　　　　　　　　flex: 1,
　　　　　　　　header: "删除",
　　　　　　　　itemId: "delete",
　　　　　　　　align: "center",
　　　　　　　　items: [
　　　　　　　　　　{
　　　　　　　　　　　　iconCls: "delete",
　　　　　　　　　　　　handler: function(grid, rowIndex, colIndex) {
　　　　　　　　　　　　　　　//这里面实现删除的相关操作
　　　　　　　　　　　　}
　　　　　　　　　　}
　　　　　　　　]
　　　　　　}
　　];

　　//使用RowExpander
　　this.plugins = [
　　　　{
　　　　　　ptype: 'rowexpander',
　　　　　　rowBodyTpl : new Ext.XTemplate(
　　　　　　　　'<p >信息详情</p>',
　　　　　　　　'<p>{content}</p>',
　　　　　　　　'<p >收件人</p>',
　　　　　　　　'<p>{reciever}</p>'
　　　　　　)
　　　　}
　　];

　　//固定菜单栏
　　this.dockedItems = [
　　　　{
　　　　　　xtype: "toolbar",
　　　　　　dock: "top",
　　　　　　defaults: {
　　　　　　　　labelWidth: 20
　　　　　　},
　　　　　　items: [
　　　　　　　　{
　　　　　　　　　　xtype: "label",
　　　　　　　　　　text: "时间范围:",
　　　　　　　　　　margin: "0 10"
　　　　　　　　},
　　　　　　　　{
　　　　　　　　　　xtype: "datefield",
　　　　　　　　　　format: "Y-m-d",
　　　　　　　　　　emptyText: "日期格式：xxxx-xx-xx",
　　　　　　　　　　fieldLabel: "从",
　　　　　　　　　　itemId: "beginTime"
　　　　　　　　},
　　　　　　　　{
　　　　　　　　　　xtype: "datefield",
　　　　　　　　　　format: "Y-m-d",
　　　　　　　　　　emptyText: "日期格式：xxxx-xx-xx",
　　　　　　　　　　fieldLabel: "到",
　　　　　　　　　　itemId: "endTime"
　　　　　　　　},
　　　　　　　　{
　　　　　　　　　xtype: "button",
　　　　　　　　　　iconCls: "key_go",
　　　　　　　　　　text: "查询",
　　　　　　　　　　itemId: "query"
　　　　　　　　}
　　　　　　]
　　　　},

　　　　//分页工具
　　　　{
　　　　　　xtype: 'pagingtoolbar',
　　　　　　itemId: "paging",
　　　　　　store: this.store, // same store GridPanel is using
　　　　　　dock: 'bottom',
　　　　　　displayInfo: true
　　　　}
　　];
　　this.callParent(arguments);
}

});

//实例化视图类
Ext.create("MsgView", {
　　renderTo: Ext.getBody();
})

msglist.json文件内容如下：

{
　　"data": [
　　　　{
　　　　　　"id": "1",
　　　　　　"content": "三是要提醒广大学生要自觉遵守国家的法律法规和学校的各项规章制度，放假期间不得将校外人员带入校内游玩、住宿，不参与赌博、传销、邪教以及其它违纪违法活动，不参与有损学生形象的事，积极参加健康有益的社会公益活动。四是在假期教育学生不要自己燃放烟花，加强学生的消防安全教育",
　　　　　　"reciever": "张三，李四，王五，赵六,小明，小红，小张，小黄，小等，小李，小杨，小不点，小姨",
　　　　　　"time": "2015-10-20"
　　　　},
　　　　{
　　　　　　"id": "2",
　　　　　　"content": "一年级、二年级考试上午半天，于10:40结束考试，请各位家长10:50准时到校接孩子回家。三、四、五、六年级全天考试，上午11:30放学，下午3:50放学,有接孩子的家长请准时到校接孩子回家。",
　　　　　　"reciever": "张三，李四，王五，赵六",
　　　　　　"time": "2015-10-20"
　　　　},
　　　　{
　　　　　　"id": "3",
　　　　　　"content": "各年级学生在1月14、15号考试结束，就已经开始了假期，请家长在家中看护好自己的孩子，做好学生的安全教育：",
　　　　　　"reciever": "张三，李四，王五，赵六",
　　　　　　"time": "2015-10-20"
　　　　},
　　　　{
　　　　　　"id": "4",
　　　　　　"content": "注意：返校取通知书的时间是2013年1月18号上午8点，学校9点召开校会、9点30分学生离校（请各位家长注意及时接孩子回家）。",
　　　　　　"reciever": "张三，李四，王五，赵六",
　　　　　　"time": "2015-10-20"
　　　　},
　　　　{
　　　　　　"id": "5",
　　　　　　"content": "一是提醒学生要注意交通安全，防止发生交通事故。二是提醒学生外出参观旅游、探亲访友时，做好自身安全及防盗、骗、抢劫等恶性事件的发生，且不可乘坐三无、超载车辆。",
　　　　　　"reciever": "张三，李四，王五，赵六",
　　　　　　"time": "2015-10-20"
　　　　}
　　]
}