原文地址: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. PHP中常量

    PHP中常量 常量就是一种特殊的变量,PHP中的常量值一旦定义,在程序运行过程中不可更改,常量本身也不允许删除. 程序是用于解决现实问题,由两部分组成:代码,数据 常量的定义: 语法1: define ...

  2. 使用百度zrender, demo抛砖引玉.

    http://www.just.org.cn/zrender/index.html https://github.com/ecomfe/zrender 目录结构: |-project    |-dem ...

  3. Contest1065 - 第四届“图灵杯”NEUQ-ACM程序设计竞赛(个人赛)E粉丝与分割平面

    题目描述 在一个平面上使用一条直线最多可以将一个平面分割成两个平面,而使用两条直线最多可将平面分割成四份,使用三条直线可将平面分割成七份--这是个经典的平面分割问题,但是too simple,作为一个 ...

  4. c++ primer (5)1

    第一章 1.包含来自标准库的头文件用<>,不属于标准库用"". 2.默认情况,读cin会刷新cout:程序非正常终止时也会刷新cout. 3.默认情况,cerr不缓冲, ...

  5. javascript 代码优化工具 UglifyJS

    安装: 1. 安装 node.js 环境 (这个不用我教了吧,网上教程一大堆哦.) 2. 进入 https://github.com/mishoo/UglifyJS  右上角 “Download” Z ...

  6. Delphi Idhttp Post提交 Aspx/Asp.net 时 500错误的解决办法。

    一直使用Delphi写程序,因为习惯了,用起来方便. 但是有一个问题困扰了我半年了.就是使用Idhttp Post提交时候总会有莫名其妙的错误,大部分网站没问题,但是一遇到Asp.net就报错500. ...

  7. 种子填充找连通块 floodfill

    Description Due to recent rains, water has pooled in various places in Farmer John's field, which is ...

  8. ubuntu 设置显示器的亮度

    ubuntu电脑重新启动后,亮度都变成了最亮.似乎也没胡地方可以设置.只好通过写个脚本来做这个事了. # -*- coding: utf-8 -*- import dbus bus = dbus.Se ...

  9. MySQL的复制原理及配置

    MySQL 的数据库的高可用性的架构大概有以下几种:集群,读写分离,主备.而后面两种都是通过复制来实现的.下面将简单介绍复制的原理及配置,以及一些常见的问题. 一.复制的原理 MySQL 复制基于主服 ...

  10. iOS 通览(二)

    一.关键词 extern:C语言的函数外部声明. 如果你要在一个.c或者.m中使用另外一个.c文件的函数的话,需要在文件中写入目标函数的外部引用的声明. 二.自定义View 自定义View添加控件对象 ...