extjs4-MVC学习-CSDN博客

本文链接：https://blog.csdn.net/wxxwyl_tom_com/article/details/84536877

参照官方文档
1、mvc定义
     Model是一个域和值的集合（例如，一个用户Model有用户名和密码域），Model知道通过数据包怎样获取数据，同时也能够与其他models关联。Model非常类似于版本3中的record类，通常和Stores一起将数据展现在grids和别的components中。
     View是任意组件-grids、trees、panels等。
    Controllers是放置应用程序代码的地方，这些代码或者渲染视图、或者实例化Models或者处理其他的业务逻辑。
2、下面创建一个简单的MVC的例子
      目录结构如下：

注：在这个目录结构中ext-4下为整个ext4SDK工具包内容，否则会报关联文件找不到的错误。

按照如上的目录结构建好文件夹，开始写文件：

1）首先写入口文件index.html

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Account Manager</title>

    <link rel="stylesheet" type="text/css" href="ext-4/resources/css/ext-all.css">

    <script type="text/javascript" src="ext-4/ext-debug.js"></script>
	
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

2）创建Application文件app.js

每个Ext JS4应用程序开始于一个实例化的Application类。它包含全局的设置（例如，app's name），维护所有需用到的models、views和controllers关联关系。还包含一个加载完成资源后自动运行的launch功能。

Ext.application({
    requires: ['Ext.container.Viewport'],
    name: 'AM',

    appFolder: 'app',

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    xtype: 'panel',
                    title: 'Users',
                    html : 'List of users will go here'
                }
            ]
        });
    }
});

在以上代码中，首先调用Ext.application创建一个Application实例类，命名为AM，这样就自动设置了一个全局变量AM，且将命名空间注册到Ext.Loader，同样通过appFolder设置了app通讯路径。我们还提供给了一个简单的launch功能，用来创建一个仅仅包含一个满屏Panel的Viewport。

3）定义一个Controller

Controllers是application之间的粘合剂。它们实际上是监听事件并做出相应的响应动作。

一下为我们创建的一个controller，路径为app/controller/Users.js

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',

    init: function() {
        console.log('Initialized Users! This happens before the Application launch function is called');
    }
});

现在，我们把新建的controller添加到app.js中

Ext.application({
    ...

    controllers: [
        'Users'
    ],

    ...
});

当在浏览器访问index.html时，Users controller被自动加载，并且它的init函数会在launch之前被调用。

init函数用来设置controller与view交互，以及与其他controller function control连接。control函数使监听view类并处理业务更加容易。更新Users controller 实现：当panel被渲染时控制台输出提示信息。

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',

    init: function() {
        this.control({
            'viewport > panel': {
                render: this.onPanelRendered
            }
        });
    },

    onPanelRendered: function() {
        console.log('The panel was rendered');
    }
});

以上更新了init函数，使用this.control设置在views上的监听。control函数使用新的ComponentQuery引擎快速、简便的获得在页面上的components。简言之，它通过类似CSS选择器的方式找到页面上匹配的component。

在上边的init函数中，‘viewport>panel’，解释为“找出Viewport下的所有Panel子元素”。然后我们提供了一个匹配事件名称的对象，来处理功能。整体的效果是，在任何时候，任何component，只要匹配上选择器，就触发渲染事件。事件onPanelRendered功能被调用。

下面给我们的app润色，添加一个grid

4）定义一个view

添加一个表格（grid）展示系统中的用户，创建List.js 路径为app/view/user/List.js，代码如下：

Ext.define('AM.view.user.List' ,{
    extend: 'Ext.grid.Panel',
    alias: 'widget.userlist',

    title: 'All Users',

    initComponent: function() {
        this.store = {
            fields: ['name', 'email'],
            data  : [
                {name: 'Ed',    email: 'ed@sencha.com'},
                {name: 'Tommy', email: 'tommy@sencha.com'}
            ]
        };

        this.columns = [
            {header: 'Name',  dataIndex: 'name',  flex: 1},
            {header: 'Email', dataIndex: 'email', flex: 1}
        ];

        this.callParent(arguments);
    }
});

在这个例子中我们继承了Grid组件并且设置了别名，这样可以作为一个xtype来使用它。我们还添加了表格应该渲染的store和columns。

接下来，需要把view添加到controller中。因为我们用'widget.'格式设置了别名，我们可以把'userlist'作为一耳光xtype来用，就像之前的'panel'一样。

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',

    views: [
        'user.List'
    ],

    init: ...

    onPanelRendered: ...
});

然后修改app.js通过userlist来渲染页面。

Ext.application({
    ...

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: {
                xtype: 'userlist'
            }
        });
    }
});

另外一个需要强调的是user.List放置在views 数组里。当我们launch时，应用程序可以自动加载文件，这样我们就可以使用了。应用程序使用Ext JS 4中新的动态加载机制来动态的从服务器上抓取文件。

5）控制grid

在这里，我们的 onPanelRendered 功能仍然被调用。这是因为我们的grid类仍然能够匹配viewport>panel选择器。这是因为我们的类继承了Grid，它反过来继承Panel。