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

二、第一个ExtJS程序:helloExtJS

2024-07-19 17:10:19   225人阅读

开发前的准备

下载并解压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后，能够正常显示：



二、第一个ExtJS程序:helloExtJS


联系
我们