ExtJs从入门到精通(1)

一、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

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();
		});

ExtJs从入门到精通(1)

猜你喜欢