2011年5月27日 Extjs后台登陆

这几天没写日记，是忙于做别的事情了，不过最近QQ空间出了个魔方日记挺有意思的，倒是吸引了很多人开始写日记了，想着哪天CSDN也出一个类似魔方日记的东西就更好了。

和队长讨论了关于大赛的作品，我负责服务器的工作，主要技术包括Struts2 hibernate/jdbc Spring Extjs json等。现在我的课程中有三大框架了，我做了些测试都是之前学过的东西，只有extjs和json没学过，所以最近一段时间打算学习一下extjs和json，为暑假的项目开发做准备，extjs基于js，最近也看了些电子文档，感觉还可以，只是做起来发现纠错比较麻烦，没有像java一样错什么地方了也容易改。还要用Exjts做一个后台管理数据的页面，最近从网上看到一个例子觉得不错，有待参考，先放在这里吧。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
<head>
    <title>后台登陆</title>
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script>
Ext.onReady(function(){
   var loginName = new Ext.form.TextField({
    fieldLabel:'username',
    name:'loginName',
    anchor:'90%'
   });

  //登陆密码
  var loginPwd = new Ext.form.TextField({
    fieldLabel:'password',
    inputType:'password',
    name:'loginPwd',
    anchor:'90%'
   });

  //登陆随机码
  var rand = new Ext.form.TextField({
    fieldLabel:'Random',
    name:'rand',
    anchor:'90%'
   });

  //登陆按钮
  var btnLogin = new Ext.Button({
    name:'login',
    text:'Login'
    //handler:loginOnClick
   });

  //清空按钮
  var btnClean = new Ext.Button({
    name:'clean',
    text:'clear'
    //handler:cleanOnClick
   });

  //登陆表单
  var loginForm = new Ext.form.FormPanel({
    frame:true,
    labelAlign:'right',
    labelWidth:70,
    url:'admin_login.action',
    align:'center',
    defaultType:'textfield',
    items:[loginName, loginPwd, rand, validationCodeImageFieldSet]
   });

  //登陆窗体
  var login = new Ext.Window({
   title:'AdminWindow',
   layout:'fit',
   modal:true,
   width:'300',
   height:200,
   closable:false,
   resizable:false,
   buttons:[btnLogin, btnClean],
   items:[loginForm]
  })
login.show();
});


</script>
</head>
<body>
</body>
</html>

common.js中调用的是一个servlet，但作者没有给出，看来要我自己动手写了。效果图还不错，慢慢入手。

秒客网

2011年5月27日 Extjs后台登陆

相关文章