您的位置：首页 > 其它

Ext教程连载 - FormPanel基本表单

2009-09-29 08:03 183 查看

在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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>

<body>
<script>
Ext.onReady(function(){
Ext.QuickTips.init();//开启表单提示
Ext.form.Field.prototype.msgTarget = 'side';//设置提示信息位置为边上
var simple = new Ext.FormPanel({//初始化表单面板
labelWidth: 75, // 默认标签宽度
frame:true,//设置表单面板，false为无面板
title: '我的表单',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 230},
defaultType: 'textfield',//默认字段类型

items: [{
fieldLabel: '帐户',
name: 'name',
allowBlank:false,
blankText: '帐户不能为空'
},{
fieldLabel: '密码',
name: 'pws',
allowBlank:false,//禁止为空
blankText: '密码不能为空'//可限制多种类型，具体参照api文档
}
],

buttons: [{
text: '登录',
handler:function(){alert("你提交了表单！");}//提交表单与服务器交互的实例请参照实例分析部分《一个完整的登录实例》
},{
text: '取消',
handler:function(){simple.form.reset();}//重置表单
}]
});

simple.render('show');//填充到指定区域
});
</script>
<div id="show"></div>
</body>
</html>

效果如图：

也可以将表单作为窗体的一部分，看以下代码：

代码:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>

<body>
<script>
Ext.onReady(function(){
Ext.QuickTips.init();//开启表单提示
Ext.form.Field.prototype.msgTarget = 'side';//设置提示信息位置为边上
var simple = new Ext.FormPanel({//初始化表单面板
labelWidth: 75, // 默认标签宽度板
baseCls: 'x-plain',//不设置该值，表单将保持原样，设置后表单与窗体完全融合（-_-!!，说不清了，大家可以去掉运行下看看）
bodyStyle:'padding:5px 5px 0',
width: 350,
border:false,
defaults: {width: 230},
defaultType: 'textfield',//默认字段类型

items: [{
fieldLabel: '帐户',
name: 'name',
allowBlank:false,
blankText: '帐户不能为空'
},{
fieldLabel: '密码',
name: 'pws',
allowBlank:false,//禁止为空
blankText: '密码不能为空'//可限制多种类型，具体参照api文档
}
],

buttons: [{
text: '登录',
handler:function(){alert("你提交了表单！");}//提交表单与服务器交互的实例请参照实例分析部分《一个完整的登录实例》
},{
text: '取消',
handler:function(){simple.form.reset();}//重置表单
}]
});

//构建窗体，窗体会在之后具体讲
win = new Ext.Window({
id:'win',
title:'登陆',
layout:'fit',
width:360,
height:150,
plain:true,
bodyStyle:'padding:5px;',
maximizable:false,
closeAction:'close',
closable:false,
collapsible:true,
plain: true,
buttonAlign:'center',
items:simple//作为窗体元素
});
win.show();
});
</script>
</body>
</html>

运行以上代码，将有如下效果：

打完收工，下一节咱们加上服务端代码。

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

标签：

相关文章推荐

新的分享

章节导航