关于ExtJs4 MVC架构

Question

我有以下意见：

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

Content (Panel)

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相对应的表单加载到“Content”区域。

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

非常感谢，一个合适的答案将不胜感激。

Answer 1

听起来，您需要为网格的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]在Ext.ComponentQuery().query()之后出现的原因是总是返回一个数组。因为我们确切地知道我们(可能)得到的是一个带有id或itemId的对象，所以我们只需要返回数组中的第一个对象。

阅读JordbaerHjelmen提到的整个MVC教程，可能是从第1部分开始，这对您确实有好处。

Answer 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/

这两种方法都能让控制器正常工作。在第一个教程中有一个包含源代码的完整项目，而在后一个教程中，您需要自己创建它，但是它不需要花费太多时间。

最好的

安德烈亚斯