ExtJs从入门到精通(1)

最新推荐文章于 2025-05-10 13:27:01 发布
最新推荐文章于 2025-05-10 13:27:01 发布
阅读量375 收藏
点赞数
分类专栏： WEB相关技术 文章标签： java json javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_447/article/details/82098526
版权
本文详细介绍了ExtJS的基本概念、环境配置、语言规范及初级UI组件的使用，包括按钮、文本框、面板、窗口等。通过实例代码展示了如何在网页中集成和定制这些组件，以及如何实现事件监听和数据交互。文章旨在帮助开发者快速掌握ExtJS的入门技巧，提升Web应用程序的交互性和用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、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" οnclick="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();
		});

 

 

Ext从入门到精通
11-19
由于富客户端技术进一步扩展浏览器功能,使之提供更加高效和友好的用户接口， 越来越多的企业和开发人员选择使用富客户端技术构建商业应用，本课程主要是介绍ExtJs4.0 最新版本特性，了解并掌握extjs4语法及应用，了解基于ExtJs4的最流行的富客户端框架及熟悉掌握其高级特性，并结合SSH框架与DWR实现富户端商业应用的全部开发过程
Ext 从入门到精通
05-12
Ext 从入门到精通 很好的学习资料，内容，丰富诙谐幽默。 正在想学习Ext的童靴们赶快下吧~~
ExtJs从入门到精通
王德封-逐浪
05-08 1940
  ExtJs从入门到精通（作成中）1、入门篇    ①窗口Window及对话框MessageBox     　地址：http://www.myext.cn/Article/61.html     ②使用面板(Panel、TabPanel)     　地址：http://www.myext.cn/Article/62.html    ③    ④    ⑤
