一、Web程序的革命
CGI
Java Applet
Flash
Web Start
AJAX
RIA 基于Flex、Sliverlight
二、学习ExtJs的前提
JavaScript
JSON (减肥的XML数据传送模式)
HTML DOM
(1) Component 组件
(2) Class 类
数据支持类(data),拖放支持类(dd),布局支持类(layout),本地状态存储支持类(state)cookie
实用工具类(util)对象变JSON
密封类,不能被扩展的类
原型类,扩展了JavaScript标准类库中的类
(3) Method
自己控制private,public
(4) Event
订阅与退订
(5) Config option
相当于构造参数
(6) Property属性
(7) Namespace
三、ExtJs的环境配置
下载: http://www.extjs.com/products/extjs/download.php
http://www.sencha.com/products/extjs/download/
目录结构
ext-all.js 和 ext-all-debug.js
ext-core.js 和 ext-core-debug.js
Adpater目录:使用其他优秀AJAX框架为ExtJs提供有力的技术支持,目前提供4种底层支持框架,ExtJs,JQuery, Prototype,YUI
Air目录:提供对Adobe公司的RIA技术的支持
Build目录:各个组件的部署版本
Docs目录:ExtJs组件API文档
Examples目录:ExtJs自带的示例
Source目录
Resources目录:资源文件
三、ExtJs的语言规范
1、命名空间
Ext.namespace("Ext.dojochina");
Java代码对照:
package Ext.dojochina;
Hello.js
Ext.namespace("Ext.mwang");
Ext.mwang.HelloWorld = Ext.emptyFn;
相当于: Ext.mwang.HelloWorld = new Function(){};
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>HelloWorld.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="./css/ext-all.css"> <script type="text/javascript" src="./scripts/ext-base.js"></script> <script type="text/javascript" src="./scripts/ext-all.js"></script> <script type="text/javascript" src="./scripts/Hello.js"></script> <script type="text/javascript"> new Ext.mwang.HelloWorld(); </script> </head> <body> This is my HTML page. <br> </body> </html>
2、类实例属性
Ext.apply(Ext.mwang.Person.prototype,{name:"大头"});
Java代码对照:
Person{
private String name = "大头";
put get方法;
}
3、类实例方法
Ext.namespace("Ext.mwang"); Ext.mwang.Person = Ext.emptyFn; Ext.apply(Ext.mwang.Person.prototype, { name : 'aaa', sex : 'nv', print : function() { alert(String.format("name:{0},sex:{1}", this.name, this.sex)); } });
var _person = new Ext.mwang.Person(); alert(_person.sex); _person.name = "小头"; alert(_person.name); _person.print();
4、类静态方法
Ext.mwang.Person.print = function(_name, _sex) { alert(String.format("name:{0},sex:{1}", _name, _sex)); }
Ext.mwang.Person.print("a","b");
5、类构造方法
Ext.mwang.Person = function(_cfg) { Ext.apply(this, _cfg); } Ext.mwang.Person.print = function(_name, _sex) { var _person = new Ext.mwang.Person({name:"A",sex:"B"}); _person.print(); }
5、类继承
Ext.namespace("Ext.mwang"); Ext.mwang.Person = function(_cfg) { Ext.apply(this, _cfg); } Ext.mwang.Person.print = function(_name, _sex) { var _person = new Ext.mwang.Person({name:"A",sex:"B"}); _person.print(); } Ext.apply(Ext.mwang.Person.prototype, { print : function() { alert(String.format("name:{0},sex:{1}", this.name, this.sex)); } }); Ext.mwang.Student = function(_cfg) { Ext.apply(this, _cfg); } Ext.extend(Ext.mwang.Student,Ext.mwang.Person,{job:"学生"});
6、类实例方法重写
7、命名空间别名
Dc = Ext.dojochina; 第一个字母大写,后面全小写
8、类别名
PN = Ext.dojochina.Person 全大写
9、事件对列
Ext.util.Observable
Ext.namespace("Ext.mwang"); Dc = Ext.mwang; Ext.mwang.Person = function(_cfg) { Ext.apply(this, _cfg); this.addEvents("namechanged", "sexchanged"); }; Ext.apply(Ext.mwang.Person.prototype, { name : "大头", sex : "男", print : function() { alert(this.name); } }); Ext.extend(Ext.mwang.Person, Ext.util.Observable, { setName : function(_name) { if (this.name != _name) { this.fireEvent("namechanged", this, this.name, _name); this.name = _name; } } });
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <link rel="stylesheet" type="text/css" href="./css/ext-all.css"> <script type="text/javascript" src="./scripts/ext-base.js"></script> <script type="text/javascript" src="./scripts/ext-all-debug.js"></script> <script type="text/javascript" src="./scripts/Hello.js"></script> <script type="text/javascript"> var _person = null; button_click = function() { _person.setName(prompt("Please input name:", "")); } Ext.onReady(function() { var txt_name1 = Ext.get("txt_name"); _person = new Ext.mwang.Person(); _person.on("namechanged", function(_person, _old, _new) { txt_name1.dom.value = _new; }); _person.on("namechanged", function(_person, _old, _new) { document.title = _new; }); }); </script> </head> <body> 姓名: <input type="text" id="txt_name" /> <br /> 性别: <input type="text" id="txt_name" /> <br /> <input type="button" value="input" onclick="button_click();" /> <br /> </body> </html>
GWT-ext: java程序员编写ExtJS提供可能
EXTTLD: 为JSP程序员的标签化部署提供可能
ExtSharp: 为C#的程序员编写ExtJS提供可能
四、ExtJs初级UI
1. Ext.button
Ext.onReady(function() { new Ext.Button( { renderTo : Ext.getBody(), text : "确定" }); });
属性:
renderTo:
text
minWidth
构造参数:
handler:
listeners:
text
方法:
setText
事件:
click
Ext.onReady(function() {
var _button = new Ext.Button( {
renderTo : Ext.getBody(),
text : "确定",
handler: function() {
alert("aaaaa");
}
});
_button.setText("Cacel");
});
Ext.onReady(function() {
new Ext.Button( {
renderTo : Ext.getBody(),
text : "确定",
listeners: {
"click": function(){
alert("aaaaa");
}}
});
});
_btn.on("click",function(){
alert("bbb");
});
2. Ext.form.TextField
fieldLable
getValue()
Ext.onReady(function() { new Ext.form.TextField( { renderTo : Ext.getBody(), fieldLable : "姓名" }); });
Ext.layout.FormLayout: 只有在此布局下才能正确显示lable,布局的宿主对象必须是Ext.Container或者Ext.Container的子类。在应用FormLayout 布局时只要在宿主对象的构造参数中指定layout:"form"即可。
Ext.getCmp(String _id): 得到id为_id的组件对象。
Ext.onReady(function() { var _panel = new Ext.Panel({ renderTo : Ext.getBody(), layout : "form", labelWidth : 50, listeners : { "render" : function(_panel) { _panel.add(new Ext.form.TextField({ id : "txt_name", fieldLabel : "姓名" })); } } }); Ext.getCmp("txt_name").setValue("bbb"); });
3. Ext.Panel
Ext.onReady(function() { var _panel = new Ext.Panel({ // renderTo : Ext.getBody(), title : "人员信息", frame : true, width : 300, heigth : 200 }); _panel.addButton({ text : "确定" }); _panel.addButton(new Ext.Button({ text : "取消", minWidth : 100 })); _panel.render(Ext.getBody()); });
addButton : 设计时
frame: true 四角变圆角,背景颜色
两个addButton的区别,第一个是form管理,第二个是自己管理。
renderTo render() 添加到容器里面
applyTo applyToMarkup() 叠加到容器里面
_panel.add({xtype : "textfield",fieldLable : "姓名" });
xtype 机制
Ext.onReady(function() { var _panel = new Ext.Panel({ title : "登录", frame : true, width : 260, height : 130, layout : "form", labelWidth : 45 }); _panel.add({ xtype : "textfield", id : "txt_account", fieldLabel : "帐号", width : 180 }); _panel.add({ xtype : "textfield", id : "txt_password", fieldLabel : "密码", width : 180 }); _panel.addButton({ text : "确定" }); _panel.addButton({ text : "取消" }); // _panel.applyToMarkup("a2"); _panel.render("a2"); // _panel.applyToMarkup(); });
DIV页面居中
<div align="center"> <div id="a1" style="height: 200; "> aaa </div> <div id="a2" style="top: 300; width: 300; height: 300; background-color: green;"> aaa </div> <div id="a3" style="height: 200; "> aaa </div> </div>
Ext.onReady(function() { var _panel = new Ext.Panel({ title : "登录", frame : true, width : 260, height : 130, layout : "form", labelWidth : 45, defaults:{xtype:"textfield",width:180}, items:[{fieldLabel : "帐号"},{fieldLabel : "密码"}], buttons:[{text:"确定"},{text : "取消"}] }); // _panel.applyToMarkup("a2"); _panel.render("a2"); // _panel.applyToMarkup(); });
4. Ext.Window
title: 窗体名称
minimizable: 是否显示最小化
maximizable: 是否显示最大化
closable: 销毁对象
show 方法
hide
hide事件
show
close
Ext.onReady(function() { var _window = new Ext.Window({ title : "登录", frame : true, width : 260, height : 130, layout : "form", plain : true, resizable : false, bodyStyle : "padding:3px", labelWidth : 45, minimizable : false, maximizable : false, closable : true, closeAction : "hide", buttonAlign : "left", defaults : { xtype : "textfield", width : 180 }, items : [{ fieldLabel : "帐号" }, { fieldLabel : "密码" }], buttons : [{ text : "确定" }, { text : "取消", handler : function() { _window.hide(); } }], listeners : { "show" : function() { alert("aaaaa"); }, "close" : function() { alert("closed!"); } } }); _window.show(); });