ExtJs 4入门 准备Extjs环境准备+ hello world程序 - 快乐的牛?

准备开发环境Eclipse for javascript web developer 3.7 indigoapache 2.2extjs 4.0.7 gplExtjs解压到本地，目录结构如下图所示： 安装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程序了： Js代码 在浏览器中，输入http://localhost/extjslearn/，看到如下界面： 我的firefox是9.0最新版，安装了firebug插件： 注意firebug的控制台面板，有一条http get消息，这就是Extjs4的动态加载特性了，我们代码中用到了viewport，extjs自动加载相应的类文件。有时候需要动态加载的js文件太多了，可能会导致extjs程序的界面不连贯，只要在Ext.application(..)方法前，加上： Js代码 Ext.require(["Ext.container.Viewport",...]); 即可。require方法的参数是一个数组，里面填入所有用到的类名即可，extjs将首先加载这些js文件，然后启动程序。 上面的extjs代码，用了Ext.application方法，创建了一个Extjs应用程序，该程序在页面加载完成时执行（封装了Ext.ready(..)逻辑），并且，定义了程序名称name:"Books"，这也是程序的根命名空间，对应的js代码的目录是books。为了后续方便，books目录应该新建一下子目录： Extjs有自己的mvc框架，下面将介绍到，Model View Controller各部分放在单独的文件夹中。