📌  相关文章
📜  Ext.js-第一个程序(1)

📅  最后修改于: 2023-12-03 15:30:41.715000             🧑  作者: Mango

Ext.js - 第一个程序

Ext.js 是一款功能强大的 JavaScript 框架，广泛应用于 Web 开发中，特别是企业级应用的开发中。本文将介绍如何使用 Ext.js 开发第一个程序。

安装 Ext.js

首先需要从官方网站（https://www.sencha.com/products/extjs/）下载 Ext.js 的最新版，解压到本地。

创建新的 Ext.js 项目

接下来需要使用 Ext.js 的命令行工具来创建一个新项目，步骤如下：

  1. 在命令行中进入 Ext.js 的应用程序目录
cd /path/to/extjs
  1. 创建新项目
sencha generate app MyApp /path/to/app

这里 MyApp 是项目的名称，/path/to/app 是项目的保存路径，可以根据实际情况修改。

  1. 进入项目目录
cd /path/to/app
编写第一个程序
创建视图

在 Ext.js 中，视图是用来展示数据的组件，它通常包含在一个 Panel 中。下面我们将创建一个简单的视图来展示一些文本。

  1. 创建一个名为 MyApp.view.Main 的视图类，并继承自 Ext.panel.Panel。
Ext.define('MyApp.view.Main', {
    extend: 'Ext.panel.Panel',
    xtype: 'main',

    title: 'My First Ext.js App',

    html: 'Hello Ext.js!'
});

这里使用 Ext.define 方法来定义一个新的类，它的名称是 MyApp.view.Main，组件的类型是 Ext.panel.Panel，并且将其注册为 xtype 为 main。

  1. 在主程序中创建此视图

在项目的 app.js 文件中，创建一个新的 Ext.js 应用程序，并使用刚刚创建的 Main 视图作为启动视图。

Ext.application({
    name: 'MyApp',

    views: [
        'Main'
    ],

    launch: function () {
        Ext.create('MyApp.view.Main', {
            renderTo: Ext.getBody()
        });
    }
});

在这里，Ext.application 方法用于创建一个新的应用程序，它的名称是 MyApp，并且需要加载的视图是 Main。launch 方法是应用程序启动后要执行的函数，它创建了一个 Main 实例，并将其渲染到页面中。

运行程序

现在，使用浏览器打开项目目录中的 index.html 文件，就可以看到一个简单的 Ext.js 应用程序了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My First Ext.js App</title>
    <link rel="stylesheet" href="ext/build/classic/theme-classic/resources/theme-classic-all.css">
    <script src="ext/build/ext-all.js"></script>
    <script src="app.js"></script>
</head>
<body></body>
</html>

运行效果如下：

My First Ext.js App

小结

本文介绍了如何使用 Ext.js 开发第一个程序，包括安装 Ext.js、创建新项目、编写视图和运行程序等步骤。读者可以参考本文学习 Ext.js 的基本使用方法，并在此基础上继续深入学习 Ext.js 的更多功能。