ExtJS4 Grid改变单元格背景颜色

原文地址:http://ext4all.com/post/how-to-change-grid-cell-background-color

 

利用的是 Column的 render

先看效果图:

ExtJS4 Grid改变单元格背景颜色

代码如下:

 

<!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>

    <title></title>

    <link href="../extjs-4.1.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" />

    <script src="../extjs-4.1.0/bootstrap.js" type="text/javascript"></script>

    <style type="text/css"> .x-grid-cell.user-online { background-color: #9fc; } .x-grid-cell.user-offline { background-color: blue; } </style>

    <script type="text/javascript">

        Ext.onReady(function () {

            Ext.widget('grid', {

                title: 'Users',

                store: {

                    fields: ['name', 'email', 'online'],

                    data: [

                        { 'name': '王俊伟', 'email': '[email protected]', 'online': true },

                        { 'name': '王俊伟1', 'email': '[email protected]', 'online': false },

                        { 'name': '王俊伟2', 'email': '[email protected]', 'online': false },

                        { 'name': '王俊伟3', 'email': '[email protected]', 'online': true }

                    ]

                },

                columns: [

                    {

                        header: 'Name',

                        dataIndex: 'name',

                        renderer: function (value, meta, record) { meta.tdCls = record.get("online") ? 'user-online' : 'user-offline'; return value; }

                    },

                    { header: 'Email', dataIndex: 'email', flex: 1 },

                    { header: 'Online', dataIndex: 'online' }

                ],

                width: 400,

                renderTo: Ext.getBody()

            });



        });

    </script>

</head>

<body>



</body>

</html>
Ext.onReady(function () {

    Ext.widget('panel', {

        title: 'Panel with styled body',

        html: "Custom CSS styles applied to the panel's body",

        width: 450,

        bodyStyle: {

            'color': '#fff',

            'background': '#C5E9F8',

            'font-size': '18px',

            'padding': '20px',

            'text-shadow': '1px 1px 1px #777',

            'box-shadow': 'inset 0 0 10px #157AB6'

        },

        renderTo: 'output'

    });

});

 

 

 

 

 

 

你可能感兴趣的:(extjs4)