Extjs mvc
MVC的模式，模型（Models）和控制器（Controllers）
Model模型 是字段和它们的数据的集合，例如User模型带有username和password字段，模型知道如何持久化自己的数据，并且可以和其他模型关联，模型跟ExtJS 3 中的Record类有点像（区别是，Record只是单纯的扁平结构，而Model可以nest），通常都用在Store中去展示grid和其他组件的数据
View视图 是组件的一种，专注于界面展示 - grid, tree, panel 都是view
Controllers控制器 一个安放所有使你的app正确工作的代码的位置，具体一点应该是所有动作，例如如何渲染view，如何初始化model，和app的其他逻辑
目录结构如下图所示：
index.html 文件如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../resources/css/ext-all.css">
<script type="text/javascript " src="../bootstrap.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>
Ext.app.application
代表整个应用
Ext.container.Viewport
Viewport渲染自身到网页的documet body区域， 并自动将自己调整到适合浏 览器窗口的大小，
在窗口大小发生改变时自动适应大小，
继承于 ：Ext.Component
app.js 文件如下：
Ext.application({
// 动态加载 这个类。
requires: ['Ext.container.Viewport'],
// 这个应用的名字。
name: 'FWY',
// 应用程序的路径
appFolder: 'app',
// 应用程序控制器名称
controllers: ['Students'],
// 页面 装载完成后自动调用。
launch: function () {
Ext.create('Ext.container.Viewport',{
// 布局
layou:'fit',
items: [{
xtype: 'studentlist'
}]
})
}
});
View 定义一个视图。
Ext.define('FWY.view.student.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.studentlist',
store: 'Students',
title: '学生信息列表',
initComponent: function () {
this.columns = [
{header: '编号', dataIndex: 'id', flex:1},
{header: '姓名', dataIndex: 'name', flex:1},
{header: '年龄', dataIndex: 'age', flex:1},
{header: '性别', dataIndex: 'sex', flex:1}
];
this.callParent(arguments);
}
});
创建一个model 文件
Ext.define('FWY.view.student.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.studentlist',
store: 'Students',
title: '学生信息列表',
initComponent: function () {
this.columns = [
{header: '编号', dataIndex: 'id', flex:1},
{header: '姓名', dataIndex: 'name', flex:1},
{header: '年龄', dataIndex: 'age', flex:1},
{header: '性别', dataIndex: 'sex', flex:1}
];
this.callParent(arguments);
}
});
controller 层 创建文件
Ext.define('FWY.controller.Students', {
extend: 'Ext.app.Controller',
views: [
'student.List',
'student.Edit'
],
stores: ['Students'],
models: ['Students'],
init: function () {
this.control({
'studentlist': {
itemdblclick: this.editStudent
},
'studentedit button[action = save]' : {
click: this.updateStudent
}
});
},
onPanelRendered:function() {
console.log("panel rendered!");
},
updateStudent: function(button) {
// 获取window 下面的 下面的 按钮， 提交。
var win = button.up('window'),
form = win.down('form'),
record = form.getReader()
},
editStudent: function (grid,record) {
// 通过别名获得这个组件
var view = Ext.widget('studentedit');
// 这个对象向下查找 form 组件,自动赋值
view.down('form').loadRecord(record);
}
});
store 创建文件。
Ext.define('FWY.store.Students',{
extend: 'Ext.data.Store',
model:'FWY.model.Students',
data: [
{id:1,name:'zhangsan', age:18,sex:'boy'},
{id:2,name:'lisi', age:20,sex:'gril'}
]
});
Extjs mvc的更多相关文章
- Extjs MVC学习随笔01
Extjs Mvc模式下的整个MVC框架体系即下图: 包含了Controller(实现方法层),Store(数据来源管理层),View(页面布局层).之所以用MVC我想是因为减轻针对某一页面的单一的J ...
- Extjs MVC开发模式详解
Extjs MVC开发模式详解 在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开发模式, ...
- ExtJS MVC学习手记 2
开发环境 eclipse(indigo) ExtJS4.0 开发目标 使用store.model和controller创建菜单树 开发步骤 之前我们已经建立了一个MVC的项目框架.现在要做的就是在这个 ...
- ExtJS MVC学习手记 1
开发环境: ExtJS4.2 eclipse indigo 开发目标 搭建项目框架,创建viewport 开发步骤说明 这次主要使用extjs4的mvc模式创建viewport.籍此初步了解mvc模 ...
- ExtJS MVC学习手记
开始学习ExtJS的MVC了.这篇文章仅是用来做一个目录,为自己这个阶段的学习内容做个索引. 手记涉及的文章: EXTJS MVC结构(译自ExtJS4.0文档中的<MVC Architectu ...
- Extjs MVC模式开发，循序渐进（一）
本文讲述extjs mvc的Helloworld,tabPanel,event,页面布局layout等内容. 本页包含:MVC模式案例(一)~MVC模式案例(六),从搭建extjs mvc到点击按钮生 ...
- ExtJS MVC结构
概述 大型的应用在开发和运维上都存在着困难.应用功能的调整和开发人员的调动都会影响对项目的掌控.ExtJS4带来了一种新的应用结构.这种结构不止用于组织代码,也能有效的减少必要的代码量. 这次ExtJ ...
- Flux和ExtJS MVC框架的异同点介绍
Flux是Facebook在现有MVC框架数据流动复杂,难以设计和维护大型的前端应用的情况下设计的一种新的数据架构协议.叫做协议是因为Flux本身就像MVC一样,规定了一种机制,但是Facebook提 ...
- Extjs MVC模式
最近在学习Extjs,发现他可以使用MVC模式,不但可以组织代码,而且可以 减少实现的内容,模型(Models)和控制器(Controllers)也被引入其中. Model模型是字段和它们的数据的集合 ...
随机推荐
- pip安装icu失败：Command "python setup.py egg_info" failed with error code 1 in
问题 Mac 下通过 pip 安装 icu 失败. 解决办法及原因 问题的原因是因为icu库中的某一行代码找不到一个文件,获取不到ICU_VERSION的值. # Install icu brew i ...
- Selenium2+Python：Webdriver API速记手册
由于web自动化常常需要控制浏览器行为和操作页面元素,相关函数又比较多,于是再此记下一份Webdriver API查阅文档以备不时之需. 参考:虫师<Selenium2自动化测试实战>,和 ...
- 笔记-Python基础教程（第二版）第一章
第一章 快速改造:基础知识 01:整除.乘方 (Python3.0之前 如2.7版本) >>> 1/2 ==>0 1/2整除,普通除法: 解决办法1: 1.0/2.0 ==& ...
- C++指针与const
在C++中,const修饰符一般用于修饰常量.常量在定义的时候必须初始化,而且值一旦定义之后就不能修改,这样就能保证常量的值在程序运行过程中不会发生变换. 1.指向const对象的指针 指向const ...
- 移动硬盘/U盘装Windows 7旗舰版（VHD版）
真正的移动版WIN7,在移动硬盘/U盘上运行的WIN7 工具准备 - 联想Y450本本,已安装Windows 7旗舰版(或者WINPE3.0版),用来给移动WIN7做引导 -Win7.vhd,15G, ...
- spark RDD编程，scala版本
1.RDD介绍: RDD,弹性分布式数据集,即分布式的元素集合.在spark中,对所有数据的操作不外乎是创建RDD.转化已有的RDD以及调用RDD操作进行求值.在这一切的背后,Spark会自动 ...
- ANT风格URL规则
转: 我们在看Java技术书籍的过程中,当加载文件时总会遇到是否支持ant风格路径加载,这里说的ant风格是什么意思呢,今天我查了一下,明白了什么意思,现在总结一下 ANT通配符有三种: 通配符 说明 ...
- 几个获取Windows系统信息的Delphi程序
1.获取windows版本信息 可以通过Windows API函数GetVersionEx来获得. 具体程序如下: Procedure Tform1.Button1Click(sender:TObje ...
- 解决Apache的错误日志巨大的问题以及关闭Apache web日志记录
调整错误日志的级别 这几天 apache错误日志巨大 莫名其妙的30G 而且 很多都是那种页面不存在的 网站太多了 死链接相应的也很多于是把错误警告调低了 因为写日志会给系统带来很大的损耗.关闭 ...
- thinkphp 3.2 模型的使用示例
原来以为thinkPHP的 model 就和PHPCMS一样 就起到一个连接数据库的作用,今天看了视频,才发现这个也是 mvc中的m 使用方法可以使用 D() 方法 下面是 UserControll ...