【转】EXT JS MVC开发模式
原文链接:EXT JS MVC开发模式
在app(亦即根目录)文件夹下面创建controller、model、store和view文件夹,从名称上就知道他们该放置什么代码了吧。然后创建Application.js作为我们程序的入口文件,并在mvc.html中引用Application.js文件。
目录结构
-->app(根目录)
------>controller
------>model
------>store
------>view
------>application.js(与controller等同级目录)
创建model(实体类)
在model文件夹下面,创建user.js文件
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'name', type: 'string' },
{ name: 'age', type: 'int' },
{ name: 'phone', type: 'string' }
]
});
创建store
虽然store不是mvc中必须的步骤,但是作为数据仓库,store起到了数据存取的作用,grid、form等展现的数据都是通过store来提供的,因此store在extjs mvc开发模式中是必不可少的
//app/store/user.js 的代码如下
Ext.define("MyApp.store.User", {
extend: "Ext.data.Store",
model: "MyApp.model.User",
data: [
{ name: "Tom", age: 5, phone: "123456" },
{ name: "Jerry", age: 3, phone: "654321" }
]
});
创建view
为了实现列表和编辑功能,我们需要两个视图,分别是list和edit,那么view的结构如下:
app/view/user/List.js 对应我们的grid的定义,只不过将创建grid的实例改成了创建grid的扩展。
//app/view/user/List.js 代码如下:
Ext.define("MyApp.view.user.List", {
extend: "Ext.grid.Panel",
alias: 'widget.userlist',
store: "User",
initComponent: function () {
this.columns = [
{ text: '姓名', dataIndex: 'name' },
{ text: '年龄', dataIndex: 'age', xtype: 'numbercolumn', format: '0' },
{ text: '电话', dataIndex: 'phone' }
];
this.callParent(arguments);
}
});
//app/view/user/edit.js 代码如下:
Ext.define("MyApp.view.user.Edit", {
extend: "Ext.window.Window",
alias: "widget.useredit",
title: "编辑用户",
width: 300,
height: 200,
layout: "fit",
items: {
xtype: "form",
margin: 5,
border: false,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 60
},
items: [
{ xtype: "textfield", name: "name", fieldLabel: "姓名" },
{ xtype: "numberfield", name: "age", fieldLabel: "年龄" },
{ xtype: "textfield", name: "phone", fieldLabel: "电话" }
]
},
buttons: [
{ text: "保存", action: "save" }
]
});
主入口
Ext.application({
name: "MyApp",
appFolder: 'app',
controllers: ["User"],
autoCreateViewport: true,
launch: function () {
// 页面加载完成之后执行
}
});
说明:
● name: 应用程序名称
● appFolder:应用程序代码的目录,用来进行动态加载代码的
● controllers: 应用程序使用到的控制器
● autoCreateViewport:是否自动创建Viewport,默认为false,我们这里设置为true,当它被设置为true的时候,应用程序会自动创建Viewport,这个Viewport的定义在我们的app/view/viewport.js 中;如果为false的时候,我们需要在launch中手动创建相应的视图。
【转】EXT JS MVC开发模式的更多相关文章
- ext.js的mvc开发模式详解
ext.js的mvc开发模式详解和环境配置 在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开 ...
- Extjs MVC开发模式详解
Extjs MVC开发模式详解 在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开发模式, ...
- Extjs 6 MVC开发模式(二)
1.Extjs MVC开发模式 在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs4.x版本中引入了MVC开发模式,开始将 ...
- Ext JS 6开发实例(一)
很久没写文章了,主要原因和大家差不多,都要为生活奔忙,搞了两个小项目.这两个小项目很凑巧,都可以使用Ext JS来开发,这正是练习使用Ext JS 6的好机会,自然不会错过. 很多读者可能会问,为什么 ...
- jsp&mvc开发模式&jstl标签&三层架构
目录 jsp 概念 原理 jsp 的脚本 jsp的内置对象 指令 注释 mvc:开发模式 jsp演变历史 mvc 优缺点 El表达式 JSTL 标签 练习 三层架构:软件设计架构 案例:用户信息列表展 ...
- MVC开发模式下的用户角色权限控制
前提: MVC开发模式 大概思想: 1.在MVC开发模式下,每个功能都对应着不同的控制器或操作方法名(如修改密码功能可能对应着User/changepd),把每个功能对应的控制器名和操作方法名存到数据 ...
- MVC开发模式之Servlet+jsp+javaBean
Servlet+jsp+JavaBean组合开发是一种MVC开发模式,控制器Controller采用Servlet.模型Model采用JavaBean.视图View采用JSP. 1.Web开发的请求- ...
- 什么是MVC开发模式以及它和传统开发模式的区别
Model1模式:使用纯JSP或者JSP+JavaBean开发,存在如下缺陷:JSP页面中混合了HTML和JAVA代码,从而给代码的开发和阅读带 来了麻烦:系统后期维护和扩展非常困难,例如在JSP页面 ...
- MVC开发模式简述
了解MVC开发模式,首先我们要了解一下发展趋势 一.什么是软件设计 Jack W.Reeves 于14年前(1992年),就在其撰写的论文——<What is Software Design&g ...
随机推荐
- MSSQLSERVER数据库- 获取月份的第一天和最后一天
本月第一天:select dateadd(dd,-day(getdate())+1,getdate()) 本月最后一天:select dateadd(dd,-day(getdate()),datead ...
- JAVA自动生成正则表达式工具类
经过很久的努力,终于完成了JAVA自动生成正则表达式工具类.还记得之前需要正则,老是从网上找吗?找了想修改也不会修改.现在不用再为此烦恼了,使用此生成类轻松搞定所有正则表达式.赶快在同事面前炫一下吧. ...
- 亿级数据时,内存性能低于IO性能
最近因项目需要,需要生成有0到99999999共1亿的不重复数,于是想着直接将这些数据生成为一个文件就可以了,代码如. private void generate(string savePath) { ...
- QT下自定义QQ聊天窗口tab控件
1.用继承pushbutton派生类来实现tab按钮,里面加一个QPushbutton关闭按钮:(自定义类:CCustomTabButton) 2.多个tab按钮用QHboxLayout做容器: 3. ...
- MySQL参数优化
目前针对MySQL数据库进行了一些参数优化,具体如下: my.ini / my.cnf 参数说明 #使用查询缓存 query_cache_size=100M # ...
- Java反编译器安装及各版本介绍
JAVA语言是1995年5月由SUN公司发布的,由于其安全性高.代码优化.跨平台等特性,迅速取代了很多传统高级语言,占据了企业级网络应用开发等诸多领域的霸主地位. 不过,JAVA最突出 ...
- [Webpack 2] Use Karma for Unit Testing with Webpack
When writing tests run by Karma for an application that’s bundled with webpack, it’s easiest to inte ...
- *.pro、*.pri、*.prf、*.prl等四种文件
尽管每次和cmake对比起来,我们总是说 qmake 简单.功能少.但是qmake仍然是一个非常复杂的东西,我想大多人应该和我一样吧: 不是太清楚CONFIG等变量到底如何起作用的 用过的qmak ...
- 可拖拽重排的CollectionView
来源:wazrx 链接:http://www.jianshu.com/p/8f0153ce17f9 写在前面 这段时间都在忙新项目的事儿,没有时间倒腾,这两天闲下来,想着一直没有细细的研究Collec ...
- Nginx高性能服务器安装、配置、运维 (3) —— Nginx配置详解
四.Nginx 配置详解 YUM方式安装的Nginx默认配置文件放在/etc/nginx目录下,使用Vim编辑/etc/nginx/nginx.conf: ---------------------- ...