ExtJS5搭建MVVM框架

ExtJS5搭建MVVM框架的完整攻略

MVVM是一种前端架构模式，它将应用程序分为三个部分：模型（Model）、视图（View）和视图模型（ViewModel）。在ExtJS5中，我们可以使用MVVM框架来搭建一个可扩展、可维护的前端应用程序。本文将详细介绍如何使用ExtJS5搭建MVVM框架，并提供两个示例说明。

MVVM框架的基本概念

在MVVM框架中，模型（Model）用于表示应用程序的数据，视图（View）用于表示应用程序的界面，视图模型（ViewModel）用于处理视图和模型之间的交互。视图模型是一个中介者，它将视图和模型分离开来，使得视图和模型可以独立地进行开发和维护。

在ExtJS5中，我们可以使用ViewModel类来实现MVVM框架。ViewModel类是一个JavaScript类，它包含了视图和模型之间的交互逻辑。ViewModel类可以通过绑定（Binding）来将视图和模型关联起来，使得视图和模型之间的数据同步变得更加容易。

搭建MVVM框架的步骤

使用ExtJS5搭建MVVM框架的步骤如下：

1. 定义模型（Model）类，用于表示应用程序的数据。
2. 定义视图（View）类，用于表示应用程序的界面。
3. 定义视图模型（ViewModel）类，用于处理视图和模型之间的交互。
4. 在视图中使用绑定（Binding）将视图和模型关联起来。

下面是一个简单的示例：

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',
    fields: ['id', 'name', 'email']
});

Ext.define('MyApp.view.UserList', {
    extend: 'Ext.grid.Panel',
    viewModel: {
        type: 'userlist'
    },
    bind: {
        store: '{users}'
    },
    columns: [{
        text: 'ID',
        dataIndex: 'id'
    }, {
        text: 'Name',
        dataIndex: 'name'
    }, {
        text: 'Email',
        dataIndex: 'email'
    }]
});

Ext.define('MyApp.view.UserListViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.userlist',
    stores: {
        users: {
            model: 'MyApp.model.User',
            autoLoad: true
        }
    }
});

在上面的示例中，我们定义了一个User模型类，一个UserList视图类和一个UserListViewModel视图模型类。UserList视图类中使用了绑定（Binding）将视图和模型关联起来，使得视图和模型之间的数据同步变得更加容易。UserListViewModel视图模型类中定义了一个名为users的数据源（Store），用于存储用户数据。

示例说明

以下是两个使用ExtJS5搭建MVVM框架的示例：

1. 表单验证

Ext.define('MyApp.view.LoginForm', {
    extend: 'Ext.form.Panel',
    viewModel: {
        type: 'loginform'
    },
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Username',
        name: 'username',
        bind: '{username}'
    }, {
        xtype: 'textfield',
        fieldLabel: 'Password',
        name: 'password',
        inputType: 'password',
        bind: '{password}'
    }, {
        xtype: 'button',
        text: 'Login',
        handler: 'onLoginClick'
    }]
});

Ext.define('MyApp.view.LoginFormViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.loginform',
    data: {
        username: '',
        password: ''
    },
    formulas: {
        isValid: function(get) {
            var username = get('username'),
                password = get('password');
            return username !== '' && password !== '';
        }
    }
});

Ext.define('MyApp.view.LoginFormController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.loginform',
    onLoginClick: function() {
        var viewModel = this.getViewModel(),
            username = viewModel.get('username'),
            password = viewModel.get('password');
        if (username === 'admin' && password === 'admin') {
            Ext.Msg.alert('Success', 'Login successful.');
        } else {
            Ext.Msg.alert('Error', 'Invalid username or password.');
        }
    }
});

在上面的示例中，我们定义了一个LoginForm视图类、一个LoginFormViewModel视图模型类和一个LoginFormController控制器类。LoginForm视图类中包含一个用户名输入框、一个密码输入框和一个登录按钮。LoginFormViewModel视图模型类中定义了一个名为isValid的公式（Formula），用于验证用户名和密码是否为空。LoginFormController控制器类中包含一个onLoginClick方法，用于处理登录按钮的点击事件。

2. 数据绑定

Ext.define('MyApp.view.UserForm', {
    extend: 'Ext.form.Panel',
    viewModel: {
        type: 'userform'
    },
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        name: 'name',
        bind: '{user.name}'
    }, {
        xtype: 'textfield',
        fieldLabel: 'Email',
        name: 'email',
        bind: '{user.email}'
    }, {
        xtype: 'button',
        text: 'Save',
        handler: 'onSaveClick'
    }]
});

Ext.define('MyApp.view.UserFormViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.userform',
    data: {
        user: {
            name: '',
            email: ''
        }
    }
});

Ext.define('MyApp.view.UserFormController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.userform',
    onSaveClick: function() {
        var viewModel = this.getViewModel(),
            user = viewModel.get('user');
        Ext.Msg.alert('Success', 'User saved: ' + user.name + ' (' + user.email + ')');
    }
});

在上面的示例中，我们定义了一个UserForm视图类、一个UserFormViewModel视图模型类和一个UserFormController控制器类。UserForm视图类中包含一个名字输入框、一个邮箱输入框和一个保存按钮。UserFormViewModel视图模型类中定义了一个名为user的数据模型（Model），用于存储用户数据。UserFormController控制器类中包含一个onSaveClick方法，用于处理保存按钮的点击事件。

结论

在ExtJS5中，我们可以使用MVVM框架来搭建一个可扩展、可维护的前端应用程序。使用MVVM框架的步骤包括定义模型（Model）类、定义视图（View）类、定义视图模型（ViewModel）类和在视图中使用绑定（Binding）将视图和模型关联起来。在实际应用中，我们可以根据具体的业务需求，灵活使用MVVM框架来搭建前端应用程序。