0

我定义了以下视图：

LeftNavigation（网格面板）

Ext.define('Ray.view.StationsList', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.LeftNavigation',

    store: 'LeftNavigation',
    title: 'Navigation',
    hideHeaders: true,

    initComponent: function () {
        this.columns = [{
            dataIndex: 'name',
            flex: 1
        }];

        this.callParent();
    }
});

内容（面板）

Ext.define('Ray.view.Contents', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.Contents'
});

表格（表格面板）

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);
    }

});

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

“内容”将是显示所有数据的主要区域。在这种情况下，我需要在此处显示几种表格。所以我在这里想要实现的是，当用户点击导航网格上的特定链接时，我需要将该链接的“id”对应的表单加载到“内容”区域中。

我想弄清楚需要如何定义控制器来实现这一点？

非常感谢，将不胜感激。

4

2 回答 2

2

我也在学习这个，所以一个快速的笔记：你看过关于 MVC 模式的两个教程吗？

4 部分 MVC 教程的第 3 部分：

http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-3/

还有一个“独立”教程：

http://www.sencha.com/learn/the-mvc-application-architecture/

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

最好的，

安德烈亚斯

于 2011-11-04T14:48:20.777 回答
2

听起来您需要为网格的itemclick事件创建一个侦听器以确定要加载的表单。

在 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);
    }
});

[0]after的原因Ext.ComponentQuery().query()是总是返回一个数组。因为我们确切地知道我们（可能）得到的是带有idor的单个对象itemId，所以我们可以说我们想要返回数组中的第一个对象。

通读 JordbaerHjelmen 提到的整个 MVC 教程对您很有帮助，可能从第 1 部分开始。

于 2011-11-04T16:57:12.673 回答