Sencha Ext JS 框架包项目教程

Sencha Ext JS 框架包项目教程

extjs 项目地址: https://gitcode.com/gh_mirrors/ex/extjs

1. 项目目录结构及介绍

Sencha Ext JS 框架包（以下简称 Ext JS）项目的目录结构如下：

.
├── .sencha                # Sencha配置文件目录
├── build                  # 构建脚本和配置文件
├── classic                # 经典主题相关的文件
├── cmd                    # Sencha命令行工具相关的文件
├── examples               # Ext JS使用示例
├── licenses               # 许可证文件
├── modern                 # 现代主题相关的文件
├── packages               # Ext JS包
├── resources/             # 资源目录，如图片、样式表等
│   └── ext-watermark      # 水印相关资源
├── sass                   # SASS样式文件
├── templates              # 模板文件
├── welcome                # 欢迎页面相关文件
├── LICENSE                # 项目许可证文件
├── Readme.md              # 项目自述文件
├── build.xml              # 构建配置文件
├── ext-bootstrap.js       # Ext JS启动引导脚本
├── index.html             # 项目入口HTML文件
├── package.json           # 项目包配置文件
├── release-notes.html     # 版本更新说明文件
└── version.properties     # 版本属性文件

每个目录和文件的具体作用如下：

• .sencha: 包含Sencha特定的配置文件。
• build: 包含构建项目的脚本和配置。
• classic: 包含经典主题的CSS、JS等资源。
• cmd: 包含Sencha命令行工具的代码和资源。
• examples: 包含使用Ext JS创建的各种示例应用程序。
• licenses: 包含项目的许可证文件。
• modern: 包含现代主题的CSS、JS等资源。
• packages: 包含Ext JS的包，这些包可以扩展框架的功能。
• resources: 包含项目所需的各种资源，例如图片和样式表。
• sass: 包含SASS样式文件。
• templates: 包含项目模板文件。
• welcome: 包含欢迎页面的相关资源。
• LICENSE: 包含项目的许可证信息。
• Readme.md: 包含项目的说明信息。
• build.xml: 包含构建配置信息，用于构建项目。
• ext-bootstrap.js: 包含启动Ext JS应用程序所需的JavaScript代码。
• index.html: 项目的入口HTML文件，用于展示应用程序。
• package.json: 包含项目的元数据和脚本。
• release-notes.html: 包含项目的版本更新说明。
• version.properties: 包含项目的版本属性信息。

2. 项目的启动文件介绍

项目的启动文件是 ext-bootstrap.js。该文件是加载Ext JS框架和应用的关键点。它通常包含以下内容：

• 定义应用程序的名称和版本。
• 设置应用程序的启动参数。
• 加载应用程序所需的Ext JS库和资源。
• 初始化应用程序的主视图或组件。

启动文件示例代码：

Ext.application({
    name: 'MyApp',

    // 应用程序的启动参数
    appProperty: 'value',

    // 加载所需的资源和组件
    requires: [
        'Ext.container.Viewport',
        'Ext.panel.Panel'
    ],

    // 启动应用程序时执行的函数
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            items: [
                {
                    xtype: 'panel',
                    title: 'Hello Ext JS!',
                    html: 'Welcome to the Ext JS application.'
                }
            ]
        });
    }
});

3. 项目的配置文件介绍

项目的配置文件主要包括 build.xml 和 package.json。

• build.xml 是Apache Ant的构建配置文件，用于自动化构建过程，如编译、打包、部署等。该文件定义了构建目标和任务，例如：

<project name="MyApp" default="build">

    <property name="app.dir" value="app" />
    <property name="build.dir" value="build" />

    <target name="build">
        <!-- 构建任务的详细指令 -->
    </target>

</project>

• package.json 是Node.js项目的配置文件，它定义了项目的依赖、脚本和元数据。例如：

{
    "name": "MyApp",
    "version": "1.0.0",
    "scripts": {
        "start": "sencha app watch"
    },
    "dependencies": {
        "sencha cmd": "^6.0.0"
    }
}

通过这些配置文件，开发者可以方便地管理和构建项目。

extjs 项目地址: https://gitcode.com/gh_mirrors/ex/extjs