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準時到校接孩子回家。3、4、5、六年級全天考試，上午11:30放學，下午3:50放學,有接孩子的家長請準時到校接孩子回家。",
　　　　　　"reciever": "張三，李四，王五，趙六",
　　　　　　"time": "2015-10-20"
　　　　},
　　　　{
　　　　　　"id": "3",
　　　　　　"content": "各年級學生在1月1四、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"
　　　　}
　　]
}