Ext JS鼓勵用戶利用結構化的應用程序架構。
在我們的示例中，我們使用MVC（模型/視圖/控制器）方法。
這有助于我們將應用程序的數據，邏輯和視圖保存在單獨的孤島內。

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架構中，大多數類是模型，視圖或控制器。用戶與視圖交互，可以顯示模型中保存的數據。這些交互由Controller進行監(jiān)視，然后Controller根據需要通過更新視圖和模型來響應交互。

MVC的目標是清楚地定義應用程序中每個類的職責。因為每個類都有明確的責任，所以它們與大環(huán)境脫鉤。這使得應用程序更容易測試和維護，并且其代碼更可重用。

類和繼承

我們已經從簡單地創(chuàng)建組件切換到使用Ext.define方法定義新的組件類。
這些類通過指定其所需基類的“extend”屬性繼承其大部分功能。
我們選擇擴展的類與我們以前創(chuàng)建的類相同。

正如你所看到的，我們在類定義中使用了extend。
這是一種創(chuàng)建自己的類的方法，該類繼承您要擴展的類中的所有方法，屬性和配置選項。

所有Ext JS組件從Component類繼承屬性。
這意味著組件具有一定的能力，傳遞給Ext JS框架中的所有可視組件。

例如，TabPanel使用Component，Container和自身的所有能力，因為TabPanel擴展了Container，而Container擴展了Component。
這被稱為繼承鏈。
這不是你必須完全理解，但它是重要的認識到它的存在，因為它給你的視覺組件所有的超級大國存在于其層次結構。