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