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

最新推荐文章于 2024-04-22 01:31:11 发布

kopapai

最新推荐文章于 2024-04-22 01:31:11 发布

阅读量4.7k

点赞数 4

分类专栏： Extjs 文章标签： Extjs Extjs5 Extjs5.0

本文链接：https://blog.csdn.net/weihuangcool/article/details/42080597

版权

Extjs 专栏收录该内容

10 篇文章 5 订阅

订阅专栏

搭建项目前，要先下载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

kopapai

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
10
评论
Extjs5.0(2)：手动搭建MVVM架构项目

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

扫一扫