正文

轻松掌握ExtJS：如何在组件间高效传递参数及实战案例解析

/0 浏览量
0330

引言

ExtJS 是一个功能强大的 JavaScript 框架，用于构建富客户端应用程序。在 ExtJS 开发中，组件间参数的传递是一个常见且重要的任务。本文将详细介绍如何在 ExtJS 中高效地在组件间传递参数，并提供实战案例解析。

ExtJS 组件间参数传递的方法

在 ExtJS 中，组件间参数传递主要有以下几种方法：

1. 使用全局变量

全局变量是一种简单直接的方法，可以在组件间共享数据。以下是一个使用全局变量传递参数的例子：

// 定义全局变量
var globalData = {
    param: 'Hello, ExtJS!'
};

// 在组件中使用全局变量
Ext.onReady(function() {
    var myComponent = Ext.create('Ext.Component', {
        renderTo: Ext.getBody(),
        html: globalData.param
    });
});

2. 使用事件监听

事件监听是 ExtJS 中常用的数据传递方式。以下是一个使用事件监听传递参数的例子：

// 监听事件
Ext.on('myEvent', function(param) {
    console.log(param);
});

// 触发事件
Ext.fireEvent('myEvent', 'Hello, ExtJS!');

3. 使用 Store 和 Model

Store 和 Model 是 ExtJS 中用于数据管理的重要组件。通过 Store 和 Model，可以实现组件间高效的数据传递。以下是一个使用 Store 和 Model 传递参数的例子：

// 创建 Store
var myStore = Ext.create('Ext.data.Store', {
    fields: ['name', 'age'],
    data: [
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 }
    ]
});

// 在组件中使用 Store
Ext.onReady(function() {
    var myComponent = Ext.create('Ext.Component', {
        renderTo: Ext.getBody(),
        html: myStore.getAt(0).get('name') + ', ' + myStore.getAt(0).get('age')
    });
});

实战案例解析

下面，我们将通过一个实际案例来展示如何在 ExtJS 中高效地在组件间传递参数。

案例描述

假设我们正在开发一个电商网站，其中一个组件用于展示商品列表，另一个组件用于展示商品详情。我们需要在商品列表组件中点击商品时，将商品信息传递到商品详情组件。

实战步骤

  1. 创建商品列表组件：
Ext.create('Ext.Component', {
    xtype: 'gridpanel',
    title: '商品列表',
    store: {
        fields: ['name', 'price'],
        data: [
            { name: '商品1', price: 100 },
            { name: '商品2', price: 200 },
            { name: '商品3', price: 300 }
        ]
    },
    columns: [
        { text: '商品名称', dataIndex: 'name' },
        { text: '价格', dataIndex: 'price' }
    ],
    listeners: {
        itemclick: function(view, record, item, index, e, eOpts) {
            // 传递商品信息到商品详情组件
            Ext.ComponentQuery.query('productdetail')[0].updateInfo(record);
        }
    }
});
  1. 创建商品详情组件：
Ext.create('Ext.Component', {
    xtype: 'panel',
    title: '商品详情',
    id: 'productdetail',
    html: '商品名称：', // 初始信息
    listeners: {
        updateInfo: function(record) {
            // 更新商品信息
            this.update('<b>商品名称：</b>' + record.get('name') + '<br><b>价格：</b>' + record.get('price'));
        }
    }
});

通过以上步骤，我们成功地在商品列表组件和商品详情组件之间传递了商品信息。

总结

本文介绍了在 ExtJS 中组件间高效传递参数的几种方法，并通过实际案例展示了如何实现。掌握这些方法将有助于提高 ExtJS 开发的效率和质量。希望本文对您有所帮助。

-- 展开阅读全文 --