`
czpae86
  • 浏览: 720067 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

Extjs4 MVC详解

阅读更多

关于一个ext4MVC的例子,代码中有相关注释;

详细见附件(是一个myEclipse项目)

 

本人在使用中的感受:

如果我们这样分层了,有利于组件重用,软件开发和维护,但学习成本很高,要新人接受需要一段时间,在开发中要按照一定规范.

建议不要随便使用这样分层!

 

每一层的介绍:

1,model和store其实就是管数据的,

2,view层,纯界面,极少逻辑代码,逻辑代码都写到controller中,这样好管理.

3,controller,建议逻辑代码都写到这里,这样好管理.

 

关于文件夹名称:

注意文件夹起名controller/model/store/view文件夹名称一定的,

这样每个相应的类名也可以根据这个来取,如:"keel.view.goods.GoodsListView"

keel是整个应用程序的命名空间,view就是view文件夹,goods.GoodsListView就是view文件夹下的goods文件夹的

GoodsListView.js文件;

这样程序就可以用动态加载功能了;

 

controller介绍:

其实我们很大一部分工作就在controller了,例子代码如下:

 

/*
商品控制层,
所有逻辑代码都在这里写
*/
Ext.define('keel.controller.GoodsCtrl', {
    extend: 'Ext.app.Controller',
    stores: ['GoodsStore'],//声明该控制层要用到的store
    models: ['GoodsModel'],//声明该控制层要用到的model
    views: ['goods.GoodsListView','goods.GoodsWinView'],//声明该控制层要用到的view
    refs: [//相当于一个映射,这样就可以在控制层方便的通过geter取得相应的对象了
        {
            ref: 'goodslistview',
            selector: 'goodslistview'
        },
        {
            ref: 'goodswinview',
            selector: 'goodswinview'
        }
    ],
    init: function() {
        this.control({//这里的this相当于这个控制层
            'viewport > goodslistview': {
                afterrender: function(gp){//侦听goodslistview渲染
                	gp.down('button[action=testBtn1]').on('click',function(){
                		//侦听goodslistview工具条上action=testBtn1的按钮单击事件
                		this.showWin();
                	},this);
                	
                	gp.down('button[action=testBtn2]').on('click',function(){
                		//侦听goodslistview工具条上action=testBtn2的按钮单击事件
                		alert(this.getGoodslistview().title)
                	},this);
                }
            },
            'goodswinview button[action=ok]': {
            	//侦听goodswinview中action=ok的按钮单击事件
                click: function(){
                	this.getGoodswinview().setTitle(Ext.util.Format.date(new Date(),'Y-m-d H:i:s'));
                }
            }
        });
    },
    showWin : function(){
    	Ext.create('keel.view.goods.GoodsWinView').show();    	
    }
});
 

 

  • 大小: 29.3 KB
分享到:
评论
4 楼 zhaizhisheng 2013-06-14  
你好请问,在Controller中怎么捕获Ext.button.Split 的菜单(Menu)的单击事件,谢谢了
3 楼 chengbyd 2012-12-24  
lsuper 写道
你好
为什么我用Eclipse写的运行起来中文是乱码啊

编码设置UTF-8格式应该不会乱码了
2 楼 lsuper 2012-12-24  
你好
为什么我用Eclipse写的运行起来中文是乱码啊
1 楼 hongfengwbw 2011-12-29  
谢谢博主的例子,根据例子基本明白了ExtJS4的APP特性。
询问博主一个问题:app下面还可以包含app吗?
那么这种app的方式也就放弃了OPOA的方式了,是吗?

相关推荐

    extjs4MVC实现

    ExtJS4.0 MVC 实现详解 ExtJS 是一个基于 JavaScript 的富客户端应用框架,它提供了丰富的组件库和强大的数据管理能力。在 ExtJS 4.0 中,引入了 Model-View-Controller(MVC)架构模式,这是一种设计模式,用于...

    ExtJS的MVC模式

    4. **视图控制器(ViewController)**:在ExtJS 4.0.7中,除了传统的控制器外,还引入了视图控制器的概念。视图控制器更加专注于单一视图的逻辑,使得代码更易于管理和测试。 5. **应用(Application)**:整个应用...

    ExtJS4.0 MVC 学习资料集合

    一、《Extjs4 MVC详解.doc》 这份文档详细阐述了ExtJS4.0中的MVC架构,包括Controller、Model、Store、View和ViewPort等关键组件的使用。Controller是MVC的心脏,负责协调Model、View和Store之间的交互,通过事件...

    Extjs4 MVC 官方实例整合 未改动 未删减 部署即可运行

    在ExtJS 4中,MVC(Model-View-Controller)设计模式是其核心架构,用于组织和管理应用程序的逻辑。这个官方实例集是ExtJS 4 MVC模式的一个完整展示,旨在帮助开发者理解并掌握如何使用MVC进行开发。 **MVC模式详解...

    Extjs4.0 mvc模式开发

    在本工程中,我们将深入探讨ExtJS 4.0的MVC模式,以及如何通过controller、view、model和store来构建应用。 **1. MVC模式** MVC模式是一种软件设计模式,将应用程序分为三个主要组件:模型(Model)、视图(View)...

    Extjs 4.2.0 MVC 架构 官方文档例子中文

    ### Extjs 4.2.0 MVC 架构详解及官方文档中文示例 #### 一、文件结构 在Extjs 4.2.0中,为了更好地组织和管理代码,采用了一种标准的文件结构。这种结构不仅有助于提高代码的可读性和可维护性,还能确保团队成员...

    Extjs4MVC后台管理程序实现[参照].pdf

    《ExtJS4 MVC后台管理程序实现详解》 ExtJS是一个强大的JavaScript前端框架,它提供了丰富的组件库和MVC(Model-View-Controller)设计模式,用于构建复杂的Web应用程序,特别是后台管理系统。本篇将深入探讨如何...

    ExtJS_MVC框架的搭建实例

    #### 四、ExtJS MVC模式详解 ExtJS的MVC模式主要包括三个核心部分:模型(Model)、视图(View)和控制器(Controller)。 - **模型(Model)**: 负责数据的管理和业务逻辑处理。 - **视图(View)**: 展示数据,...

    一个ExtJs4.1.1版本MVC应用框架

    1. MVC模式详解: - Model(模型):负责存储和管理应用程序的数据,通常与后台数据库进行交互。 - View(视图):显示数据并响应用户交互,它与Model保持同步,当Model的数据改变时,View会自动更新。 - ...

    [ExtJS] MVC应用架构示例

    1. **MVC模式详解** - **模型(Model)**:模型层负责管理应用程序的数据和业务逻辑。在ExtJS中,模型类通常继承自`Ext.data.Model`,用于定义数据字段和关联规则。 - **视图(View)**:视图层是用户看到和与之交互的...

    ExtJs+ASP.NET MVC实例

    **ExtJs+ASP.NET MVC 实例详解** 在现代Web应用开发中,前端界面的交互性和动态性变得越来越重要。`ExtJs`是一个强大的JavaScript框架,它提供了丰富的组件库和强大的数据管理功能,使得构建复杂的用户界面变得简单...

    Extjs4之MVC应用架构

    ### Extjs4之MVC应用架构详解 #### 一、MVC模式介绍 MVC(Model-View-Controller)模式是一种软件设计模式,用于将应用程序的业务逻辑、数据表示和用户交互分离,使得应用程序更加模块化,易于维护和扩展。在ExtJS...

    ExtJS MVC入门级开发案例

    MVC模式详解** Model(模型):负责处理应用程序的数据逻辑,与后端服务器进行交互,获取和存储数据。在ExtJS中,模型类通常继承自`Ext.data.Model`,用于定义数据字段和行为。 View(视图):视图层负责展示数据...

    ExtJS 4 官方指南:MVC架构

    【ExtJS 4 MVC架构详解】 在开发复杂的富客户端应用程序时,管理代码的组织和维护是一项挑战。ExtJS 4引入了一种全新的应用结构,基于MVC(Model-View-Controller)模式,以解决这些问题。MVC是一种设计模式,它将...

    asp.net+MVC+Extjs 考试管理系统

    【标题】:“asp.net+MVC+Extjs 考试管理系统”是一个基于这些技术构建的在线考试平台,旨在提供自动化试卷生成的功能。 【描述】:这个系统利用asp.net作为后端开发框架,MVC(Model-View-Controller)模式为架构...

    Extjsmvc+ssh源码

    **ExtJS MVC模式详解:** ExtJS的MVC模式是一种分层架构,用于组织和管理应用的组件、数据和逻辑。主要分为Model(模型)、View(视图)、Controller(控制器)三个部分: 1. Model:负责数据的存储和操作,与后台...

    ext4-与-mvc

    **MVC模式详解** MVC模式由三个核心部分组成: 1. **Model(模型)**:模型代表应用程序的核心业务逻辑和数据。在EXTJS中,模型通常用来定义数据结构和操作数据的方法,与后端服务进行数据交互。 2. **View(视图...

    Django1.6与extjs4整合

    **标题:“Django1.6与ExtJS4整合”** **描述:** 本文将深入探讨如何将Django 1.6这一Python的Web框架与ExtJS 4这一强大的JavaScript前端框架进行集成,以构建功能丰富的Web应用。Django以其优秀的MVT(Model-View...

    MVC+Extjs架构WebMis自动生成实例

    **MVC+Extjs 架构WebMis自动生成实例** 在现代Web开发中,MVC(Model-View-Controller)模式、ExtJS框架以及WebMis系统设计是关键组成部分。本实例将深入探讨如何利用这些技术构建高效、可维护的Web应用。 **一、...

Global site tag (gtag.js) - Google Analytics