Extjs学习笔记 - 实战

Extjs学习笔记 - 实战2010-12-05久城在学Extjs的时候，见过别人对Extjs和Flex的比较。记得当时有人说Extjs和根本不是一个层次上的框架，但那时我依然连Flex是什么都没有去查，而毅然的选择了Extjs。但可笑的是，下一个项目的应用就是Flex。

由于项目的紧张，也许对Extjs的学习将要告一段落了。所以，我该写点什么。

用 Extjs做登录

index.html
<div id="north- div"><a id="login" href="http://www.bianceng.cn/index.php#">Login</a>< ;/div>
login.js
Ext.onReady（function（） {
Ext.BLANK_IMAGE_URL = "../../ext/resources/images/default/s.gif"; //替换默认的空白图 片
Ext.QuickTips.init（）; // 初始化鼠标停留时的显示框，这里用 不上
// 点击登录时触发的事件
onClickLogin = function（） {
var loginUrl = "../../login.do"; // 登录请求的url
// 这里Login的Panel分为两部分，logoPanel和 formPanel
// 创建logoPanel对象
var logoPanel = new Ext.Panel（ {
baseCls : "x-plain",
html : "Here is your logo"
}）;
// 创建formPanel对象
var formPanel = new Ext.form.FormPanel（ {
bodyStyle : "padding:35px 25px 0",
baseCls : "x-plain",
defaults : {
width : 200
},
defaultType : "textfield",
frame : false,
id : "login-form",
// form面板上的组件
items : [ {
fieldLabel : "User Name",
name : "name"
}, {
fieldLabel : "Password",
inputType : "password",
name : "password"
}],
labelWidth : 120,
region : "center",
url : loginUrl
}）;
// 创建window对象，用来装置以上两个面板，使login显 示在一个window上
var win = new Ext.Window（ {
// window上的按钮，按钮时独立的，也可以设置在formPanel里
buttons : [ {
handler : function（） { // 按钮login触发的事件
form.submit（ {
waitMsg : "Please Wait",
reset : true,
success : this.Success, // 登录成功的时候执行
fail : this.Fail, // 登录失败的时候执行
scope : onClickLogin // 这里是为了指定this的范围
}）;
},
scope : onClickLogin,
text : "LOGIN"
}, {
handler : function（） { // 按钮cancel触 发的事件
win.hide（）;
},
scope : onClickLogin,
text : "CANCEL"
}],
buttonAlign : "right",
closable : false,
draggable : true,
height : 200,
id : "login-win",
layout : "border",
plain : true,
// window上的组件
items : [logoPanel, formPanel],
title : "Login",
width : 400
}）;
// 取得表单，参考login按钮触发的事件
form = formPanel.getForm（）;

// 显示 window
win.show（）;

// return里的为 onClickLogin的共有函数
return {
Success : function（f, a） {
if （a && a.result） { //a表示action，a.result表示action返回的结果数据
win.destroy（true）;
// setCookie
// set window.location
}
},
Fail : function（f, a） {
Ext.Msg.alert（"Login failed"）;
}
};
};
// 设置login事件
Ext.get （"login"）.on（"click", onClickLogin）;
}）;