08_代码结构

Ext JS鼓励用户使用结构化的程序架构。在我们的示例中，我们使用了MVC（Model/View/Controller）的方式。这能让我们保持程序的数据，逻辑跟视图（即界面）相分离。

Ext.define('Employees', {
    extend: 'Ext.data.Store',
    alias: 'store.employees',

    data: [{
        "firstName": "Jean",
        "lastName": "Grey",
        "officeLocation": "Lawrence, KS",
        "phoneNumber": "(372) 792-6728"
    }, {
        "firstName": "Phillip",
        "lastName": "Fry",
        "officeLocation": "Lawrence, KS",
        "phoneNumber": "(318) 224-8644"
    }, {
        "firstName": "Peter",
        "lastName": "Quill",
        "officeLocation": "Redwood City, CA",
        "phoneNumber": "(718) 480-8560"
    }]
});

Ext.define('PopupForm', {
    extend: 'Ext.form.Panel',
    xtype: 'popupform',
    controller: 'popupform',

    title: 'Update Record',

    width: 300,
    floating: true,
    centered: true,
    modal: true,

    items: [{
        xtype: 'textfield',
        name: 'firstname',
        label: 'First Name',
        bind: '{employee.firstName}'

    }, {
        xtype: 'toolbar',
        docked: 'bottom',
        items: ['->', {
            xtype: 'button',
            text: 'Submit',
            iconCls: 'x-fa fa-check',
            handler: 'submitUpdate'
        }, {
            xtype: 'button',
            text: 'Cancel',
            iconCls: 'x-fa fa-close',
            handler: 'cancelUpdate'
        }]
    }]
});

Ext.define('PopupFormController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.popupform',

    cancelUpdate: function () {
        var view = this.getView();

        view.destroy();
    },

    submitUpdate: function(me) {
        var view = this.getView();

        view.destroy();
    }
});


Ext.define('MyListViewController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.listview',

    onPopupForm: function (view, index, item, record) {
        Ext.Viewport.add({
            xtype: 'popupform',
            width: 400,
            record: record,
            viewModel : {
                data: {
                    employee: record
                }
            }
        });
    }
});

Ext.application({
    name: 'Fiddle',

    launch: function() {

        Ext.Viewport.add({
            xtype: 'tabpanel',
            controller: 'listview',

            items: [{
                title: 'Employee Directory',
                xtype: 'grid',
                iconCls: 'x-fa fa-users',
                listeners: {
                    itemtap: 'onPopupForm'
                },
                store: {
                    type: 'employees'
                },
                columns: [{
                    text: 'First Name',
                    dataIndex: 'firstName',
                    flex: 1
                }, {
                    text: 'Last Name',
                    dataIndex: 'lastName',
                    flex: 1
                }, {
                    text: 'Phone Number',
                    dataIndex: 'phoneNumber',
                    flex: 1
                }]
            }, {
                title: 'About Sencha',
                iconCls: 'x-fa fa-info-circle'
            }]
        });

    }
});

MVC

在一个MVC架构中，大多数的类是模板，视图或者控制器。用户与视图交互，视图可以显示模板里的数据。这些交互由控制器监控，如果有必要，控制器将对更新视图与模板的交互操作作出响应（注解：即是视图与模板之间的交互会触发事件，控制器可以对事件处理函数作处理，从而影响处理过程与处理结果）。

MVC的目的是清晰地定义程序中各个类的职责。因为每个类已经被清晰地定义职责，他们将会从大环境中解耦。这会使程序更容易测试和维护，代码复用性更强。

类和继承

我们已经从简单地创建组件过渡到使用Ext.define方法定义新的组件类。这些类通过使用‘extend’属性来继承父类的大部分功能特性。’extend’属性声明了该类要继承的父类。我们选择的要继承的类跟我们前面已经创建的类是相同的。

你可以看到，我们在类的声明中使用extend。用这种方式创建你自己的类，可以从父类中继承所有的方法，属性和配置项。

所有的Ext JS组件都从Component类中继承属性。在Ext JS框架中，这也就意味着Component类具有的功能会被向下传递到所有的可见组件中。

在示例中，TabPanel组件可以使用从Component，Container中继承的所有功能以及它自身的功能，这是因为TabPanel继承自Container，Container继承自Component。这被叫做继承链。这些并不是你需要完全理解掌握的，但认识到它的功能是很重要的。因为在继承层级结构中，它赋予了你的可见组件十分强大的功能。

下一步

在下一章节中，我们将添加更多的功能和真实环境中的数据以使我们的程序成为真实的用例。

深度探索

更多关于程序架构的信息，请查阅我们的程序架构概览章节（http://docs.sencha.com/extjs/6.2.1/guides/application_architecture/application_architecture.html）。