EXTJS4之table布局陰影特效

本文轉載自查看原文 2012-07-06 11:04 6829 EXT擴展實例/ EXTJS布局/ EXTJS4

<!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 rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
    <style type="text/css">
        .shadowdiv
        {
            filter: progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4); /*ie*/
            -moz-box-shadow: 20px 20px 5px black; /*firefox*/
            -webkit-box-shadow: 20px 20px 5px black; /*safari或chrome*/
            box-shadow: 5px 5px 5px black; /*opera或ie9*/
        }

        .mytextfild
        {
            margin-bottom: 5px;
            margin-top: 5px;
        }
    </style>
</head>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript">
    Ext.onReady(function () {
        var win = Ext.create('Ext.window.Window', {
            title: 'Hello',
            height: 400,
            width: 800,
            bodyStyle: {
                background: '#339999',
                padding: '20px'
            },
            layout: 'fit',
            items: {
                xtype: 'form',
                html: '<br><center><font size="14">test</font></center>',
                cls: 'shadowdiv',　　//加入陰影效果
                layout: {
                    type: 'table',
                    columns: 5,　　
                    tableAttrs: {　　//在這兒控制table標簽中的Attrs屬性
                        border: 1,
                        cellpadding: 5,
                        cellspacing: 1,
                        width: '95%',
                        align: 'center',
                        style: "border:1px solid gray;border-collapse:collapse;margin:0 auto;text-align:center;"
                    },
                    tdAttrs: {　　//控制td標簽的屬性，以上用法都是在ext的api中查到，同樣的方式可以給tr添加屬性
                        width: '100px',
                        height: '40px',
                        style: "padding:5px",
                        valign: 'middle'
                    }
                },
                defaults: {
                    // applied to each contained panel
                    xtype: 'label'
                },
                items: [{
                    width: 500,
                    text: '單位賬號'
                }, {
                    width: 250,
                    xtype: 'textfield',
                    cls: 'mytextfild'
                }, {
                    text: '單位名稱',
                },
            {
                width: 250,
                xtype: 'textfield',
                colspan: 3
            }
            , {
                text: '繳納單編號'
            },
                {
                },
                {
                    text: '暫存款',
                },
                {
                    colspan: 3
                }]
            }
        });
        win.show();
    });
</script>
<body>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 extjs4 各種怪異問題 Extjs4 Grid詳解 Extjs4——表格控件 ExtJs4之Grid詳細 ExtJs4之TreePanel Extjs4 autoload和iframe的取舍 extjs4 父頁面與iframe交互 EXTJS4 如何默認選中樹(treeview)的節點 ExtJs4 日期年月選擇控件 Extjs4 MVC 添加view層

EXTJS4之table布局 陰影特效

免責聲明！

EXTJS4之table布局陰影特效