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

//定义数据模型类
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"
　　　　}
　　]
}