`
快乐的牛
  • 浏览: 74699 次
社区版块
存档分类
最新评论

ExtJs 4入门 准备Extjs环境准备+ hello world程序

 
阅读更多

准备开发环境

Eclipse for javascript web developer 3.7 indigo

apache 2.2

extjs 4.0.7 gpl

Extjs解压到本地，目录结构如下图所示：


    安装apache httpd服务器，将ext-home/docs文件夹下所有文件，拷贝到x:\Program Files\Apache Software Foundation\Apache2.2\htdocs\extjs，启动apache，在浏览器中打开http://localhost/extjs，可以看到extjs帮助文档首页：


    大概浏览一下，该帮助文档包含类库api、典型实例、入门介绍等，还有强大的即使搜索。你很难找到有比这更完美的帮助系统了。

   下面，在Eclipse中，新建一个static web project工程，目录结构如下：



   ext-debug.js是开发时用的，它只包含extjs的核心部分，其他大部分类文件，存放在src目录下，用到的时候，extjs会动态加载过来，不用操心。不要用ext-debug-all.js文件，出错了不好定位（当firebug说，程序在2345行代码出错时，你是什么感觉）

    下面开始运行工程，选择run on server，弹出如下对话框：

  选择新建一个http服务器，下一步：


选择端口，下一步到finish即可。下面配置一下server，打开window-show views- servers ，双击http server at localhost，打开属性页：


  配置 publishing 的间隔时间为1秒，这样你一修改代码，eclipse马上就将你的代码更新到apache服务器上，方便调试。默认是15秒钟，很难等的。

  下面将index.html的代码拷贝一下，准备运行helloworld程序了：

 

<!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">
<title>Books</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-debug.js"></script>
<script type="text/javascript">
	Ext.application({
		name : 'Books',
		appFolder:"books",
		launch : function() { 
			Ext.create('Ext.container.Viewport', {
				layout : 'fit',
				items : [ {
					title : 'Hello Ext',
					html : 'Hello! Welcome to Ext JS.'
				} ]
			});
		}
	});
</script>
</head>
<body>

</body>
</html>

在浏览器中，输入http://localhost/extjslearn/，看到如下界面：



 我的firefox是9.0最新版，安装了firebug插件：



 注意firebug的控制台面板，有一条http get消息，这就是Extjs4的动态加载特性了，我们代码中用到了viewport，extjs自动加载相应的类文件。有时候需要动态加载的js文件太多了，可能会导致extjs程序的界面不连贯，只要在Ext.application(..)方法前，加上：

 

Ext.require(["Ext.container.Viewport",...]);

 即可。require方法的参数是一个数组，里面填入所有用到的类名即可，extjs将首先加载这些js文件，然后启动程序。

 上面的extjs代码，用了Ext.application方法，创建了一个Extjs应用程序，该程序在页面加载完成时执行（封装了Ext.ready(..)逻辑），并且，定义了程序名称name:"Books"，这也是程序的根命名空间，对应的js代码的目录是books。为了后续方便，books目录应该新建一下子目录：



 Extjs有自己的mvc框架，下面将介绍到，Model View Controller各部分放在单独的文件夹中。

  • 大小: 11 KB
  • 大小: 20.2 KB
  • 大小: 20 KB
  • 大小: 138.8 KB
  • 大小: 8.5 KB
  • 大小: 33 KB
  • 大小: 24.8 KB
  • 大小: 25.7 KB
  • 大小: 51.6 KB
  • 大小: 98.7 KB
  • 大小: 9.7 KB
分享到：
| Eclipse键盘控之路
评论
1 楼 zhaoyashan 2012-08-10  
配置Http Server时，Publishing Directory（发布路径）选择哪里？ 我启动起来不能找到INDEX.HTML，如果你有解决方案，麻烦你加我QQ404238127，帮忙解答一下，谢谢
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics