(1) ExtJS 始め
最近公司来了个新项目，客户指明了要使用ExtJS技术，或许是厌倦了以往那种死板的页面风格吧。虽然咱已经不太年轻，但也硬着头皮开始学习这门新的技术，O(∩_∩)O~
第一步 ，当然是从Google开始了~先把ExtJS官方网站搜出来，把ExtJS下载下来。现在的最新版本是3.3.1，搜索的过程中，居然发现3.0之后的版本要收费了！打击中…… 先假装没看见，继续~下载下来，当然是先看了下他的Sample，功能还是挺强大的~视觉冲击力也挺强，怪不得客户会指明这个技术。看了下目录结构，找到几个重要的文件
ext-3.3.1/resources/css/ext-all.css
ext-3.3.1/adapter/ext/ext-base.js
ext-3.3.1/ext-all.js
就先来个HTML 漱漱口吧~
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="../skin/ext-all.css" /> <script type="text/javascript" src="../js/ext-base.js"></script> <script type="text/javascript" src="../js/ext-all.js"></script> <script type="text/javascript" src="../code/loginForm.js"></script> <style> .loginForm { width: 100%; vertical-align: middle; margin:auto; } </style> </head> <body> <center> <div id="loginForm" class="loginForm"> <h2>Welcome to Earth</h2> </div> </center> </body> </html>
其中的loginForm.js
Ext.onReady(function() { Ext.QuickTips.init(); // turn on validation errors beside the field globally Ext.form.Field.prototype.msgTarget = 'side'; /* * ================ Simple form ======================= */ var simple = new Ext.FormPanel({ labelWidth : 75, // label settings here cascade // unless overridden url : 'save-form.php', frame : true, title : 'Login Form', bodyStyle : 'padding:5px 5px 0', width : 350, defaults : { width : 200 }, defaultType : 'textfield', items : [{ fieldLabel : 'Name', name : 'userName', value:"iamET", allowBlank : false, blankText : "用户名不能为空", regex : /^[a-zA-Z0-9]{5,20}$/, regexText : "用户名为长度[5-20]的英文和数字" }, { fieldLabel : 'Password', name : 'password', allowBlank : false, blankText : "密码不能为空", regex : /^[a-zA-Z0-9]{5,20}$/, regexText : "密码为长度[5-20]的英文和数字", inputType:"password" }], buttons : [{ text : 'Login' }, { text : 'Reset' }] }); simple.render("loginForm"); Ext.get("loginForm").center(); });
效果如下：
这里特别在IE8 和 FireFox3.6下都测试了下，代码已经是兼容后的了，效果一致~ O(∩_∩)O