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的更多相关文章

  1. Extjs MVC学习随笔01

    Extjs Mvc模式下的整个MVC框架体系即下图: 包含了Controller(实现方法层),Store(数据来源管理层),View(页面布局层).之所以用MVC我想是因为减轻针对某一页面的单一的J ...

  2. Extjs MVC开发模式详解

    Extjs MVC开发模式详解   在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开发模式, ...

  3. ExtJS MVC学习手记 2

    开发环境 eclipse(indigo) ExtJS4.0 开发目标 使用store.model和controller创建菜单树 开发步骤 之前我们已经建立了一个MVC的项目框架.现在要做的就是在这个 ...

  4. ExtJS MVC学习手记 1

    开发环境: ExtJS4.2 eclipse indigo 开发目标  搭建项目框架,创建viewport 开发步骤说明 这次主要使用extjs4的mvc模式创建viewport.籍此初步了解mvc模 ...

  5. ExtJS MVC学习手记

    开始学习ExtJS的MVC了.这篇文章仅是用来做一个目录,为自己这个阶段的学习内容做个索引. 手记涉及的文章: EXTJS MVC结构(译自ExtJS4.0文档中的<MVC Architectu ...

  6. Extjs MVC模式开发，循序渐进（一）

    本文讲述extjs mvc的Helloworld,tabPanel,event,页面布局layout等内容. 本页包含:MVC模式案例(一)~MVC模式案例(六),从搭建extjs mvc到点击按钮生 ...

  7. ExtJS MVC结构

    概述 大型的应用在开发和运维上都存在着困难.应用功能的调整和开发人员的调动都会影响对项目的掌控.ExtJS4带来了一种新的应用结构.这种结构不止用于组织代码,也能有效的减少必要的代码量. 这次ExtJ ...

  8. Flux和ExtJS MVC框架的异同点介绍

    Flux是Facebook在现有MVC框架数据流动复杂,难以设计和维护大型的前端应用的情况下设计的一种新的数据架构协议.叫做协议是因为Flux本身就像MVC一样,规定了一种机制,但是Facebook提 ...

  9. Extjs MVC模式

    最近在学习Extjs,发现他可以使用MVC模式,不但可以组织代码,而且可以 减少实现的内容,模型(Models)和控制器(Controllers)也被引入其中. Model模型是字段和它们的数据的集合 ...

随机推荐

  1. 浅谈一个网页打开的全过程（涉及DNS、CDN、Nginx负载均衡等）

    1.概要 从用户在浏览器输入域名开始,到web页面加载完毕,这是一个说复杂不复杂,说简单不简单的过程,下文暂且把这个过程称作网页加载过程.下面我将依靠自己的经验,总结一下整个过程.如有错漏,欢迎指正. ...

  2. IOS开发－UI学习－沙盒机制&文件操作

    ž苹果为软件的运行提供了一个沙盒机制 每个沙盒含有3个文件夹:Documents, Library 和 tmp.因为应用的沙盒机制,应用只能在几个目录下读写文件 žDocuments:苹果建议将程序中 ...

  3. Django form模块使用心得

    最近用Django 写了一个网站,现在来分享一下对Django form 的一些心得. 一,创建一个表单 创建一个Form表单有两种方式: 第一种方式是继承于forms.Form,的一个子类,通过在f ...

  4. make 要点简记

    make 要点简记 1.隐式推导 make可以自动推导文件及其文件依赖关系后面的命令,所以我们没有必要在每一个.o文件后面都写上类似的命令,因为make 会自动识别并且自动推导命令. objects ...

  5. 把windows的bat用好了，也很不错

    taskkill /f /t /im nginx.exe cp2nginx xcopy /e /i /y “D:\workspace\workspace1\aff\WebContent” “D:\ng ...

  6. centos5.5 Apache2 Web 服务器的安装

    # vi /etc/httpd/conf/httpd.conf 把以下虚拟机的配置加在 httpd.conf  文件末尾即可 NameVirtualHost *:80               // ...

  7. Newman的 power law 参数估计的程序matlab（转载）

    转自:http://blog.sciencenet.cn/blog-4716-46173.html 对于幂率分布的估计问题是个很复杂的问题(..., the empirical detection a ...

  8. MySQL5.6多实例部署

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://suifu.blog.51cto.com/9167728/1850560 无论是迫 ...

  9. SecureCRT 使用

    1. 连接linux 服务器 http://www.cnblogs.com/SimonGao/p/4959274.html

  10. MySQL in不走索引

    优化前 SELECT*  FROM erp_helei mg WHERE mg.num = 602   AND mg.pid   IN   (10002559,10002561,10002562,10 ...