ExtJS MVC学习手记 1
开发环境：
ExtJS4.2
eclipse indigo
开发目标
搭建项目框架，创建viewport
开发步骤说明
这次主要使用extjs4的mvc模式创建viewport。籍此初步了解mvc模式的结构。
下图为项目结构：
重点是app的目录结构：
其中controller、model、store、view一般来说是必须存在的目录。
app.js是应用的引导页。需要在首页中显式调用。
如下是index.jsp的代码：
1: <%@ page language="java" pageEncoding="utf-8"%>
2: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
3: <html>
4: <head>
5: <title>ExtJs MVC 演示</title>
6: <link rel="stylesheet" type="text/css" href="./extjs/resources/css/ext-all.css" />
7: <link rel="stylesheet" type="text/css" href="./theme/theme.css" />
8: </head>
9: <body>
10: <script type="text/javascript" src="./extjs/ext-all-debug.js"></script>
11: <script type="text/javascript" src="./extjs/locale/ext-lang-zh_CN.js"></script>
12: <script type="text/javascript" src="./app/app.js"></script>
13: </body>
14: </html>
在index.jsp中调用了app.js页。app.js页的代码：
1: Ext.application({
2: name: 'zero',
3: controllers:[],
4: autoCreateViewport: true
5: });
目前app.js内容很简单。简要说下涉及到的3个属性：
name： 应用名称（这里使用了项目名，也可自定义，比如“ZE“，但注意不要使用敏感词），也是view、contoller、model、store的命名空间；
controller： 控制器，暂未使用，后期使用再行说明；
autoCreateViewport : 默认值是false，此时需要显示的创建viewport。值为true时，会自动调用”命名空间.view.Viewport“类。项目中这个类一般定义在app/view/Viewport.js中。
Viewport.js文件内容如下：
1: Ext.define('zero.view.Viewport', {
2: extend: 'Ext.container.Viewport',
3:
4: requires: [],
5:
6: layout: 'border',
7:
8: items: [{
9: region: 'north',
10: height: 64
11: },{
12: region: 'center'
13: }, {
14: region: 'west',
15: width: 225
16: }]
17: });
目前app中完整的目录结构是这样的：
如下是运行结果：
参考说明：
参考了extjs4.0文档中的两个类：
- Ext类的application方法
- Ext.app.Application
ExtJS MVC学习手记 1的更多相关文章
- ExtJS MVC学习手记
开始学习ExtJS的MVC了.这篇文章仅是用来做一个目录,为自己这个阶段的学习内容做个索引. 手记涉及的文章: EXTJS MVC结构(译自ExtJS4.0文档中的<MVC Architectu ...
- ExtJS MVC 学习手记3
在演示应用中,我们已经创建好了viewport,并为之添加了一个菜单树.但也仅仅是这样,点击树或应用的其他地方获得不到任何响应.这个演示应用还是一个死的应用. 接下来,我们让这个应用活起来. 首先,给 ...
- ExtJS MVC学习手记 2
开发环境 eclipse(indigo) ExtJS4.0 开发目标 使用store.model和controller创建菜单树 开发步骤 之前我们已经建立了一个MVC的项目框架.现在要做的就是在这个 ...
- Extjs MVC学习随笔01
Extjs Mvc模式下的整个MVC框架体系即下图: 包含了Controller(实现方法层),Store(数据来源管理层),View(页面布局层).之所以用MVC我想是因为减轻针对某一页面的单一的J ...
- Linux.NET学习手记（7）
前一篇中,我们简单的讲述了下如何在Linux.NET中部署第一个ASP.NET MVC 5.0的程序.而目前微软已经提出OWIN并致力于发展VNext,接下来系列中,我们将会向OWIN方向转战. 早在 ...
- Linux.NET学习手记（8）
上一回合中,我们讲解了Linux.NET面对OWIN需要做出的准备,以及介绍了如何将两个支持OWIN协议的框架:SignalR以及NancyFX以OwinHost的方式部署到Linux.NET当中.这 ...
- EF框架学习手记
转载: [ASP.NET MVC]: - EF框架学习手记 1.EF(Entity Framework)实体框架EF是ADO.NET中的一组支持开发面向数据的软件应用程序的技术,是微软的一个ORM框架 ...
- Extjs MVC模式开发，循序渐进（一）
本文讲述extjs mvc的Helloworld,tabPanel,event,页面布局layout等内容. 本页包含:MVC模式案例(一)~MVC模式案例(六),从搭建extjs mvc到点击按钮生 ...
- .NET MVC 学习笔记（二）— Bootstrap框架
二..NET MVC 学习笔记(一)—— Bootstrap框架 在实际开发过程中,页面的样式问题是让人很头疼的问题,良好的用户界面可以大大提高用户体检,而在你没有前端开发人员的火力支援情况下,并不是 ...
随机推荐
- js日期的写法，获取girdviw的行数、提示信息、验证数量信息
//制订日期(js日期的写法) var myDate = new Date(); var theDate = myDate.toLocaleDateString(); //获取今天的日期 //获取控 ...
- iptable软路由
http://xstarcd.github.io/wiki/Linux/iptables_forward_internetshare.html # 默认丢弃转发,所有内网流量不能访问外网卡 iptab ...
- Struts2使用ModelDriven后JSON数据返回不正确
在struts.xml中加入<param name="root">action</param> <result name="exist&qu ...
- 4种kill某个用户所有进程的方法
在linux系统管理中,我们有时候需要kill掉某个用户的所有进程,初学者一般先查询出用户的所有pid,然后一条条kill掉,或者写好一个脚本,实际上方法都有现成的,这边有4种方法,我们以kill用户 ...
- Android WebRTC 音视频开发总结（四）-- webrtc传输模块
在介绍WebRTC通讯之前我们先来看一个P2P视频聊天包括的主要过程,转载请说明出处(博客园RTC.Blacker): 音视频数据采集->编码->发送->接收->解码-> ...
- centos6.5下yum安装lnmp(适合刚入职的新手的方法)
新入职的员工,开始的时候都是让配环境,本地写代码用的wamp,在lnmp或lamp测试,除非有些土豪公司 用的是(果机). 另外安装时,把整个流程在脑子里先过一篇(记不全也没关系,一回生二回熟),重在 ...
- chrome调试学习
参考:http://ued.taobao.com/blog/2012/06/debug-with-chrome-dev-tool/ http://guoshuang.com/frontend/chro ...
- iOS 技术博客分享
1.了解有什么新技术 1> 苹果API文档 - General - Guides - iOSx API Diffs 2> 观看WWDC会议视频 2.如何使用新技术 1> 自己根据AP ...
- 第一部分 CLR基础：第3章 共享程序集和强命名程序集
第一部分 CLR基础:第3章 共享程序集和强命名程序集
- ISBN和标准编码关系以及概念
<中国标准书号>(China standard Book Number)是1986年由国家标准局批准颁发的一项国家标准(GB5795-86).该标准是在采用国际标准LSO2108——国际标 ...