原文地址:http://www.lihuai.net/qianduan/extjs/864.html

博主系列教程:http://www.lihuai.net/qianduan/extjs

在所有的JS框架中，ExtJS算的上是一个超重量级的前端框架，里面封装了大量的类库以至于很多刚开始接触ExtJS的朋友们不知如何下手，即便 是很多人看着别人的demo能够用ExtJS写出自己的Hello Word程序，却对里面的架构不知所以然，针对这种情况，在ExtJS MVC开发教程中主要从以下几个方面为大家讲解如何用MVC模式搭建自己的ExtJS项目应用：

  • 1.搭建ExtJS4开发环境
  • 2.ExtJS4 入口文件（app.js）详解
  • 3.ExtJS4 Controller详解
  • 4.ExtJS4 如何定义自己的视图类
  • 5.ExtJS4 Store和Model详解

首先来分析如何搭建应用环境，我们主要从以下几个方面说明：

1.项目的基本结构

appname：项目的根目录，包含项目的所有文件；
app：应用目录，该文件夹包含你开发的所有类文件；
extjs：extjs源码包；
resource：放置额外资源文件（图片、css文件等）；
app.js：ExtJS入口文件，控制整个应用的逻辑结构；
index.html：项目入口点。

如果对于我的解释仍不能让你明白每个文件夹究竟是做什么的，那么不必担心，在刚开始我们并不是用到所有的文件，对于一个简单的应用，我们只需要用到以下的项目结构即可：

2.制作入口文件

打开index.html文件，添加以下代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>应用首页</title>

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="ext-4.2.1/ext-all.js"></script>

<link rel="stylesheet" type="text/css"

    href="ext-4.2.1/resources/css/ext-all.css">

<script type="text/javascript" src="ext-4.2.1/bootstrap.js"></script>

<script type="text/javascript" src="ext-4.2.1/locale/ext-lang-zh_CN.js"></script>

<script type="text/javascript" src="app.js"></script>

</head>

<body>

</body>

</html>

ext-all.css：该文件是ExtJS的css文件，必须加载；
ext-all.js：ExtJS的核心类库，必须加载（稍后我们还会详细讲解该文件）；
app.js：从这里开始我们的ExtJS应用开发。

准备好以上这些以后，我们就可以着手开始我们的ExtJS开发工作了，打开app.js文件，添加以下代码：

Ext.application({

            name : 'demo', // 命名空间

            launch : function() {

                Ext.create('Ext.container.Viewport', {

                            layout : 'fit',

                            items : [{

                                        title : 'Hello Ext',

                                        html : 'Hello! Welcome to Ext JS.'

                                    }]

                        });

            }

        })

打开浏览器，访问index.html，我们的Hello! Welcome to Ext JS.就在眼前！！

