Extjs5.0(2)：手动搭建MVVM架构项目

来源：互联网发布：蚁群算法流程编辑：程序博客网时间：2024/06/05 12:07

搭建项目前，要先下载extjs5.0的sdk包。由于sdk包比较大，不能一次性上传，我分成两个包Extjs5.0(1)和Extjs5.0(2)，下载完这两个包之后，解压，放在同一个文件夹里面，可以命名为Extjs5.0。最后Extjs5.0文件夹下完整的目录如下：

构建项目需要用到Extjs5.0包的以下文件：

Extjs5.0\build\ bootstrap.js

Extjs5.0\build\ ext-all.js

Extjs5.0\build\ ext-all-debug.js

Extjs5.0\build\packages\ext-theme-crisp\build\ext-theme-crisp.js

Extjs5.0\build\packages\ext-theme-crisp\build\ext-theme-crisp-debug.js

Extjs5.0\build\packages\ext-theme-crisp\build\resources\images

Extjs5.0\build\packages\ext-theme-crisp\build\resources\ext-theme-crisp-all.css

Extjs5.0\build\packages\ext-theme-crisp\build\resources\ext-theme-crisp-all-debug.css

我们可以把这些文件放在一个文件夹里面，作为项目的资源文件。例如我把这些文件放在一个叫ext的文件夹里面，在我们新建项目时，把这个ext文件夹复制进去就可以了。

下面开始建立项目。我这里用的IDE是WebStorm，如果用的是eclipse、myeclipse或者其他IDE的同学，自行根据所用的软件构建web项目，这里不做介绍。

我们新建一个项目，命名为test1，把我们的库文件复制到项目根目录下。

在根目录下新建app.js和index.html文件，作为我们项目的运行的入口。

app.js:

Ext.application({    name: 'MyApp',    launch: function() {        Ext.create('Ext.container.Viewport', {            layout: 'center',            items: [{                title: 'Centered Content',                width: '50%',                  height:'50%',                border:true,                html: 'Some content'            }]        });    }});

index.html:

<!DOCTYPE HTML><html manifest=""><head>    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta charset="UTF-8">    <title>MyApp</title>    <link rel="stylesheet" type="text/css" href="ext/ext-theme-crisp-all.css">    <script type ="text/javascript" src="ext/bootstrap.js"></script>    <script type ="text/javascript" src="ext/ext-theme-crisp.js"></script>    <script type ="text/javascript" src="app.js"></script></head><body></body></html>

这样就建立起来一个简单的extjs项目，我们运行在浏览器中打开index.html，会看到我们的项目效果。

下面我们简单的介绍一下我们引入的ext这个文夹下各个文件的作用。

ext-all.js：extjs库文件，最主要的文件，extjs的定义及所有组件和方法。

ext-all-debug.js：ext-all.js的未压缩版。我们项目中只需要引入ext-all或者ext-all-debug,二者选一就好。

bootstrap.js：用于启动项目时，自动选择加载ext-all.js或者ext-all-debug.js。如果当前是开发模式，则会自动加载ext-all-debug.js文件，如果是发布模式，则加载ext-all.js文件。

ext-theme-crisp.js：对于crisp这个主题的一些优化。

ext-theme-crisp-all.css：crisp主题css文件。

ext-theme-crisp-all-debug.css：ext-theme-crisp-all.css的未压缩版，我们项目中只需要引入ext-theme-crisp-all.css或者ext-theme-crisp—all-debug.css,二者选一就好。开发时选择ext-theme-crisp-all-debug，未压缩版方便我们出错时准确定位出错位置，发布时则用ext-theme-crisp-all，减少网络请求流量，加快加载速度。

Image:主题所需要用到的image文件。

再讲一下项目的启动流程。

观察一下index.html，发现我们加载了以下的ext库文件。

首先加载主题文件，再加载bootstrap.js，判断是加载ext-all.js还是ext-all-debug.js,最后加载ext-theme-crisp.js，对主题做一些修复（适应），这样子就把extjs引入进来了。

接下来就是引入我们自己的js文件，app.js是我们程序的入口，首先创建一个Ext.container.Viewport，这类似于获取我们html中的body，然后我们所有的其他组件，都放在这个viewport里面。

至此,我们的项目已经能运行了，下面介绍搭建MVVM架构项目。MVVM大家可能比较陌生，但是MVC相信大多数人都知道。MVC是extjs4新引入的，MVVM是extjs5新引入的，我们这里讲的是extjs5，所以对MVC就不多介绍，有兴趣的同学自行网上查询，这方面资料有很多。

在搭建MVVM架构时需要注意，此时我们的项目必须放在web服务器上才能正常运行，因为里面用到动态加载，需要httprequest。我用的是webstorm，运行时会自动开启一个web服务。如果是是用其他编辑器的同学，可以把项目发布在tomcat或者其他web服务器中。我们项目在浏览器中的访问地址应该类似这样：

下面开始项目搭建。

在我们目前项目的基础上，在根目录建立app文件夹，在app目录下，建立view、model、store三个包和Application.js文件，项目结构如下：

Application.js:

