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"
    }
  ]
}
复制代码

 

posted on   ChessZhang  阅读(3860)  评论(0编辑  收藏  举报

编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示