在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> 运行以上代码,将有如下效果: 打完收工,下一节咱们加上服务端代码。 |