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

转载于:https://www.cnblogs.com/amunote/p/3701533.html

ExtJS MVC学习手记 1相关推荐

ExtJS MVC 学习手记3
在演示应用中,我们已经创建好了viewport,并为之添加了一个菜单树.但也仅仅是这样,点击树或应用的其他地方获得不到任何响应.这个演示应用还是一个死的应用. 接下来,我们让这个应用活起来. 首先,给 ...
MVC 学习日志1（上）
MVC 学习日志1(上) 2012.7.5 开始学习MVC,本以为这个框架多难学,学下来的感受是其实也就是编写格式而已,和普通的webform有质的区别.顿时理解那句老话,世上无难事,只怕有心人.只要 ...
Extjs——初步学习
最近在系统学习Extjs框架,从刚一开始接触Extjs到现在发现对Extjs越来越喜欢了.刚开始只是想在页面上实现一个展示大量图片的功能,就像在线订餐系统展示菜单的效果那样,每幅图片上都有一些 ...
Spring MVC 学习笔记对locale和theme的支持
Spring MVC 学习笔记对locale和theme的支持 Locale Spring MVC缺省使用AcceptHeaderLocaleResolver来根据request header中的 ...
AM335X的汇编语言与c语言,X86汇编语言学习手记 -- 汇编和C协同
X86汇编语言学习手记(3) 2004年12月在X86汇编语言学习手记(1)(2)中,可以看到栈(Stack)作为进程执行过程中数据的临时存储区域,通常包含如下几类数据: 局部变量函数调用的返回地 ...
Spring MVC 学习总结（二）——控制器定义与@RequestMapping详解
Spring MVC 学习总结(二)--控制器定义与@RequestMapping详解目录一.控制器定义 1.1.实现接口Controller定义控制器 1.2.使用注解@Controller定义 ...
webpack入门学习手记（一）
本人微信公众号:前端修炼之路,欢迎关注. 之前用过gulp.grunt,但是一直没有学习过webpack.这两天刚好有时间,学习了下webpack.webpack要想深入研究,配置的东西比较多,网上的 ...
ROS学习手记 - 2.1: Create and Build ROS Package 生成包（Python）
ROS学习手记 - 2.1: Create and Build ROS Package 生成包(Python) ROS学习手记 - 2.1: Create and Build ROS Package ...
Spring MVC 学习总结（九）——Spring MVC实现RESTful与JSON（Spring MVC为前端提供服务）...
Spring MVC 学习总结(九)--Spring MVC实现RESTful与JSON(Spring MVC为前端提供服务) 目录一.JSON 1.1.概要 1.2.使用ModelAndView ...

ExtJS MVC学习手记 1

ExtJS MVC学习手记 1相关推荐

最新文章

热门文章