这个表单也是我使用中的一个东西。感觉还不错。
先看运行效果
看代码
- <!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>
- <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>
- <script type="text/javascript" src="adapter/prototype/prototype.js"></script>
- <script type="text/javascript" src="adapter/prototype/scriptaculous.js?load=effects"></script>
- <script type="text/javascript" src="adapter/prototype/ext-prototype-adapter.js"></script>
- <script type="text/javascript" src="ext-all.js"></script>
- <style type="text/css">
- #LOGIN_FORM_LAYER {
- position:relative;
- top:150px;
- width: 965px;
- height: 551px;
- }
- #loginDIV {
- width:500px;
- position:relative;
- top:100px;
- }
- </style>
- </head>
- <body>
- <center>
- <script type="text/javascript">
- Ext.onReady(function(){
- Ext.QuickTips.init();
- // turn on validation errors beside the field globally
- Ext.form.Field.prototype.msgTarget = 'side';
- var bd = Ext.getBody();
- /*
- * ================ Simple form =======================
- */
- //bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});
- var simple = new Ext.FormPanel({
- id: 'LOGIN_FORM',
- labelWidth: 75, // label settings here cascade unless overridden
- url:'login.jsp',
- frame:true,
- title: '<font size=3>登录系统</font>',
- bodyStyle:'padding:5px 5px 0',
- width: 350,
- defaults: {width: 230},
- defaultType: 'textfield',
- ctCls: 'font-size:12px',
- items: [{
- fieldLabel: '用户名',
- name: 'username',
- allowBlank:false
- },{
- fieldLabel: '密码',
- name: 'password',
- inputType :'password'
- },new Ext.form.Hidden({
- name:'referer',
- value:'/index'
- })
- ],
- buttons: [{
- id: 'submitButton',
- type: 'submit',
- text: '登录',
- tooltip: '点击这个按钮登录系统',
- handler: login
- }]
- });
- simple.render("loginDIV");
- });
- function login(){
- Ext.Ajax.request({
- url: '/login',
- form: 'LOGIN_FORM',
- success: function(t){
- alert(t.responseText);
- }
- });
- }
- </script>
- <div id="LOGIN_FORM_LAYER">
- <div id="loginDIV"></div>
- </div>
- </center>
- </body>
- </html>
其中的/login处理登录的代码我就不写了。大家自己做吧。
分享到:
相关推荐
前段时间在忙于Hiberante3.2/3.3的开发指南的整理与学习,刚忙完发现我现在的学生在开发Ext2.2应用时有... 对于代码我有非常详细的中文注释,我想当你认真看完以上代码之后,能够帮助大家更好的学习和使用Ext2.2框架。
ext2.2 所需的几个文件:ext-all.css, ext-base.js, ext-all.js,还有对应的API帮助文档
Ext2.2的中文学习手册.很实用.快速掌握Ext最新版本的好工具.
Ext 2.2 帮助文档 Release Notes for Ext 2.2.0 Release Date: August 4, 2008 Current Version: 2.2.0 (rev 2547) Previous Version: 2.1.0 (rev 2042)
EXT2.2 开发环境 EXT例子 自己练级EXT2.2环境 配合我写的日志使用,
经过2个多月的奋战,Ext2.2的中文API终于翻译完成,今日发布(2009-08-10)。请大家下载时注意,不要下载前次上传的第二次更新了(晕,CSDN居然不能删除上传的资源,为避免误导大家,特此说明)。
DW CS3--EXT2.2插件DW CS3--EXT2.2插件DW CS3--EXT2.2插件DW CS3--EXT2.2插件DW CS3--EXT2.2插件
Ext js 2.2框架的中文版本api
Ext2.2docs.chm Ext2.2docs.chm Ext2.2docs.chm Ext2.2docs.chm Ext2.2docs.chm
自己的小示例
EXT_中文手册 pdf+Ext2.2API中文版(最终完成版).CHM
ext2.2中文版 API,虽然不是很完美,但是2.2的技术都全的,没有什么例子,可以下载个ext2.2里面有一些自带的例子,API中主要是介绍属性和方法的用法
最新Ext的开发包含Ext例子,Ext2.2开发包和API。
Ext JS 是一种强大的 JavaScript™ 库,它通过使用可重用的对象和部件简化了 Asynchronous JavaScript + XML(Ajax)开发。本文介绍 Ext JS,概述它背后的面向对象 JavaScript 设计概念,解释如何使用 Ext JS 框架...
Ext2.2中文文档,Ext3.0中文文档
Ext2.2.zip 。。Oozie使用的ext包。。Oozie使用的ext包。
界面漂亮,文档详细.开发ajax必备的的文档.
现在ext官方不提供2.2的下载了,在此分享给大家!
Ext 2.2 - API 中文文档地址
ext2.2开发包和参考案例