首页 > 代码库 > 二、第一个ExtJS程序:helloExtJS

二、第一个ExtJS程序:helloExtJS

开发前的准备

下载并解压ExtJS包后,可以得到下图的文件目录结构:

 

image

 

在实际开发过程中并不需要所有的文件和目录,所需的包含如下目录即可:

image

 

若使用eclipse进行开发,只需将上述文件复制到WebRoot目录或其子目录。

 

image

开始

  1. 新建firstextjs.html
  2. 在使用ExtJS之前,需要在页面引入相应的样式和js文件,一般包括的最小集合是这样:ext-all.js,adapter/ext/ext-base.js,locale/ext-lang-zh_CN.js和整个resources目录。
    1. ext-all.js,adapter/ext/ext-base.js   就包含了ext的所有功能,所有的js脚本都在这里了。

    2. locale/ext-lang-zh_CN.js   是中文翻译。

    3. resources目录下是css样式表和图片。

      • 注意js文件的导入顺序
  3. 编写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">
    <title>第一个ExtJS程序</title>
    <link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"script/resources/css/ext-all.css" />>
  4. 最终效果

image

 

至此,第一个ExtJS程序就搞定了。过程中一定要仔细认真,不要出现低级错误。我就是在引入js文件时路径写错了,搞了大半天o(︶︿︶)o 。不过不明白为什么最后的显示效果还是那么丑。囧


修改:

之前在resources目录下没有导入images,导致显示有问题。新的目录结构:


重新导入images后,可以正常显示: