EXT.js学习(MVC)

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进行监视，然后Controller根据需要通过更新视图和模型来响应交互。

MVC的目标是清楚地定义应用程序中每个类的职责。因为每个类都有明确的责任，所以它们与大环境脱钩。这使得应用程序更容易测试和维护，并且其代码更可重用。

类和继承

我们已经从简单地创建组件切换到使用Ext.define方法定义新的组件类。
这些类通过指定其所需基类的“extend”属性继承其大部分功能。
我们选择扩展的类与我们以前创建的类相同。

正如你所看到的，我们在类定义中使用了extend。
这是一种创建自己的类的方法，该类继承您要扩展的类中的所有方法，属性和配置选项。

所有Ext JS组件从Component类继承属性。
这意味着组件具有一定的能力，传递给Ext JS框架中的所有可视组件。

例如，TabPanel使用Component，Container和自身的所有能力，因为TabPanel扩展了Container，而Container扩展了Component。
这被称为继承链。
这不是你必须完全理解，但它是重要的认识到它的存在，因为它给你的视觉组件所有的超级大国存在于其层次结构。