ExtJs从入门到精通(1)

william750214

浏览: 305330 次
性别:
来自: 上海

最近访客更多访客>>

wenmin92

谁说我不是会员

buralin

LSSss

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

WEB相关技术

一、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从入门到精通(2) | Excel从入门到精通

2011-07-27 06:55
浏览 2781
评论(0)
分类:互联网
查看更多

发表评论

文章已被作者锁定，不允许评论。

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论