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