天天看點
傳回

ext2.2打造全新功能grid系列--grid擴充行篇（六）

在這篇文章裡介紹了如何将grid擴充行，通常在很多的新聞網站，你隻能夠看見标題資訊，或者看到的将内容資訊截取的，無論哪樣，你都無法一目了然的浏覽詳細内容，除非你打開新的頁面。這裡向大家介紹了Ext自帶擴充grid行所實作的驚人的效果。實作功能就是在行的前面定義了一個加号，當點這個加号時就會在緊接目前行的下方顯示你定義的任何資訊，特别是詳細資訊。效果非常精美絕倫。

先看看效果圖吧

ext2.2打造全新功能grid系列--grid擴充行篇（六）

上面是grid清單顯示的結果，注意看每行前面的小加号圖示，這個小圖示就是檢視詳細内容的按鈕，點這個加号小圖示就會出現如下所示的效果圖

ext2.2打造全新功能grid系列--grid擴充行篇（六）

是不是非常酷的效果

下面把具體的用戶端的實作代碼張貼出來,背景代碼和本系列的前幾篇是一樣的,唯一不同地方是将原來的表增加一個Message字段,用于存放詳細内容.是以這裡就不再将背景張貼出來了.

[複制到剪貼闆] CODE: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="gridRowExpander.aspx.cs" Inherits="gridRowExpander" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>顯示詳細内容</title>

    <link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css" target="_blank" rel="external nofollow" />

    <link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/xtheme-green.css" target="_blank" rel="external nofollow" />

    <script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js"></script>

    <script type="text/javascript" src="ExtJS/ext-all.js"></script>

    <script type="text/javascript" src="ExtJS/ext-lang-zh_CN.js"></script>

    <style type="text/css">

    .panel_icon { background-image:url(images/first.gif)}

    .center_icon { background-image:url(images/house.png)}

    </style>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    <script type="text/javascript">

    function ready()

    {       

        //添加下面這句，有助于當滑鼠放在Ext自帶的圖示上時能夠顯示提示的功能

        Ext.QuickTips.init();

        var url = "jsonGrid3.aspx?Param=select";

        // 擴充行 使得在每一行的第一列都有一個加号 點加号就可以得到詳細資訊

        var expander = new Ext.grid.RowExpander

        ({

            tpl : new Ext.Template

            (

                '<div style="text-align:center;background-image:url(images/22.jpg);"><br/>',

                '<p><b>英文标題:</b> <span style="color:red;">{TypeEName}</span></p><br>',

                '<p><b>中文标題:</b> <span style="color:green;">{TypeCName}</span></p><br>',

                '<p><b>詳細内容:</b><br> <span style="color:blue;text-align:center;">{Message}</span></p>',

                '</div><br/>'

            )

        });

        var cm = new Ext.grid.ColumnModel

        ([       

            expander,           

            new Ext.grid.RowNumberer({header:"編号",width:50}),

            {header:"編号",dataIndex:"ID",width:10,hidden:true},

            {header:"标題",dataIndex:"TypeCName",width:100,editor:new Ext.form.TextField()},

            {header:"英文名稱",dataIndex:"TypeEName",width:100,editor:new Ext.form.TextField()},

            {header:"狀态",dataIndex:"DelFlag",width:100,renderer:function(value){if(value==false) {return "顯示";} else {return "隐藏";}}},

            {header:"添加日期",dataIndex:"AddDate",width:100,renderer:Ext.util.Format.dateRenderer('Y年m月d日')}

        ]);

        cm.defaultSortable = true; 128

        var fields =

            [

                {name:"ID"},

                {name:"TypeCName"},

                {name:"TypeEName"},

                {name:"Message"},

                {name:"DelFlag"},

                {name:"AddDate"}

          ];

        var store = new Ext.data.Store

        ({

            proxy:new Ext.data.HttpProxy({url:url}),

            reader:new Ext.data.JsonReader({totalProperty:"totalPorperty",root:"root",fields:fields})

        });

        store.load({params:{start:0,limit:15}});

        var pagingBar = new Ext.PagingToolbar

        ({

            displayInfo:true,

            emptyMsg:"沒有資料顯示",

            displayMsg:"顯示從{0}條資料到{1}條資料，共{2}條資料",

            store:store,

            pageSize:15

        });

        var grid = new Ext.grid.GridPanel

        ({

            id:"MenuGridPanel",

            store:store,           

            cm:cm,

            renderTo:document.body,

            plugins:expander,

            layout:"fit",

            frame:true,

            border:true,

            width:700,

            height:450,

            autoScroll:true, 

            viewConfig:{forceFit: true},

            title:'<img style="height:auto; width:auto;" src="images/first.gif" /> Ext2.2全新功能版系列之--顯示詳細内容',

            bbar:pagingBar

        });

    }

    </script>

    <script type="text/javascript">

    //Ext自帶行擴充

    Ext.grid.RowExpander = function(config)

    {

        Ext.apply(this, config);

        this.addEvents

        ({

            beforeexpand : true,

            expand: true,

            beforecollapse: true,

            collapse: true

        });

        Ext.grid.RowExpander.superclass.constructor.call(this);

        if(this.tpl)

        {

            if(typeof this.tpl == 'string')

            {

                this.tpl = new Ext.Template(this.tpl);

            }

            this.tpl.compile();

        }

        this.state = {};

        this.bodyContent = {};

    };

    Ext.extend(Ext.grid.RowExpander, Ext.util.Observable,

    {

        header: "",

        width: 20,

        sortable: false,

        fixed:true,

        menuDisabled:true,

        dataIndex: '',

        id: 'expander',

        lazyRender : true,

        enableCaching: true,

        getRowClass : function(record, rowIndex, p, ds)

        {

            p.cols = p.cols-1;

            var content = this.bodyContent[record.id];

            if(!content && !this.lazyRender)

            {

                content = this.getBodyContent(record, rowIndex);

            }

            if(content)

            {

                p.body = content;

            }

            return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';

        },

        init : function(grid){

            this.grid = grid;

            var view = grid.getView();

            view.getRowClass = this.getRowClass.createDelegate(this);

            view.enableRowBody = true;

            grid.on('render', function()

            {

                view.mainBody.on('mousedown', this.onMouseDown, this);

            }, this);

        },

        getBodyContent : function(record, index)

        {

            if(!this.enableCaching)

            {

                return this.tpl.apply(record.data);

            }

            var content = this.bodyContent[record.id];

            if(!content)

            {

                content = this.tpl.apply(record.data);

                this.bodyContent[record.id] = content;

            }

            return content;

        },

        onMouseDown : function(e, t)

        {

            if(t.className == 'x-grid3-row-expander')

            {

                e.stopEvent();

                var row = e.getTarget('.x-grid3-row');

                this.toggleRow(row);

            }

        },

        renderer : function(v, p, record){

            p.cellAttr = 'rowspan="2"';

            return '<div class="x-grid3-row-expander"> </div>';

        },

        beforeExpand : function(record, body, rowIndex)

        {

            if(this.fireEvent('beforeexpand', this, record, body, rowIndex) !== false)

            {

                if(this.tpl && this.lazyRender)

                {

                    body.innerHTML = this.getBodyContent(record, rowIndex);

                }

                return true;

            }

            else

            {

                return false;

            }

        },

        toggleRow : function(row)

        {

            if(typeof row == 'number')

            {

                row = this.grid.view.getRow(row);

            }

            this[Ext.fly(row).hasClass('x-grid3-row-collapsed') ? 'expandRow' : 'collapseRow'](row);

        },

        expandRow : function(row)

        {

            if(typeof row == 'number')

            {

                row = this.grid.view.getRow(row);

            }

            var record = this.grid.store.getAt(row.rowIndex);

            var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);

            if(this.beforeExpand(record, body, row.rowIndex))

            {

                this.state[record.id] = true;

                Ext.fly(row).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');

                this.fireEvent('expand', this, record, body, row.rowIndex);

            }

        },

        collapseRow : function(row)

        {

            if(typeof row == 'number')

            {

                row = this.grid.view.getRow(row);

            }

            var record = this.grid.store.getAt(row.rowIndex);

            var body = Ext.fly(row).child('tr:nth(1) div.x-grid3-row-body', true);

            if(this.fireEvent('beforecollapse', this, record, body, row.rowIndex) !== false)

            {

                this.state[record.id] = false;

                Ext.fly(row).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');

                this.fireEvent('collapse', this, record, body, row.rowIndex);

            }

        }

    });

    </script>

    <script type="text/javascript">

    Ext.onReady(ready);

    </script>

    </div>

    </form>

</body>

</html>

ExtJs2.0學習系列 擴充 EXT function header stylesheet url
上一篇: ext2.2打造全新功能grid系列--顯示清單篇（十）
下一篇: ext2.2打造全新功能grid系列--閱增删改篇（四）

繼續閱讀