MVVM模型介绍：

MVVM模型介绍：

app.js（应用启动类文件）

Ext.application({
    name: 'MyApp',  //定义该应用的命名空间
    extend: 'MyApp.Application',  //继承自MyApp.Application
    autoCreateViewport: 'MyApp.view.main.Main'  //自动创建类名为MyApp.view.main.Main的ViewPort实例
});

Application.js（应用程序类文件）

Ext.define('MyApp.Application', {
    extend: 'Ext.app.Application',  //继承自Ext.app.Application
    name: 'MyApp',  //应用程序命名空间
    stores: [
        // 添加全局共享的Store
    ],
    launch: function () {
        // 启动应用程序
    }
});

Main.js（Ext.Component的子类组件）

Ext.define('MyApp.view.main.Main', {
    extend: 'Ext.container.Container',  //继承自Ext.container.Container，一个Ext.Component的组件
    xtype: 'app-main',  //设置该类的xtype为'app-main'
    controller: 'main',  //设置该组件绑定的控制器是别名为'main'的控制器类
    viewModel: {
        type: 'main'  //设置该组件的视图模型的类型是别名为'main'的视图模型类
    },
    layout: {
        type: 'border'  //设置该组件的布局类型为'border'
    },
    items: [{  //设置该组件的子组件集合
        xtype: 'panel',  //该组件使用xtype方式，类型为panel的组件
        bind: {
            title: '{name}'  //标题绑定name字段
        },
        region: 'west',  //border布局中的west region
        html: '<ul>...</ul>',
        width: 250,
        split: true,
        tbar: [{  //设置top tool bar 顶部按钮集合
            text: 'Button',
            handler: 'onClickButton'  //按钮的处理函数名称（在绑定的Controller中定义的）
        }]
    },{
        region: 'center',  //border布局中的center region
        xtype: 'tabpanel',  //使用xtype方式定义的tabpanel组件
        items:[{  //设置tabpanel的字组件集合
            title: 'Tab 1',
            html: '<h2>Content ...</h2>'
        }]
    }]
});

MainController.js（视图控制器类）

Ext.define('MyApp.view.main.MainController', {
    extend: 'Ext.app.ViewController',  //继承自Ext.app.ViewController的视图控制器类
    requires: [
        'Ext.MessageBox'  //动态加载Ext.MessageBox类
    ],
    alias: 'controller.main',  //设置别名
    onClickButton: function () {  //定义名为'onClickButton'的事件处理函数，在视图中用此名称绑定处理函数
        Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);
    },
    onConfirm: function (choice) {  //定义名为'onConfirm'的事件处理函数，在视图中用此名称绑定处理函数
        if (choice === 'yes') {
            //
        }
    }
});

MainModel.js（视图模型类）

Ext.define('MyApp.view.main.MainModel', {
    extend: 'Ext.app.ViewModel',  //继承自Ext.app.ViewModel的视图模型类
    alias: 'viewmodel.main',  //设置别名
     data: {  //ViewModel为绑定它的视图提供数据
        name: 'MyApp',
        loremIpsum: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
    }
});

整个MVVM框架已经搭建完成，现在只需要在页面引用app.js文件，就可以加载该应用程序了。

<script type="text/javascript" src="path/app.js"></script>

Models和Stores这两个类提供了应用程序的数据信息。在上面的例子中，这两个类可以在ViewModel中进行配置，为ViewModel提供数据。其中，Models定义了数据模型的字段名和类型，Stores定义了数据模型的来源和读取方式，并将数据转化成组件可以识别的Record对象。

定义Model类：

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',  //继承自Ext.data.Model
    fields: [  //设置字段名和字段类型的集合
        {name: 'name',  type: 'string'},  //字段名和字段类型
        {name: 'age',   type: 'int'}
    ]
});

定义Store类：

Ext.define('MyApp.store.Users', {
    extend: 'Ext.data.Store',  //继承自Ext.data.Store
    alias: 'store.users',  //设置别名
    model: 'MyApp.model.User',  //设置该store类的model属性
    data : [  //设置数据集合（此数据来源是in-line的配置，还可以使用外部的数据来源，只不过要使用proxy来指定数据来源）
     {firstName: 'Seth', age: '34'},
     {firstName: 'Scott', age: '72'},
     {firstName: 'Gary', age: '19'},
     {firstName: 'Capybara', age: '208'}
    ]
});