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

标签: ext js mvc | 发表时间:2013-07-07 08: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: '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);
    }
});
接下来,就是把这个视图加到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: 'ed@sencha.com'},
        {name: 'Tommy', email: 'tommy@sencha.com'}
    ]
});

接下来让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 mvc] 推荐:

[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.

Spring MVC 和 Struts2

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

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

- - jackyrong
mysqladmin是MySQL一个重要的客户端,最常见的是使用它来关闭数据库,除此,该命令还可以了解MySQL运行状态、进程信息、进程杀死等. 本文介绍一下如何使用mysqladmin extended-status(因为没有"歧义",所以可以使用ext代替)了解MySQL的运行状态.

最佳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.

srping mvc RequestMapping实现

- - CSDN博客推荐文章
spring mvc中定义请求的url只需要在方法上添加注解: @RequestMapping("aa.mvc")即可定义访问的url地址,但是你是否有考虑过为什么添加这个注解就可以实现url访问地址的定义了呢. 首先定义注解RequestMapping. mvc中常需要对输入值进行合法性校验,所以也定义了校验的注解MyValid.

WebView JS 交互

- - ITeye博客
WebView加jquery做页面会怎么样呢. // 创建WebView对象. // 把programList添加到js的全局对象window中,. // 这样就可以使用window.programList来获取数据. * 定义js回调java函数. // 绑定键盘的向上,向下按钮事件触发相应的js事件.

MVC就是个选择题

- Dash - Becomin&#39; Charles
由于采用了Web开发框架来开发项目,所以我首次在真正的项目中采用MVC的开发模式. 随着项目的不断深入,我也在不断反思,MVC设计模式到底给项目带来了什么. 听起来都很难听对吗,但是确实如此. 清晰的代码结构,易于维护,易于扩展. 当然,我不是在批判MVC,只是觉得,在使用MVC过程中,还是需要投入更深入的思考,到底怎样才能用好这个设计模式.

表现层模式-MVC

- - 博客园_首页
       在前面简述了从服务层到数据层参见 架构设计目录. 剩下了表现层,一个再好的中间层表现也必须有一个用户界面,提供和用户交互,将用户行为输入转化为系统操作,进入后台逻辑. 在当下RAD(快速应用开发)工具的支持下,我们可以比较快速的完成UI设计,RAD追求所见即所得的快速反馈,快速应用.