• 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,
                 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,
                             '95%',
                            align: 'center',
                            style: "border:1px solid gray;border-collapse:collapse;margin:0 auto;text-align:center;"
                        },
                        tdAttrs: {  //控制td标签的属性,以上用法都是在ext的api中查到,同样的方式可以给tr添加属性
                             '100px',
                            height: '40px',
                            style: "padding:5px",
                            valign: 'middle'
                        }
                    },
                    defaults: {
                        // applied to each contained panel
                        xtype: 'label'
                    },
                    items: [{
                         500,
                        text: '单位账号'
                    }, {
                         250,
                        xtype: 'textfield',
                        cls: 'mytextfild'
                    }, {
                        text: '单位名称',
                    },
                {
                     250,
                    xtype: 'textfield',
                    colspan: 3
                }
                , {
                    text: '缴纳单编号'
                },
                    {
                    },
                    {
                        text: '暂存款',
                    },
                    {
                        colspan: 3
                    }]
                }
            });
            win.show();
        });
    </script>
    <body>
    </body>
    </html>
  • 相关阅读:
    iota妙用
    io
    http
    gosched
    go设置使用多少个cpu
    go协程的特点
    go条件变量同步机制
    Go奇技淫巧
    U5首次登录
    Maven安装中的问题
  • 原文地址:https://www.cnblogs.com/zdkjob/p/2579092.html
Copyright © 2020-2023  润新知