[Ext JS 4] MVC 应用程序框架

标签： ext js mvc | 发表时间：2013-07-07 16:28 | 作者：oscar999

出处：http://blog.csdn.net

前言

大型客户端应用程序总是很难编写，很难组织和很难维护。随着功能的增加和更多的开发人员加入项目，对项目的控制也越来越困难了。Ext JS 4 提供了一个新的应用程序框架帮助组织代码。

模型 - 一组栏位和数据的集合。Model （在Ext JS 3中使用Record class）

视图 - 组件类型, grids,trees 和 panels 都是属于试图

控制器 -- 用来渲染试图，实例模型和其他的应用逻辑

文件结构

Ext JS4 遵循统一的目录结构。看一个例子：

Folder Structure

index.html 的内容大致如下：

<html>
<head>
    <title>Account Manager</title>
 
    <link rel="stylesheet" type="text/css" href="ext-4.0/resources/css/ext-all.css">
 
    <script type="text/javascript" src="ext-4.0/ext-debug.js"></script>
 
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

在app.js 中创建应用

每一个Ext JS 4的应用都从创建一个Application 类的实例开始。这个Application实例里配置了一些全局的设置（比如应用的名字）和模型，试图和控制器的设置。一个application也包含了一个启动的函数。

这里以一个简单的帐号管理应用为例，

首先，定义一个全局命名空间。所有的Ext JS应用都应该使用一个全局命名空间，所有的应用的类都位于这个之下。这里以 “AM”为例。

Ext.application({
    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'
                }
            ]
        });
    }
});

定义一个控制器

控制器是把应用程序连接在一起的胶水。它们监听事件（从视图中过来）并执行一些操作。继续上面的例子，创建一个控制器。

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');
    }
});

然后，把这个控制器加到应用中(app.js)

Ext.application({
    ...
 
    controllers: [
        'Users'
    ],
 
    ...
});

当在浏览器中访问index.html的时候，Users这个控制器会自动被加载，它的init 函数会在应用的lanch 函数执行之前被调用。

init 函数用来设置和试图交互的控制器，以及和其他的控制器的关联。 control 函数可以很容易的监听事件并执行相应的动作处理函数。完善上面的Users 控制器

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 来监听视图的事件。control 函数使用了最新的 ComponentQuery 引擎来快速找到引用的组件。关于ComponentQuery 可以参考 ComponentQuery documentation。

运行的效果如下：

Controller listener

定义一个视图

试图无非就是组件，这里创建一个Users grid 定义在文件 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: '[email protected]'},
                {name: 'Tommy', email: '[email protected]'}
            ]
        };
 
        this.columns = [
            {header: 'Name',  dataIndex: 'name',  flex: 1},
            {header: 'Email', dataIndex: 'email', flex: 1}
        ];
 
        this.callParent(arguments);
    }
});

接下来，就是把这个视图加到Users控制器中。

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',
 
    views: [
        'user.List'
    ],
 
    init: ...
 
    onPanelRendered: ...
});

接着就是放入到app.js中的 viewport中

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

这里使用xtype 指定userlist, （使用动态导入），呈现的效果如下：

Our first View

控制网格

这里添加每行的双击事件：

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',
 
    views: [
        'user.List'
    ],
 
    init: function() {
        this.control({
            'userlist': {
                itemdblclick: this.editUser
            }
        });
    },
 
    editUser: function(grid, record) {
        console.log('Double clicked on ' + record.get('name'));
    }
});

效果如下：

Double click handler

这里edit 只是简单的输出log, 以下给出一个复杂的编辑函数，定义 edit 在 app/view/user/Edit.js:

Ext.define('AM.view.user.Edit', {
    extend: 'Ext.window.Window',
    alias : 'widget.useredit',
 
    title : 'Edit User',
    layout: 'fit',
    autoShow: true,
 
    initComponent: function() {
        this.items = [
            {
                xtype: 'form',
                items: [
                    {
                        xtype: 'textfield',
                        name : 'name',
                        fieldLabel: 'Name'
                    },
                    {
                        xtype: 'textfield',
                        name : 'email',
                        fieldLabel: 'Email'
                    }
                ]
            }
        ];
 
        this.buttons = [
            {
                text: 'Save',
                action: 'save'
            },
            {
                text: 'Cancel',
                scope: this,
                handler: this.close
            }
        ];
 
        this.callParent(arguments);
    }
});