ExtJS 下拉框多选实现指南
最新发布
weixin_26850469的博客
05-10 854
ExtJS是基于JavaScript的一个框架，它用于开发富交互的Web应用程序。该框架具有高度的模块化，允许开发人员创建高性能和跨浏览器的界面，通过拖放组件和丰富的数据管理功能，使得开发复杂、美观的用户界面变得简单快捷。ExtJS框架中的ComboBox组件是一个非常强大的控件，它结合了文本框和下拉列表的功能。用户可以在文本框中输入内容，而ComboBox则会根据输入提供一个过滤后的下拉列表供用户选择。在ExtJS中，ComboBox可以用于数据的检索、显示以及用户输入的管理。
extjs入门到精通
07-07
extjs入门到精通，实例有简单到复杂，还有综合实力，下载即可运行，环境也是配好的，希望对你有帮助！
ExtJs从入门到精通(2)
Keyboard Knight
08-04 135
1. Ext.Ajax  (extends Connection)   Ext.Ajax.on("requestcomplete", function(_conn, _response, _options) { alert(_response.responseXML.xml); }); Ext.Ajax.request({ ...
ExtJS从入门到精通：学习指南
"这是一份全面的ExtJS学习文档，包含从基础到进阶的各种知识点，旨在帮助读者轻松掌握ExtJS框架。文档作者为李赞红，内容涵盖ExtJS的类定义、消息框使用、页面脚本分离、元素操作、格式化、组件结构、按钮与日期选择...
ExtJS 2.0入门到精通教程
不论是刚开始接触ExtJS还是已经在使用它的开发者，都能从这两本书中获益，通过实例学习和实践，逐步精通ExtJS的开发技能。作者鼓励读者发现并反馈教程中的错误和改进建议，共同推动学习社区的进步。现在，读者可以...
extjs
小头猪
01-05 259
API：[url]http://jstang.cn/docs/[/url] API: [url]http://www.dojochina.com/extdoc/docs/[/url] [url]http://extjs.org.cn/[/url] [编辑本段]序言 　　2.1. 功能丰富，无人能出其右 　　无论是界面之美，还是功能之强，ext的表格控件都高居榜首。 　　单选行，多选行，...
ExtJs入门教程(适合新手).ppt
03-17
适合新手看的extjs资料，ppt文档格式，大致罗列了extjs的所有功能。
ExtJS入门教程(超级详细)
03-13
1、Ext类 ………………………………… 2 2、Array类 …………………………… 4 3、Number类 …………………………… 4 4、String类 …………………………… 4 5、Date类 ……………………………… 5 6、Function类 ………………………… 6 7、Ext.Element类 ………………………… 7 8、Ext.DomQuery类 ………………… 13 9、Ext.DomHelper类 …………………… 14 10、Ext.Template类 …………………… 14 11、Ext.EventManager类 ……………… 15 12、Ext.EventObject类 ………………… 15 13、Ext.CompositeElement类 ………… 16 14、Ext.CompositeElementLite类 ……… 16 15、Ext.Fx类 …………………………… 16 16、Ext.KeyNav类 ……………………… 19 17、Ext.KeyMap类 …………………… 19 18、Ext.util.JSON类 ……………………… 20 19、Ext.util.Format类 ………………… 20 20、Ext.util.DelayedTask类 ……………… 20 21、Ext.util.TaskRunner类 …………… 21 22、Ext.util.TextMetrics类 …………… 21 23、Ext.XTemplate类 ………………… 21 24、Ext.data.Connection类 ……………… 22 25、Ext.Ajax类 ………………………… 22 26、Ext.data.Record类 ………………… 23 27、Ext.data.DataProxy类 …………… 24 28、Ext.data.HttpProxy类 …………… 24 29、Ext.data.MemoryProxy类 ……… 25 30、Ext.data.ScriptTagProxy类 ………… 25 31、Ext.data.DataReader类 ……………26 32、Ext.data.ArrayReader类 …………… 26 33、Ext.data.JsonReader类 …………… 26 34、Ext.data.XmlReader类 …………… 27 35、Ext.data.Store类 …………………… 28 36、Ext.data.GroupingStore类 ………… 32 37、Ext.data.SimpleStore类 ………… 34 38、Ext.data.Tree类 …………………… 34 39、Ext.data.Node类 ………………… 34 40、Ext.Action类 ……………………… 35 41、Ext.Button类 …………………… 36 42、Ext.SplitButton类 ……………… 38 43、Ext.CycleButton类 ……………… 39 44、Ext.form.BasicForm类 …………… 40 45、Ext.form.Field类 …………………… 41 46、Ext.form.Checkbox类 …………… 42 47、Ext.form.Radio类 ………………… 43 48、Ext.form.HtmlEditor类 …………… 43 49、Ext.form.TextField类 …………… 44 50、Ext.form.NumberField类 ………… 44 51、Ext.form.TextArea类 …………… 45 52、Ext.form.TriggerField类 ……… 45 53、Ext.form.DateField类 ………… 45 54、Ext.form.ComboBox类 ……………… 46 55、Ext.form.TimeField类 ………… 47 56、Ext.menu.Menu类 ………………… 50 57、Ext.menu.BaseItem类 …………… 50 58、Ext.menu.Adapter类 ……………… 51 59、Ext.menu.Item类 ………………… 51 60、Ext.menu.CheckItem类 …………… 51 61、Ext.menu.Separator类 ………… 52 62、Ext.menu.TextItem类 …………… 52 63、Ext.Toolbar类 …………………… 55 64、Ext.Toolbar.Item类 ……………… 56 65、Ext.Toolbar.Separator类 ……… 56 66、Ext.Toolbar.Spacer类 …………… 56 67、Ext.Toolbar.TextItem类 ……… 56 68、Ext.Toolbar.Fill类 ……………… 56 69、Ext.grid.ColumnModel类 ……… 58 70、Ext.grid.PropertyColumnModel类 … 59 71、Ext.grid.GridView类 …………… 59 72、Ext.grid.GroupingView类 ………… 60 73、Ext.grid.EditorGridPanel类 ……… 62 74、Ext.grid.PropertyGrid类 …………… 65
EXTJS入门教程（非常详细）
11-16
EXTJS入门教程 组件的介绍与应用 ext核心 Element：Ext的核心 获取多个DOM的节点 响应事件
EXT从入门到精通（经典教程）
01-10
ExtJS可以用来开发RIA也即富客户端的AJAX应用，是一个用javascript写 的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。
extJS的入门书籍
04-14
NULL 博文链接：https://charice59.iteye.com/blog/1739808
Extjs4.1.0_从入门到精通
weixin_30895603的博客
04-30 109
一、 开发环境搭建 http://blog.sina.com.cn/s/blog_afaffa710101780k.html Eclipse和MyEclipse在导入Extjs之后，喜欢Building Workspace，有时候一B就是几分钟。肿么办？ a. 对MyEclipse进行优化 打开 Preferences->MyEclipse->Validation...
extjs初学者教程
热门推荐
09-05 1万+
layout 1.面板     (1)类结构         Ext.Base         Ext.AbstractComponent             Ext.Component                 Ext.container.AbstractContainer                     Ext.container.Container   
extJS
weixin_34290000的博客
07-24 125
Data: var store = new Ext.data.Store({ fields:['name', 'email', 'phone'], data:[ { 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" }, ...
Ext3.0从入门到精通 第三章 使用Ext做第一个界面 登陆界面(三)
yswname的专栏
08-01 4262
<br /> <br />1、  adminlogin.js<br />adminlogin.js是Ext界面生成的关键代码。<br />整个代码是包含在Ext.onReady();方法内部的。<br />在网页加载完后，浏览器会自动调用Ext.onReady()中包含的函数代码。<br />也就是说页面加载完后，会触发加载完事件，调用其中的function（）部分代码。<br />adminlogin.js代码如下：<br />Ext.onReady(function(){<br />//指定表单提示信息
ExtJs 入门教程
weixin_30292843的博客
12-31 656
ExtJs 入门教程一[学习方法] ExtJs 入门教程二[Hello World] ExtJs 入门教程三[窗体：Window组件] ExtJs 入门教程四[表单：FormPanel] ExtJs 入门教程五[文本框：TextField] ExtJs 入门教程六[按钮：Button] ExtJs 入门教程七[登陆窗体Demo：Login] ExtJs 入门教程八[脚本调试Fir...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值