Javascript 关于extjs4mvc体系结构

我定义了以下观点：

左侧导航（网格面板）

内容（面板）

表单（表单面板）

我试图使用网格面板作为导航，它的数据将来自一个json文件，该文件将有一个“id”和“name”字段。其中，id将用作链接id，名称将用作链接显示的文本

“内容”将是显示所有数据的主要区域。在本例中，我需要在这里显示几个表单。因此，我在这里试图实现的是，当用户单击导航网格上的特定链接时，我需要将与该链接的“id”对应的表单加载到“内容”区域

我试图弄清楚需要如何定义一个或多个控制器来实现这一点

---

非常感谢，如果您能给出一个合适的答案，我将不胜感激。

我也在学习这一点，所以请注意：您看过关于MVC模式的两个教程了吗

由4部分组成的MVC教程的第3部分：

以及“独立”教程：

这两种方法都可以让控制器运行。在第一个教程中有一个完整的项目，其中包含源代码，在后一个教程中，您需要自己创建它，但并不需要花费很多时间

最好的

---

Andreas

我也在学习这一点，所以请注意：您看过关于MVC模式的两个教程了吗

由4部分组成的MVC教程的第3部分：

以及“独立”教程：

这两种方法都可以让控制器运行。在第一个教程中有一个完整的项目，其中包含源代码，在后一个教程中，您需要自己创建它，但并不需要花费很多时间

最好的

---

Andreas

听起来您需要为网格的

项单击

事件创建一个侦听器，以确定要加载的表单

在ExtJS中访问对象的方法有很多，因此为了遵循我的代码示例，您需要为每个组件分配一个

id

或

itemId

。此外，我不知道您的文件是如何构造的，因此您可能需要修改它以使其正常工作。但是，它应该为控制器的运行提供一个基础

Ext.define('Ray.controller.Stations', {
    extend: 'Ext.app.Controller',
    views: ['LeftNavigation', 'Contents', 'Claim'],
    init: function() {
        this.control({
            '#leftNavigationGrid': {
                itemclick: this.onItemClick
            }
        });
    },
    onItemClick: function(grid, record) {
        var id = record.data.id;
        var myForm = Ext.widget('Claim', { width: 400; height: 600; });

        Ext.ComponentQuery().query('#Contents')[0].add(myForm);
    }
});

Ext.ComponentQuery（）.query（）

之后出现

[0]

的原因是总是返回一个数组。由于我们确切地知道（可能）得到的是一个具有

id

或

itemId

的单个对象，因此我们可以说我们想要返回数组中的第一个对象

---

阅读Jordbarhjelmen提到的整个MVC教程，可能从开始阅读。听起来您需要为网格的

项click

事件创建一个侦听器，以确定要加载的表单

在ExtJS中访问对象的方法有很多，因此为了遵循我的代码示例，您需要为每个组件分配一个

id

或

itemId

。此外，我不知道您的文件是如何构造的，因此您可能需要修改它以使其正常工作。但是，它应该为控制器的运行提供一个基础

Ext.define('Ray.controller.Stations', {
    extend: 'Ext.app.Controller',
    views: ['LeftNavigation', 'Contents', 'Claim'],
    init: function() {
        this.control({
            '#leftNavigationGrid': {
                itemclick: this.onItemClick
            }
        });
    },
    onItemClick: function(grid, record) {
        var id = record.data.id;
        var myForm = Ext.widget('Claim', { width: 400; height: 600; });

        Ext.ComponentQuery().query('#Contents')[0].add(myForm);
    }
});

Ext.ComponentQuery（）.query（）

之后出现

[0]

的原因是总是返回一个数组。由于我们确切地知道（可能）得到的是一个具有

id

或

itemId

的单个对象，因此我们可以说我们想要返回数组中的第一个对象

---

阅读Jordbarhjelmen提到的整个MVC教程（可能从开始）会让您受益匪浅。

非常感谢您的解释。我不确定表单加载到容器中的那一部分，即“内容”视图，如果您能解释一下，我将非常感谢。我详细介绍了如何将表单添加到“内容”面板中。希望有帮助！非常感谢你的解释。我不确定表单加载到容器中的那一部分，即“内容”视图，如果您能解释一下，我将非常感谢。我详细介绍了如何将表单添加到“内容”面板中。希望有帮助！

Ext.define('Ray.view.Form', {
    extend: 'Ext.form.Panel',
    alias: 'widget.Claim',

    title: 'ClaimForm',

    initComponent: function () {
        this.items = [{
            xtype: 'form',
            items: [{
                xtype: 'textfield',
                name: 'name',
                fieldLabel: 'Name'
            }, {
                xtype: 'textfield',
                name: 'email',
                fieldLabel: 'Email'
            }]
        }];

        this.buttons = [{
            text: 'Save',
            action: 'save'
        }];

        this.callParent(arguments);
    }

});

Ext.define('Ray.controller.Stations', {
    extend: 'Ext.app.Controller',
    views: ['LeftNavigation', 'Contents', 'Claim'],
    init: function() {
        this.control({
            '#leftNavigationGrid': {
                itemclick: this.onItemClick
            }
        });
    },
    onItemClick: function(grid, record) {
        var id = record.data.id;
        var myForm = Ext.widget('Claim', { width: 400; height: 600; });

        Ext.ComponentQuery().query('#Contents')[0].add(myForm);
    }
});