您的位置：首页 > Web前端 > JavaScript

Extjs 实现布局 Demo

2011-11-21 10:34 302 查看

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ExtJS</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="Extjs/source/locale/ext-lang-zh_CN.js"></script>

<script type="text/javascript" language="javascript">
/*
作者 孙聪聪
*/
Ext.onReady(function() {
var L_RowOne=new Ext.Panel({
frame:true,
height:200,
width:600,
title:"面板头部header",
renderTo:divPanel,
layout:"column",
border:false,
buttons:[{text:"按钮位于footer"}],
items:[{
layout:'form',
columnWidth:.5,
border:false,

items:[

{xtype: "textfield", id: "userName", fieldLabel: "用户名" ,style:"margin:1 3 15 3", labelWidth: 5, emptyText: "请输入用户名", allowBlank: false, blankText: "用户名不能为空" },
{xtype: "textfield", id: "userPass", fieldLabel: "密   码", style: "margin:1 3 15 3", labelWidth: 5, inputType: "password" },
{xtype: "textfield", id: "confirm", fieldLabel: "确认密码", style: "margin:1 3 15 3", labelWidth: 5, inputType: "password" }

]
},
{
layout:'form',
columnWidth:.5,
border:false,
defaultType: 'textfield',
items:[

{xtype: "textfield", id: "userName1", fieldLabel: "用户名" ,style:"margin:1 3 15 3", labelWidth: 5, emptyText: "请输入用户名", allowBlank: false, blankText: "用户名不能为空" },
{xtype: "textfield", id: "userPass1", fieldLabel: "密   码", style: "margin:1 3 15 3", labelWidth: 5, inputType: "password" },
{xtype: "textfield", id: "confirm1", fieldLabel: "确认密码", style: "margin:1 3 15 3", labelWidth: 5, inputType: "password" }

]

}]
});

});
</script>
</head>

<body>

<div id="divPanel">

</div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航