extjs开发环境搭建

一 、要求

1, extjs4虽然支持所有主流浏览器,但是开发过程还是建议使用Google Chrome10+,Apple Safan5+ Firefox4+。
2,服务器
官方文档强烈建议使用web Server打开extjs4.0 sdk,否则一直处在loading状态,尽管有XHR可以跨过浏览器限制。本人采用的tomcat6.0,将extjs4.0 sdk解压后放在webapp下面,然后在IE里面打开,就可以看到帮助文档了。
3,应用工程结构
虽然不是必须,但是EXTJS4.0建议采用如下开发结构,从而使用工程易于组织和维护。
- appname - app - namespace - Class1.js - Class2.js - ... - extjs - resources - css - images - ... - app.js - index.html
  • appname  工程的根目录,包含所有的源文件。
  • app :包含所有的类文件
  • extjs :包含 Ext JS 4 SDK 文件
  • resources :CSS,图片,JSON等资源文件
  • index.html:HTML文档的入口点
  • app.js :包含应用程序的所有业务逻辑
二,Hello extjs---第一个extjs程序
1,在webapp下面建文件荚 helloext,helloext下面再建一个extjs文件,将extjs4.0 sdk解压到extjs下面。目录如下:
- helloext    
 - extjs 
    - app.js
- index.html
用editplus打开index.html,输入以下内容:
<html> <head> <title>Hello Ext</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" src="app.js"></script> </head> <body></body> </html>
说明:

       
  • extjs/resources/css/ext-all.css 样式信息
  • extjs/ext-debug.js :extjs核心类库最小集
  • app.js :应用程序代码
在浏览器输入http://localhost:8080/helloext/index.html,看看效果吧。
 
三,动态加载特性
上例子中, Ext.create 实例化了 一个 Ext.container.Viewport. 当Ext.create调用的时候,extjs加载器将会先检查是否定义了 Ext.container.Viewport对象,如果没有定义,它将会首先加载包含 Ext.container.Viewport.的js文件。程序将一直等着 Ext.container.Viewport成功加载。这将导致一点延时,在Ext.application前加入下面这行代码可以解决这个问题:
Ext.require('Ext.container.Viewport');
它可以保证包含Ext.container.Viewport的文件在应用运行前加载。

四,如何引用extjs库
在extjs sdk中包括以下文件:
  1. ext-debug.js - 调试用,包含extjs运行的最小核心类库

  2. ext.js - :与ext-debug.js 一样,只不过是运行时用。

  3. ext-all-debug.js -包含整个extjs类库,开发时用。

  4. ext-all.js - 运行时用,但不建议直接包括这个文件,因为很多类一般用不到。

     
























你可能感兴趣的:(JavaScript,Web,css,浏览器,ext,ExtJs)