ext js怎么用

Ext JS 是如何使用的

Ext JS，前端框架，组件丰富，强大的数据绑定功能。Ext JS 是一种功能强大的 JavaScript 框架，用于构建数据密集型的跨平台 web 应用。它提供了丰富的组件库、强大的数据绑定功能以及良好的性能优化，使得开发者可以高效地创建复杂的用户界面。接下来，我们将详细介绍如何使用 Ext JS 进行开发。

一、准备工作

1. 下载和安装 Ext JS

要开始使用 Ext JS，首先需要从官方 Sencha 网站下载框架。安装过程相对简单，只需按照官方网站提供的指南操作即可。通常，开发者需要使用 Sencha Cmd 工具来管理项目。

2. 项目结构

典型的 Ext JS 项目结构包含以下几个主要部分：

app：存放应用程序的主要代码，包括模型、视图、控制器等。
ext：Ext JS 框架的核心文件。
resources：存放样式表和图片等资源文件。
index.html：应用的入口文件。

二、创建第一个 Ext JS 应用

1. 初始化项目

使用 Sencha Cmd 工具可以快速初始化一个新的 Ext JS 项目。在命令行中执行以下命令：

sencha generate app MyApp ./MyApp

这将创建一个名为 MyApp 的新项目，并在当前目录下生成项目结构。

2. 配置应用入口

在 index.html 文件中，添加以下代码以加载 Ext JS 框架和应用的主文件：

<!DOCTYPE html>
<html>
<head>
    <title>My Ext JS App</title>
    <link rel="stylesheet" type="text/css" href="ext/build/classic/theme-crisp/resources/theme-crisp-all.css">
    <script type="text/javascript" src="ext/build/ext-all.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>

3. 创建主视图

在 app/view 目录下，创建一个新的 JavaScript 文件，例如 Main.js，并定义一个简单的主视图：

Ext.define('MyApp.view.Main', {
    extend: 'Ext.panel.Panel',
    xtype: 'mainview',
    title: 'Hello Ext JS',
    html: '<h1>Welcome to Ext JS Application</h1>',
    initComponent: function() {
        this.callParent(arguments);
    }
});

三、配置应用

1. 定义应用类

在 app.js 文件中，定义应用类并指定启动视图：

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

四、深入了解 Ext JS 组件

1. 面板组件

Ext JS 提供了丰富的面板组件，可以用于构建各种布局和界面。例如，Ext.panel.Panel 组件可以用于创建带有标题和工具栏的面板：

Ext.create('Ext.panel.Panel', {
    title: 'Panel Title',
    width: 300,
    height: 200,
    renderTo: Ext.getBody(),
    items: [
        {
            xtype: 'button',
            text: 'Click Me'
        }
    ]
});

2. 表格组件

表格组件在 Ext JS 中非常强大，用于显示和操作数据表格。可以使用 Ext.grid.Panel 组件创建一个简单的表格：

