Awesome ExtJS 项目启动与配置教程

2025-05-02 13:28:03作者：鲍丁臣Ursa

1. 项目目录结构及介绍

awesome-extjs 项目是一个基于 ExtJS 的开源项目。以下是项目的目录结构及其简要介绍：

awesome-extjs/
├── app/                    # 应用程序的主要目录
│   ├── components/         # 自定义组件
│   ├── controllers/        # 控制器，用于处理用户请求
│   ├── models/             # 模型，用于定义数据结构
│   ├── stores/             # 存储器，用于管理数据
│   ├── views/              # 视图，用于显示用户界面
│   ├── main.js             # 应用的入口文件
│   └── app.js              # 应用的主配置文件
├── resources/              # 静态资源目录
│   ├── css/                # CSS 文件
│   ├── images/             # 图片资源
│   └── js/                 # JavaScript 库和插件
├── index.html              # 项目的主页面
├── package.json            # 项目依赖和配置
└── README.md              # 项目说明文件

2. 项目的启动文件介绍

项目的启动文件是 index.html，它是用户访问项目时看到的第一个页面。以下是 index.html 文件的主要内容：

<!DOCTYPE html>
<html>
<head>
    <title>Awesome ExtJS</title>
    <!-- 引入 ExtJS 样式文件 -->
    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
</head>
<body>
    <!-- 应用的主容器 -->
    <div id="app"></div>
    <!-- 引入 ExtJS 库和应用程序的 JavaScript 文件 -->
    <script src="resources/js/ext-all.js"></script>
    <script src="app/app.js"></script>
    <script src="app/main.js"></script>
</body>
</html>

该文件负责加载 ExtJS 框架和应用本身的 JavaScript 文件，并初始化应用程序。

3. 项目的配置文件介绍

项目的配置文件是 app.js，它位于 app/ 目录下。以下是 app.js 文件的主要配置：

Ext.application({
    name: 'AwesomeApp', // 应用的名称

    // 指定应用的路径
    appPath: 'app',

    // 自动启动的视图控制器
    controllers: [
        'Main' // 主控制器
    ],

    // 应用启动时自动加载的视图
    launch: function() {
        // 创建主视图
        Ext.create('AwesomeApp.view.Main');
    }
});