Ext.grid.plugin.RowExpander的简单用法
有时候,我们在grid里渲染数据时,由于某些字段的内容太长,而grid又不会自动出现滚动条,于是溢出的内容后面就会出现省略号, 导致信息展示不完全。如果,这个信息不太重要,展示不完全也无关紧要。可是,有时候,用户需要查看溢出部分的详细内容时,怎么办呢?比如下图中的grid:
this.plugins = [
{
ptype: 'rowexpander',
rowBodyTpl : new Ext.XTemplate(
'<p >信息详情</p>',
'<p>{content}</p>',
'<p >收件人</p>',
'<p>{reciever}</p>'
)
}
];
//定义数据模型类
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();
})
{
"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"
}
]
}
Ext.grid.plugin.RowExpander的简单用法的更多相关文章
- Ext JS4百强应用: 用grid.plugin.CellEditing做高级查询 --第10强
Ext JS4,用grid.plugin.CellEditing做高级查询: 写了90%,界面出来了,小兴奋就贴出来,还有细节要调整,基本能用. 代码: Ext.define('chenghao.ad ...
- Ext.Net学习笔记19:Ext.Net FormPanel 简单用法
Ext.Net学习笔记19:Ext.Net FormPanel 简单用法 FormPanel是一个常用的控件,Ext.Net中的FormPanel控件同样具有非常丰富的功能,在接下来的笔记中我们将一起 ...
- Ext.grid rowexpander的展开与收缩
这里写Ext.grid.Panel的展开与收缩. 1. 确保在grid存在rowexpander对象: plugins: [{ ptype: 'rowexpander', rowBodyTpl: [' ...
- ext grid 子表格
Ext.define('app.view.main.biz.customer.receipt.followup.FollowUpActionPanel', { extend: 'Ext.grid.Pa ...
- Ext4.0.7使用Ext.grid.ColumnModel报错:TypeError: Ext.grid.Model is not a constructor
代码如下: Ext.onReady(function(){ //定义列 var cm = new Ext.grid.ColumnModel([ {header: '编号', dataIndex: 'i ...
- 导出Ext.grid.Panel到excel
1.客户端定义,基本的想法是form提交表格头定义,数据,以json方式传输 Ext.grid.Panel.addMembers({ exportExcel:function(options){ if ...
- EMCA和EMCTL的简单用法
背景 其实这两个完全是两回事,不过倒是有关系,emca就是建立的资料库,建立后就用emctl来管理服务了.oem有问题基本都是重建emca,然后用emctl来操作. 当时用emca感觉真是一阵空白,太 ...
- [Extjs] Ext4 Ext.grid.Panel 分页实现(mybatis 分页插件-PageHelper 使用)
先看图: 页面js代码: var userStore=Ext.create('Ext.data.Store', { storeId:'userStore', fields:['uname', 'ema ...
- 获取 ext grid 选中行 对象
在ext grid 中如何确定选中行?如何获取选中行数据? 其实很简单,用到了Ext.getCmp('id'),他可以获取到指定id的对象. grid 获取行对象: var row = Ext.get ...
随机推荐
- 12、android socket使用demo:网络聊天
目录: 一.效果图 二.原代码分享 三.代码分析 四.总结 一.效果图如下: 客户端1: 客户端2: 二.原代码分享如下: 1.java代码只有一个 MainActivity.ja ...
- 1.项目开发-->Memcached之ASP.NET实现
1.Memcached安装 第一步:下载windows稳定版Memcached 1.2.1 win32,解压后,将memcached.exe文件放到自己想存放的盘符内,例如C:\Windows\Sys ...
- IDEA for Mac 解决控制台乱码问题
近期发现 idea for mac 版本中 tomcat 控制台有中文的地方出现乱码问题,其实很简单就可以解决. 这里做个笔记,以后可以方便不会的人来解决 ---------------------- ...
- hdu 2686 Matrix 最小费用最大流
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2686 Yifenfei very like play a number game in the n*n ...
- 【转载】C++——CString用法大全
CString常用方法简介 作者:webmaster 出处:无 CString::Compareint Compare( LPCTSTR lpsz ) const;返回值 字符串一样 返回0 ...
- CREATEINPUTLAYOUT_INCOMPATIBLEFORMAT
这个error的全称是这样的 D3D11 ERROR: ID3D11Device::CreateInputLayout: Element[1]'s format (UNKNOW) cannot be ...
- websphere变成英文了
ebsphere页面怎么变成中文? 浏览器 -- internet选项 -- 常规 -- "语言" -- 打开后: 1. 如果只有"英语(美国)[en-US]" ...
- asp.net的sessionState节点详解
web.config关于sessionState节点的配置方案,sessionState有四种模式:off,inProc,StateServer,SqlServer. 1.off模式 从字面上就可以看 ...
- Asp.Net中用JS中操作cookie的方法
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="cookies.aspx.cs& ...
- ios设备突破微信小视频6S限制的方法
刷微信朋友圈只发文字和图片怎能意犹未竟,微信小视频是一个很好的补充,音视频到位,流行流行最流行.但小视频时长不能超过6S,没有滤镜等是很大的遗憾.but有人突破限制玩出了花样,用ios设备在朋友圈晒出 ...