开眼看世界,初识ExtJS之HelloWorld

最新推荐文章于 2017-03-01 12:26:23 发布

yadsun

最新推荐文章于 2017-03-01 12:26:23 发布

阅读量54

点赞数

文章标签： EXT Eclipse HTML IDE Tomcat

开始学习ext,先从helloworld开始
准备工作-搭建Ext的工作环境：
下载Ext:http://www.extjs.com/products/extjs/download.php
IDE：eclipse with Spket plugin Spket是目前最好的Ext IDE，提供Eclipse插件,可以手动[url="http://www.spket.com/download.html"]下载[/url]也可以通过eclipse的自动安装和更新自动安装，update site: http://www.spket.com/update,需要重起eclipse生效
配置js文件的编缉器:Window-->Preferences-->Spket-->JavaScript Profiles-->点右侧的New在弹出框中输入"ExtJS"-->选中ExtJS点右侧Add Library选择ExtJS-->选中ExtJS点右侧的Add File选择下载的Ext包下的ext.jsb2-->选中ExtJS点右侧的default
新建工程：
-- 新建一个Web工程extjsDemo
-- 将Ext解压后的包拷到webcontent下
-- 新建文件夹html
-- 在html文件夹下新建第一个html helloworld.html,代码如下


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--引入ext样式表-->
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<!--引入ext适配器脚本-->
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<!--引入ext框架脚本-->
<script type="text/javascript" src="../extjs/ext-all-debug.js"></script>
<script type="text/javascript">
	Ext.onReady(function() {
		var win;
		win = new Ext.Window({
				applyTo : 'hw',
				title : 'HelloWorld',
				width : '400',
				height : '200',
				items: new Ext.Component({
					xtype : 'textarea',
					html : '开眼看世界，ExtJS的世界多么美好！'
				}),
				buttons: [{
	                    text: 'Close',
	                    handler: function(){
	                        win.close();
	                    }
	                }],
				frame : true
			});
		win.show(this);
	});
</script>
</head>
<body>
<div id="hw"></div>
</body>
</html>

--编译布署到tomcat服务器下
--访问http://localhost:8080/extjsDemo/html/helloworld.html
[img]http://dl.iteye.com/upload/picture/pic/51607/6ee079f1-99eb-3c68-8288-7dff9d5e68bf.gif[/img]
虽然很简单也算是起步了，先学会爬才能学会走，然后才可能会跑...一步一步来吧，加油！有了ext就可以告别eclipse plugin了,啊...世界多美好！抓紧时间学习...