主要介绍form布局，用于布局表单 在web应用中，表单可谓是非常常用的，下面来看看ext的表单布局是如何构建出表单的，看以下代码：
运行
以上代码，将有如下效果：
这只是一个简单的表单，在实例分析中，我将实现一个完整的表单验证例子。
- 代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
</head>
<body>
<script>
Ext.onReady(function(){
new Ext.form.FormPanel({//这行换成 new Ext.Panel({ 是等效的
renderTo:'show',
title:'我的表单',
width:300,
//若实例化的是panel请加上声明布局为form layout:'form',
labelAlign:'right', //标签为右对齐
height:120,
defaultType: 'textfield', //默认字段类型为文本域
items:[{
fieldLabel:'帐户',
name:'name'
},{
fieldLabel:'密码',
name:'pws'
}]
});
});
</script>
<div id='show'></div>
</body>
</html>
运行
以上代码，将有如下效果：
这只是一个简单的表单，在实例分析中，我将实现一个完整的表单验证例子。
浙公网安备 33010602011771号