ext 引入js

在Ext JS（现在通常称为Ext JS Framework）中引入JavaScript文件通常涉及以下几个步骤：

基础概念

Ext JS：是一个用于构建桌面应用程序的JavaScript框架，它提供了丰富的UI组件和工具集。
JavaScript文件引入：在HTML页面中通过<script>标签引入外部的JavaScript文件。

类型

核心库：包含Ext JS框架的核心功能。
组件库：各种UI组件的集合。
插件：扩展或增强框架功能的附加模块。

应用场景

企业级应用：复杂的桌面应用程序，需要丰富的用户界面和交互。
管理后台：需要高效的数据展示和操作界面。

引入JS的方法

通过HTML `<script>` 标签引入

在你的HTML文件中，你可以直接通过<script>标签引入Ext JS的JavaScript文件。例如：

<!DOCTYPE html>
<html>
<head>
    <title>Ext JS Example</title>
    <!-- 引入Ext JS库 -->
    <script type="text/javascript" src="path/to/extjs/ext-all.js"></script>
    <!-- 引入你的应用程序脚本 -->
    <script type="text/javascript" src="path/to/your/app.js"></script>
</head>
<body></body>
</html>

使用Ext JS的`requires`配置

在Ext JS的应用程序中，你可以在定义类或启动应用程序时使用requires配置来指定需要加载的类或包。例如：

Ext.application({
    name: 'MyApp',
    requires: [
        'Ext.window.Window',
        'Ext.button.Button'
    ],
    launch: function() {
        Ext.create('Ext.window.Window', {
            title: 'Hello World',
            width: 400,
            height: 300,
            items: [{
                xtype: 'button',
                text: 'Click Me'
            }]
        }).show();
    }
});

遇到的问题及解决方法

1. 404 Not Found：找不到JavaScript文件。

原因：文件路径错误或文件未上传到服务器。
解决方法：检查<script>标签中的src属性路径是否正确，确保文件存在于服务器上。

2. JavaScript错误：引入后页面报错。

原因：可能是版本不兼容、依赖未加载或其他JavaScript错误。
解决方法：检查浏览器控制台的错误信息，确认Ext JS版本与你的代码兼容，确保所有依赖都已正确加载。

3. 加载顺序问题：脚本执行顺序错误。

原因：依赖的脚本未先加载。
解决方法：确保在使用任何Ext JS组件之前已经正确引入了Ext JS库。

示例代码

以下是一个简单的Ext JS应用程序示例，展示了如何引入和使用Ext JS框架：

<!DOCTYPE html>
<html>
<head>
    <title>Ext JS Example</title>
    <link rel="stylesheet" type="text/css" href="path/to/extjs/theme-neptune/resources/theme-neptune-all.css">
    <script type="text/javascript" src="path/to/extjs/ext-all.js"></script>
    <script type="text/javascript">
        Ext.onReady(function() {
            Ext.create('Ext.window.Window', {
                title: 'Hello World',
                width: 400,
                height: 300,
                items: [{
                    xtype: 'button',
                    text: 'Click Me',
                    handler: function() {
                        alert('Button Clicked!');
                    }
                }]
            }).show();
        });
    </script>
</head>
<body></body>
</html>

在这个示例中，我们通过<link>标签引入了Ext JS的主题样式，通过<script>标签引入了Ext JS库，并在Ext.onReady函数中创建了一个窗口和一个按钮。

希望这些信息能帮助你更好地理解和使用Ext JS框架。