EXTJS4之table布局 阴影特效

 

<!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>
posted @ 2012-07-06 11:04  zdkjob  阅读(7189)  评论(0)    收藏  举报