ExtJS4 MVC开发教程：搭建开发环境的更多相关文章

  1. Xamarin Anroid开发教程之验证环境配置是否正确

    Xamarin Anroid开发教程之验证环境配置是否正确 经过前面几节的内容已经把所有的编程环境设置完成了,但是如何才能确定所有的一切都处理争取并且没有任何错误呢?这就需要使用相应的实例来验证,本节 ...

  2. 智龙开发板搭建llsp环境

    智龙开发板搭建llsp(linux+lighttpd+sqlite3+php)环境 1. 准备 1. 智龙开发板V3 2. 软件编译环境:VirtualBox6+CentOS6.10-i386.min ...

  3. Window上python 开发--1.搭建开发环境

    事实上在开发python最好在ubuntu环境下,简单也便于扩展各个package.可是我的linux的电脑临时不在身边.还的我老婆的电脑win7没办法啊. 因为python的跨平台性.在window ...

  4. 开发工具--搭建python环境

    工具|搭建python环境 实现python2版本与python3版本的环境搭建. 正文 1.Python下载 官网: www.python.org 下载: ( 64位3.5.2Windows x86 ...

  5. 勤拂拭软件 java web 开发教程(1) - 开发环境搭建

    勤拂拭软件系列教程 之 Java Web开发之旅(1) Java Web开发环境搭建 1 前言 工作过程中,遇到不少朋友想要学习jsp开发,然而第一步都迈不出,连一个基本的环境都没有,试问,如何能够继 ...

  6. java web 开发教程(1) - 开发环境搭建

    勤拂拭软件系列教程 之 Java Web开发之旅(1) Java Web开发环境搭建 1 前言 工作过程中,遇到不少朋友想要学习jsp开发,然而第一步都迈不出,连一个基本的环境都没有,试问,如何能够继 ...

  7. pyqt开发教程-搭建环境和开发示例

    搭建环境和开发示例 * 安装 安装包 要对应python的版本 32位安装包(我PC上) http://jaist.dl.sourceforge.net/project/pyqt/PyQt4/PyQt ...

  8. Android开发教程之【环境搭建及HelloWorld】（转载）

    引言 本系列适合0基础的人员,因为我就是从0开始的,此系列记录我步入Android开发的一些经验分享,望与君共勉!作为Android队伍中的一个新人的我,如果有什么不对的地方,还望不吝赐教. 在开始A ...

  9. 新唐N32905U1DN开发教程：MDK环境下工程搭建(官方提供的固件库)（转）

    前言:新唐N32905U1DN单片机不支持用户将程序烧录到内部FLASH,必须外挂FLASH存储用户程序,可以是SPI FLASH.NAND FLASH.SD卡.用户采用裸机开发的方式可使用官方提供的 ...

  10. Android开发学习——搭建开发环境

    在学校开课学习了android的一些简单的UI组件,布局,四大组件学习了2个,数据存储及网络通信,都是一些简单的概念,入门而已.许多东西需要自己去学习. 学习一下 Android开发环境的搭建,两种方 ...

随机推荐

  1. MSSQL 数字钱转化为大写

    --说明: --1.本函数范围从 毫 ~ 兆 --2.有四种精度(元,角 ,分,厘 ,毫) --3.有三种进位规则(四舍五入,接舍去,非0就入) --参数说明:dbo.MoneyToCapital( ...

  2. OC7_单词个数

    // // WordManger.h // OC7_单词个数 // // Created by zhangxueming on 15/6/17. // Copyright (c) 2015年 zhan ...

  3. (转)实战Memcached缓存系统（1）Memcached基础及示例程序

    1.Cache定义 (1)狭义概念:用于CPU的相对高速处理与主存(Main Memory)的相对低速处理的之间起到协调功能的硬件设备. (2)广义概念:用于速度相差较大的两种硬件之间,起到协调两者数 ...

  4. button按钮在IE6、7、8、9、10中处理方式并不相同[转]

    http://msdn.microsoft.com/en-us/library/ms534696%28v=vs.85%29.aspx 转自:http://my.oschina.net/fz04003/ ...

  5. 在String()构造器不存在的情况下自定义一个MyString()函数，实现如下内建String()方法和属性：

    在String()构造器不存在的情况下自定义一个MyString()函数,实现如下内建String()方法和属性: var s = new MyString("hello"); s ...

  6. Sicily 1068欢迎提出优化方案

    1608. Digit Counting 限制条件 时间限制: 1 秒, 内存限制: 32 兆 题目描述 Trung is bored with his mathematics homeworks. ...

  7. bzoj 3626 LCA

    这一道题咋一看只觉得是离线,可以求出所有的f(1,i,z), 答案就等于f(1,r,z)-f(1,l-1,z).但是没有具体的做法,但是求LCA的深度和有一个非常巧妙的做法,每加一个点,就把这个点到根 ...

  8. preventDefault()、stopPropagation()、return false 之间的区别

    “return false”之所以被误用的如此厉害,是因为它看起来像是完成了我们交给它的工作,浏览器不会再将我们重定向到href中的链接,表单也不会被继续提交,但这么做到底有什么不对呢? 可能在你刚开 ...

  9. Demo学习： Closable Tabs

    Closable Tabs 给tab页添加关闭按钮,设置UniTabSheet.Closable = True这样在tab页的右上角就会出现关闭图标,点击可以关闭当前tab页面: 1. 直接关闭,完成 ...

  10. 【Java】Linux下安装配置Oracle JDK 1.7版本

    1 环境 Vmware虚拟机中的Ubuntu 12.04 32位系统 2具体安装步骤 ①下载最新的jdk包 注意jdk区分32位版本和64位版本,要与Ubuntu兼容才行 下载地址 http://ww ...