Ext.create('Ext.grid.Panel', {
    title: 'Sample Grid',
    store: {
        fields: ['name', 'email'],
        data: [
            { name: 'John', email: 'john@example.com' },
            { name: 'Jane', email: 'jane@example.com' }
        ]
    },
    columns: [
        { text: 'Name', dataIndex: 'name', flex: 1 },
        { text: 'Email', dataIndex: 'email', flex: 1 }
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

五、数据绑定和模型

1. 定义模型

Ext JS 提供了强大的数据绑定功能，可以通过模型和存储来管理数据。在 app/model 目录下，创建一个新的模型文件，例如 User.js：

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',
    fields: ['name', 'email']
});

2. 定义存储

在 app/store 目录下，创建一个新的存储文件，例如 UserStore.js，用于管理用户数据：

Ext.define('MyApp.store.UserStore', {
    extend: 'Ext.data.Store',
    model: 'MyApp.model.User',
    data: [
        { name: 'John', email: 'john@example.com' },
        { name: 'Jane', email: 'jane@example.com' }
    ]
});

3. 绑定数据到组件

将存储绑定到表格组件，以便显示用户数据：

Ext.create('Ext.grid.Panel', {
    title: 'User Grid',
    store: Ext.create('MyApp.store.UserStore'),
    columns: [
        { text: 'Name', dataIndex: 'name', flex: 1 },
        { text: 'Email', dataIndex: 'email', flex: 1 }
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

六、事件处理

1. 添加事件监听器

Ext JS 提供了丰富的事件处理机制，可以通过添加事件监听器来响应用户操作。例如，为按钮添加点击事件监听器：

Ext.create('Ext.button.Button', {
    text: 'Click Me',
    renderTo: Ext.getBody(),
    handler: function() {
        Ext.Msg.alert('Button Clicked', 'You clicked the button!');
    }
});

2. 事件委托

可以使用事件委托机制来处理复杂的事件场景。例如，为表格的行单击事件添加监听器：

Ext.create('Ext.grid.Panel', {
    title: 'User Grid',
    store: Ext.create('MyApp.store.UserStore'),
    columns: [
        { text: 'Name', dataIndex: 'name', flex: 1 },
        { text: 'Email', dataIndex: 'email', flex: 1 }
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody(),
    listeners: {
        itemclick: function(view, record) {
            Ext.Msg.alert('Row Clicked', 'You clicked on ' + record.get('name'));
        }
    }
});

七、布局和容器

1. 布局管理

Ext JS 提供了多种布局管理器，可以用于构建复杂的界面布局。例如，使用 hbox 布局创建一个水平排列的容器：

Ext.create('Ext.container.Container', {
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    items: [
        {
            xtype: 'panel',
            title: 'Panel 1',
            flex: 1
        },
        {
            xtype: 'panel',
            title: 'Panel 2',
            flex: 1
        }
    ],
    renderTo: Ext.getBody(),
    height: 200
});

2. 嵌套布局

可以将容器进行嵌套，以实现更复杂的布局。例如，创建一个带有嵌套布局的面板：

Ext.create('Ext.panel.Panel', {
    title: 'Nested Layout',
    width: 400,
    height: 300,
    layout: 'vbox',
    items: [
        {
            xtype: 'panel',
            title: 'Inner Panel 1',
            flex: 1,
            layout: 'hbox',
            items: [
                {
                    xtype: 'panel',
                    title: 'Inner Panel 1.1',
                    flex: 1
                },
                {
                    xtype: 'panel',
                    title: 'Inner Panel 1.2',
                    flex: 1
                }
            ]
        },
        {
            xtype: 'panel',
            title: 'Inner Panel 2',
            flex: 1
        }
    ],
    renderTo: Ext.getBody()
});

八、表单和验证

1. 创建表单

Ext JS 提供了丰富的表单组件，可以用于创建各种输入表单。例如，创建一个简单的用户注册表单：

Ext.create('Ext.form.Panel', {
    title: 'User Registration',
    width: 300,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [
        {
            xtype: 'textfield',
            name: 'name',
            fieldLabel: 'Name',
            allowBlank: false
        },
        {
            xtype: 'textfield',
            name: 'email',
            fieldLabel: 'Email',
            vtype: 'email',
            allowBlank: false
        },
        {
            xtype: 'textfield',
            name: 'password',
            fieldLabel: 'Password',
            inputType: 'password',
            allowBlank: false
        }
    ],
    buttons: [
        {
            text: 'Register',
            formBind: true,
            handler: function() {
                var form = this.up('form').getForm();
                if (form.isValid()) {
                    Ext.Msg.alert('Success', 'User registered successfully.');
                }
            }
        }
    ]
});

2. 表单验证

Ext JS 支持多种表单验证方式，可以通过配置验证规则来确保输入数据的有效性。例如，为电子邮件字段添加验证规则：

{
    xtype: 'textfield',
    name: 'email',
    fieldLabel: 'Email',
    vtype: 'email',
    allowBlank: false,
    validator: function(value) {
        var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,6}$/;
        return emailPattern.test(value) ? true : 'Invalid email address';
    }
}

九、Ajax 和数据交互

1. 发送 Ajax 请求

Ext JS 提供了强大的 Ajax 支持，可以方便地与服务器进行数据交互。例如，发送一个简单的 GET 请求：

Ext.Ajax.request({
    url: 'https://api.example.com/data',
    method: 'GET',
    success: function(response) {
        var data = Ext.decode(response.responseText);
        Ext.Msg.alert('Success', 'Data received: ' + data);
    },
    failure: function(response) {
        Ext.Msg.alert('Error', 'Failed to fetch data');
    }
});

2. 数据存储与同步

可以通过配置数据存储和代理来实现数据的自动同步。例如，定义一个用户数据存储，并配置 REST 代理：

Ext.define('MyApp.store.UserStore', {
    extend: 'Ext.data.Store',
    model: 'MyApp.model.User',
    proxy: {
        type: 'rest',
        url: 'https://api.example.com/users',
        reader: {
            type: 'json',
            rootProperty: 'users'
        },
        writer: {
            type: 'json'
        }
    },
    autoLoad: true,
    autoSync: true
});

十、项目管理工具推荐

在进行 Ext JS 项目开发时，使用高效的项目管理工具可以大大提高开发效率。以下是两个推荐的项目管理系统：

1. 研发项目管理系统 PingCode

PingCode 是一款专为研发团队设计的项目管理系统，提供了全面的项目规划、任务管理和进度跟踪功能。它支持敏捷开发、需求管理、缺陷跟踪等多种功能，是研发团队的不二选择。

2. 通用项目协作软件 Worktile

Worktile 是一款通用的项目协作软件，适用于各种类型的团队。它提供了任务管理、团队协作、文件共享等功能，帮助团队高效地完成项目。

总结

Ext JS 是一个功能强大的前端框架，适用于构建复杂的 web 应用。通过详细的介绍，我们了解了如何进行项目准备、创建应用、使用组件、数据绑定、事件处理、布局管理、表单验证、数据交互等操作。此外，推荐了两款高效的项目管理工具 PingCode 和 Worktile，以提高项目开发效率。希望本篇文章能对您使用 Ext JS 开发有所帮助。