接下来，加入控制器中：

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',
 
    views: [
        'user.List',
        'user.Edit'
    ],
 
    init: ...
 
    editUser: function(grid, record) {
        var view = Ext.widget('useredit');
 
        view.down('form').loadRecord(record);
    }
});

实现效果如下：

Loading the form

创建Model 和 Store

创建 app/store/Users.js

Ext.define('AM.store.Users', {
    extend: 'Ext.data.Store',
    fields: ['name', 'email'],
    data: [
        {name: 'Ed',    email: '[email protected]'},
        {name: 'Tommy', email: '[email protected]'}
    ]
});

接下来让Controller 使用这个 Store

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',
    stores: [
        'Users'
    ],
    ...
});

更新 app/view/user/List.js

Ext.define('AM.view.user.List' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.userlist',
 
    //we no longer define the Users store in the `initComponent` method
    store: 'Users',
 
    ...
});

作者：oscar999 发表于2013-7-7 16:28:54 原文链接

阅读：0 评论：0 查看评论

[Ext JS 4] MVC 应用程序框架

- - CSDN博客Web前端推荐文章

大型客户端应用程序总是很难编写，很难组织和很难维护. 随着功能的增加和更多的开发人员加入项目，对项目的控制也越来越困难了. Ext JS 4 提供了一个新的应用程序框架帮助组织代码. 模型 - 一组栏位和数据的集合. Model （在Ext JS 3中使用Record class）. 视图 - 组件类型, grids,trees 和 panels 都是属于试图.

Ext文件系统

- Haides - 博客园-首页原创精华区

　　虽然从Ext2到Ext4，找数据的方式发生了变化，但是，磁盘的布局还是非常相似的. 其实这个东西也不需要变化，因为现在也没什么特别巧妙的方式，而且磁盘的吞吐量、效率的瓶颈也不在这里. 当然，这里排除那些根据自身文件特点设计的数据库，毕竟还是为了支持通用文件. 　　Boot在第一个块，放的应该是引导程序，超级块就放在了第二个块上，如果不是可以在mount的时候通过参数sb来设置.

MVC演化史

- huige - 火丁笔记

Martin Fowler在他所写的《企业应用架构模式》一书中感慨道：MVC已经成为我们最常误用的模式. 人们之所以常常误用MVC，很大程度上是因为混淆了不同的MVC变体. 大概上世纪七十年代，Xerox PARC的Trygve提出了MVC的概念，并应用在Smalltalk系统中，为了和其它类型的MVC加以区分，历史上习惯的称之为Classic MVC.

Web层面的框架学习了三个Struts1和2，SpringMVC，那他们之间肯定存在一个优劣和适用的环境，Struts1和2的异同点我已经做过对比《 Struts1和Struts2》，这篇将对比下Struts2和SpringMVC的异同，下面数据基本来源于网络，本人是搜集整理所得，供大家参考. 一个项目使用什么样的技术，决定的因素很多，我所能想到的有：对系统的性能、开发的效率、团队学习的成本、业务场景等，下面尽量从这几个方面入手，来分析比较下他们之间存在的优劣.

(转）使用mysqladmin ext了解MySQL运行状态

- - jackyrong

mysqladmin是MySQL一个重要的客户端，最常见的是使用它来关闭数据库，除此，该命令还可以了解MySQL运行状态、进程信息、进程杀死等. 本文介绍一下如何使用mysqladmin extended-status(因为没有"歧义"，所以可以使用ext代替)了解MySQL的运行状态. 使用mysqladmin extended-status命令可以获得所有MySQL性能指标，即show global status的输出，不过，因为多数这些指标都是累计值，如果想了解当前的状态，则需要进行一次差值计算，这就是mysqladmin extended-status的一个额外功能，非常实用.

最佳MVC实践

- - CSDN博客架构设计推荐文章

原文地址 http://www.yiiframework.com/doc/guide/1.1/zh_cn/basics.best-practices 最佳MVC实践(Best MVC Practices). Although Model-View-Controller (MVC) is known by nearly every Web developer, how to properly use MVC in real application development still eludes many people.

[Ext JS 4] MVC 应用程序框架

前言

文件结构

在app.js 中创建应用

定义一个控制器

定义一个视图

控制网格

创建Model 和 Store

相关 [ext js mvc] 推荐：

[Ext JS 4] MVC 应用程序框架

Ext文件系统

MVC演化史

Spring MVC 和 Struts2

(转）使用mysqladmin ext了解MySQL运行状态

最佳MVC实践

srping mvc RequestMapping实现

WebView JS 交互

MVC就是个选择题

表现层模式-MVC

相关文章

订阅