关于一个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
分享到:
相关推荐
ExtJS4.0 MVC 实现详解 ExtJS 是一个基于 JavaScript 的富客户端应用框架,它提供了丰富的组件库和强大的数据管理能力。在 ExtJS 4.0 中,引入了 Model-View-Controller(MVC)架构模式,这是一种设计模式,用于...
4. **视图控制器(ViewController)**:在ExtJS 4.0.7中,除了传统的控制器外,还引入了视图控制器的概念。视图控制器更加专注于单一视图的逻辑,使得代码更易于管理和测试。 5. **应用(Application)**:整个应用...
一、《Extjs4 MVC详解.doc》 这份文档详细阐述了ExtJS4.0中的MVC架构,包括Controller、Model、Store、View和ViewPort等关键组件的使用。Controller是MVC的心脏,负责协调Model、View和Store之间的交互,通过事件...
在ExtJS 4中,MVC(Model-View-Controller)设计模式是其核心架构,用于组织和管理应用程序的逻辑。这个官方实例集是ExtJS 4 MVC模式的一个完整展示,旨在帮助开发者理解并掌握如何使用MVC进行开发。 **MVC模式详解...
在本工程中,我们将深入探讨ExtJS 4.0的MVC模式,以及如何通过controller、view、model和store来构建应用。 **1. MVC模式** MVC模式是一种软件设计模式,将应用程序分为三个主要组件:模型(Model)、视图(View)...
### Extjs 4.2.0 MVC 架构详解及官方文档中文示例 #### 一、文件结构 在Extjs 4.2.0中,为了更好地组织和管理代码,采用了一种标准的文件结构。这种结构不仅有助于提高代码的可读性和可维护性,还能确保团队成员...
《ExtJS4 MVC后台管理程序实现详解》 ExtJS是一个强大的JavaScript前端框架,它提供了丰富的组件库和MVC(Model-View-Controller)设计模式,用于构建复杂的Web应用程序,特别是后台管理系统。本篇将深入探讨如何...
#### 四、ExtJS MVC模式详解 ExtJS的MVC模式主要包括三个核心部分:模型(Model)、视图(View)和控制器(Controller)。 - **模型(Model)**: 负责数据的管理和业务逻辑处理。 - **视图(View)**: 展示数据,...
1. MVC模式详解: - Model(模型):负责存储和管理应用程序的数据,通常与后台数据库进行交互。 - View(视图):显示数据并响应用户交互,它与Model保持同步,当Model的数据改变时,View会自动更新。 - ...
1. **MVC模式详解** - **模型(Model)**:模型层负责管理应用程序的数据和业务逻辑。在ExtJS中,模型类通常继承自`Ext.data.Model`,用于定义数据字段和关联规则。 - **视图(View)**:视图层是用户看到和与之交互的...
**ExtJs+ASP.NET MVC 实例详解** 在现代Web应用开发中,前端界面的交互性和动态性变得越来越重要。`ExtJs`是一个强大的JavaScript框架,它提供了丰富的组件库和强大的数据管理功能,使得构建复杂的用户界面变得简单...
### Extjs4之MVC应用架构详解 #### 一、MVC模式介绍 MVC(Model-View-Controller)模式是一种软件设计模式,用于将应用程序的业务逻辑、数据表示和用户交互分离,使得应用程序更加模块化,易于维护和扩展。在ExtJS...
MVC模式详解** Model(模型):负责处理应用程序的数据逻辑,与后端服务器进行交互,获取和存储数据。在ExtJS中,模型类通常继承自`Ext.data.Model`,用于定义数据字段和行为。 View(视图):视图层负责展示数据...
【ExtJS 4 MVC架构详解】 在开发复杂的富客户端应用程序时,管理代码的组织和维护是一项挑战。ExtJS 4引入了一种全新的应用结构,基于MVC(Model-View-Controller)模式,以解决这些问题。MVC是一种设计模式,它将...
【标题】:“asp.net+MVC+Extjs 考试管理系统”是一个基于这些技术构建的在线考试平台,旨在提供自动化试卷生成的功能。 【描述】:这个系统利用asp.net作为后端开发框架,MVC(Model-View-Controller)模式为架构...
**ExtJS MVC模式详解:** ExtJS的MVC模式是一种分层架构,用于组织和管理应用的组件、数据和逻辑。主要分为Model(模型)、View(视图)、Controller(控制器)三个部分: 1. Model:负责数据的存储和操作,与后台...
**MVC模式详解** MVC模式由三个核心部分组成: 1. **Model(模型)**:模型代表应用程序的核心业务逻辑和数据。在EXTJS中,模型通常用来定义数据结构和操作数据的方法,与后端服务进行数据交互。 2. **View(视图...
**标题:“Django1.6与ExtJS4整合”** **描述:** 本文将深入探讨如何将Django 1.6这一Python的Web框架与ExtJS 4这一强大的JavaScript前端框架进行集成,以构建功能丰富的Web应用。Django以其优秀的MVT(Model-View...
**MVC+Extjs 架构WebMis自动生成实例** 在现代Web开发中,MVC(Model-View-Controller)模式、ExtJS框架以及WebMis系统设计是关键组成部分。本实例将深入探讨如何利用这些技术构建高效、可维护的Web应用。 **一、...