Ext.grid.plugin.RowExpander的简单用法
来源:互联网 发布:安卓聊天软件源码 编辑:程序博客网 时间:2024/04/29 20:10
有时候,我们在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" } ]}
0 0
- Ext.grid.plugin.RowExpander的简单用法
- Ext.grid.plugin.RowExpander的使用
- Ext.grid.RowExpander插件的使用,
- Ext4.2+ Ext.grid.plugin.RowExpander无法触发collapsebody,expandbody事件解决办法
- Ext.ux.grid.RowExpander 如何设置为默认展开效果
- Ext.ux.grid.RowExpander默认展开所有行
- EXTJS——ext.grid.RowExpander模板数据刷新问题
- Ext Grid的大致用法
- ext中对RowExpander的使用
- Ext入门之-------最简单的Grid
- 编辑Grid时用Ext.grid.plugin.RowEditing 插件
- [Sencha ExtJS & Touch] 表格(Ext.grid.Grid) 和 表格视图选项(Ext.grid.plugin.ViewOptions) 使用的时候要注意的问题
- Ext中RowExpander数据刷新
- 封装的Ext Grid
- EXT的grid扩展
- ext下的grid
- Ext.grid.plugin.RowEditing点击取消的操作 (EXT4.0)
- extjs中grid中checkbox的用法,ext中grid获取checkbox的值
- java篇 【14】Java 继承
- 关于应急道占用问题
- 【Cpp】删除字符串空格
- 安卓控件使用系列20:ProgressBar进度条控件的使用方法
- 弱校联萌十一大决战之强力热身 C题
- Ext.grid.plugin.RowExpander的简单用法
- Spark On YARN内存分配
- <线段树>寻找神格
- 黑马程序员——Java开发前奏
- [经济学原理|政治部分]剩余价值理论
- nyoj 71 独木舟上的旅行
- HDOJ 5480 Conturbatio
- Spark源码系列(七)Spark on yarn具体实现
- [经济学原理|政治部分]资本积累理论