Ext.define('MyApp.Application', {    extend: 'Ext.app.Application',//继承Ext.app.Application        name: 'MyApp',//命名空间    stores: [        //需要用到的stores    ]    });

修改app.js代码如下：

Ext.application({    name: 'MyApp',//应用的命名空间    extend: 'MyApp.Application',//继承自app目录下Application.js        autoCreateViewport: 'MyApp.view.main.Main'//自动创建viewport，并引入app\view\main\Main.js文件，创建MyApp.view.main.Main});

然后在浏览器访问index.html，会发现报错，主要原因是找不到app\view\main\Main.js文件。我们在app\view\main\中建立该文件就可以了，Main.js就是我们以后程序的主页面。

Main.js代码如下：

Ext.define('MyApp.view.main.Main', {    extend: 'Ext.container.Container',    xtype: 'app-main',    html: 'hello world'});

浏览器中打开index.html:

效果出来了。

接下来我们创建一个表格。创建一个用户表。

app\view下创建user包，包下建立UserGrid.js

UserGrid.js代码如下：

Ext.define('MyApp.view.user.UserGrid', {    extend: 'Ext.grid.Panel',    xtype: 'app-usergrid',    title: '用户列表',    columns: [        { text: '用户名',  dataIndex: 'name',flex:1 },        { text: '性别', dataIndex: 'email', flex: 1 },        { text: '电话', dataIndex: 'phone',flex: 1 }    ],    width: 400,    border:true});

修改Main.js代码如下：

Ext.define('MyApp.view.main.Main', {    extend: 'Ext.container.Container',    xtype: 'app-main',    requires:['MyApp.view.user.UserGrid'],    layout: {        type: 'center'    },    items: {        xtype:'app-usergrid'    }});

浏览器中打开index.html，效果如下：

接下来为该表填入几条记录。

首先在model包下建立UserModel数据模型

UserModel.js:

Ext.define('MyApp.model.UserModel', {    extend: 'Ext.data.Model',    fields: [        {name: 'name', type: 'string'},        {name: 'age',  type: 'int'},        {name: 'phone',  type: 'string'}    ]});

在store包下建立UserStore

UserStore.js:

Ext.define('MyApp.store.UserStore', {    extend: 'Ext.data.Store',    model: 'MyApp.model.UserModel',    autoLoad: true,    proxy: {        type: 'ajax',        api: {            read: 'data/users.json'        },        reader: {            type: 'json',            rootProperty: 'users',            successProperty: 'success'        }    }});

在项目根目录下建立data包，用于存放json数据。由于我们这里没涉及到后台，所以用到的json数据不从后台读取，这里从我们的data包里面读取。data包下建立模拟数据。

Users.json:

{    success: true,    users: [        {id: 1, name: 'Ed',   age:18, phone: '110'},        {id: 2, name: 'Tommy', age:20,phone: '110'}    ]}

至此，所有文件都建立完成，接下来，把文件结合统一。

修改Application.js，引入我们前面定义的store。

Application.js：

Ext.define('MyApp.Application', {    extend: 'Ext.app.Application',//继承Ext.app.Application        name: 'MyApp',//命名空间    stores: [        'UserStore@MyApp.store'//引入需要的store    ]   });

修改UserGrid.js，把store加载进来。

UserGrid.js:

Ext.define('MyApp.view.user.UserGrid', {    extend: 'Ext.grid.Panel',    xtype: 'app-usergrid',    title: '用户列表',    store:'UserStore',    border:true,    columns: [        { text: '用户名',  dataIndex: 'name',flex:1 ,align:'center'},        { text: '年龄', dataIndex: 'age', flex: 1 ,align:'center'},        { text: '电话', dataIndex: 'phone',flex: 1 ,align:'center'}    ],    width: 400});

浏览器中打开index.html，效果如下：

接下来为表格设置item(行)的点击事件。

在user包下建立UserGridController.js，用于控制grid事件。

UserGridController.js:

Ext.define('MyApp.view.user.UserGridController', {    extend: 'Ext.app.ViewController',    alias: 'controller.usergrid',    userClick:function( view, record, item, index, e, eOpts){        alert('hello'+record.get('name'))    }});

在UserGrid.js中引入该控制器。

UserGrid.js:

Ext.define('MyApp.view.user.UserGrid', {    extend: 'Ext.grid.Panel',    requires: ['MyApp.view.user.UserGridController'],    xtype: 'app-usergrid',    controller: 'usergrid',//控制器    title: '用户列表',    store:'UserStore',    border:true,    columns: [        { text: '用户名',  dataIndex: 'name',flex:1 ,align:'center'},        { text: '年龄', dataIndex: 'age', flex: 1 ,align:'center'},        { text: '电话', dataIndex: 'phone',flex: 1 ,align:'center'}    ],    width: 400,    listeners: {        itemdblclick: {            fn: 'userClick',            scope: "controller"        }    }});

浏览器中打开index.html，双击某一行，效果如下：

完整的目录结构：

MVVM项目搭建就讲到这里。

可能很多人并不知道MVVM是什么意思，上网去查也没发现有多少人能把这东西讲明白，我自己也讲不出很概念性的一个定义，但是我们可以通过对项目的搭建和编程中去探讨，去了解。下一节我们讲利用工具搭建MVVM项目，然后就这项目一步一步的完善，去探讨和了解Extjs5和它的MVVM。

最后附上项目的完整代码。

交流群：170198012

1 0