开发前的准备

下载并解压ExtJS包后，能够得到下图的文件文件夹结构：

在实际开发过程中并不须要全部的文件和文件夹，所需的包括例如以下文件夹就可以：

若使用eclipse进行开发，仅仅需将上述文件拷贝到WebRoot文件夹或其子文件夹。

開始

  1. 新建firstextjs.html
  2. 在使用ExtJS之前，须要在页面引入对应的样式和js文件，一般包含的最小集合是这样：ext-all.js，adapter/ext/ext-base.js，locale/ext-lang-zh_CN.js和整个resources文件夹。

    1. ext-all.js，adapter/ext/ext-base.js   就包括了ext的全部功能，全部的js脚本都在这里了。

    2. locale/ext-lang-zh_CN.js   是中文翻译。

    3. resources文件夹下是css样式表和图片。

      • 注意js文件的导入顺序
  3. 编写html 
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    
<html>
    
<head>
    
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
<title>第一个ExtJS程序</title>
    
<link rel="stylesheet" type="text/css" href="script/resources/css/ext-all.css" />
    
<script type="text/javaScript" src="script/adapter/ext/ext-base.js"></script>
    
<script type="text/javaScript" src="script/ext-all.js"></script>
    
<script type="text/javascript" src="script/locale/ext-lang-zh_CN.js"></script>

<script type="text/javascript">
    
	/*
    
	Ext.onReady(
    
		function(){
    
			var d = new Date();
    
			var time = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
    
			Ext.MessageBox.alert('报时','如今的时间是：'+time);
    
		}
    
	);
    
	 */
    
	//onReady方法在页面完成时调用初始化函数：也就是onReady的第一个參数指定的函数
    
	Ext.onReady(
    
		function(){
    
			Ext.MessageBox.alert('helloworld','这是我的第一个ExtJS程序');
    
		}
    
	);

</script>
    
</head>
    
<body>
    
</body>
    
</html>
  4. 终于效果

至此，第一个ExtJS程序就搞定了。过程中一定要细致认真，不要出现低级错误。我就是在引入js文件时路径写错了，搞了大半天o(︶︿︶)o 。只是不明确为什么最后的显示效果还是那么丑。囧

改动：

之前在resources文件夹下没有导入images，导致显示有问题。新的文件夹结构：

又一次导入images后，能够正常显示：

二、第一个ExtJS程序:helloExtJS的更多相关文章

  1. python flask框架学习(二)——第一个flask程序

    第一个flask程序 学习自:知了课堂Python Flask框架——全栈开发 1.用pycharm新建一个flask项目 2.运行程序 from flask import Flask # 创建一个F ...

  2. （二）一个MFC程序，消息映射，纯代码

    1.应用程序类 CWinApp https://docs.microsoft.com/zh-cn/cpp/mfc/reference/cwinapp-class?f1url=https%3A%2F%2 ...

  3. JavaScript二(第一个js程序)

    一.<script>xxxx</script>标签解析 1.charset :可选,表示通过src属性指定的字符集,由于大多数浏览器忽略它,所以很少有人用它2.defer:可选 ...

  4. OD 实验(十二) - 对一个 Delphi 程序的逆向

    程序: 运行程序 界面显示的是未注册 点击 Help -> About 点击 Use Reg Key 这里输入注册码 用 PEiD 看一下 该程序是用 Delphi 6.0 - 7.0 写的 逆 ...

  5. PyCharm搭建Spark开发环境 + 第一个pyspark程序

    一, PyCharm搭建Spark开发环境 Windows7, Java 1.8.0_74, Scala 2.12.6, Spark 2.2.1, Hadoop 2.7.6 通常情况下,Spark开发 ...

  6. SpringBoot系列二：搭建自己的第一个SpringBoot程序

    声明:本文来源于MLDN培训视频的课堂笔记,写在这里只是为了方便查阅. 一.根据官网手工搭建(http://projects.spring.io/spring-boot/#quick-start) 1 ...

  7. 用JAVA写一个多线程程序，写四个线程，其中二个对一个变量加1，另外二个对一个变量减1

    package com.ljn.base; /** * @author lijinnan * @date:2013-9-12 上午9:55:32 */ public class IncDecThrea ...

  8. 学习ASP.NET Core Blazor编程系列二——第一个Blazor应用程序（中）

    学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 四.创建一个Blazor应用程序 1. 第一种创 ...

  9. 学习ASP.NET Core Blazor编程系列二——第一个Blazor应用程序（下）

    学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...

随机推荐

  1. 把VS2010的智能代码提示和注解从英文变成中文

    最近安装了个高级点的VS2010,起初还没留意.今天无意发现提示信息只能提示英文.....头大oooo. 我以为是个别现象,于是GG了下,发现有很多盆友都有这种. 记录下来了,以后省事儿: 访问MS的 ...

  2. Unity3D手游-横版ACT游戏完整源代码下载

    说明: 这不是武林.这不是江湖,没有道不完的恩怨,没有斩不断的情仇,更没有理不清的烦恼,这是剑的世界,一代剑魁闯入未知世界,将会为这个世界展开什么样的蓝图.让你来创造它的未来,剑魁道天下,一剑斗烛龙! ...

  3. ANTLR4权威參考手冊（一）

    写在前面的话: 此文档是对伟大的Terence Parr的著作<the definitive antlr4 reference>的翻译本.致敬!欢迎转载,请注明原地址,请尊重劳动成果.翻译 ...

  4. 关于Opengl中将24位BMP图片加入一个alpha通道并实现透明的问题

    #include <windows.h>#include <GL/glut.h>#include <GL/glaux.h>#include <stdio.h& ...

  5. openstack中Nova组件images的全部python API 汇总

    感谢朋友支持本博客.欢迎共同探讨交流,因为能力和时间有限,错误之处在所难免.欢迎指正! 假设转载,请保留作者信息. 博客地址:http://blog.csdn.net/qq_21398167 原博文地 ...

  6. 浅谈sqlldr

    1.安装oracle  sqlldr 2.配置sqlldr环境 3java代码的实现 在windows下面sqlldr: sqlldr = “cmd /c start  D:/oracle/produ ...

  7. Linear Regression(线性回归)（二）—正规方程（normal equations）

    (整理自AndrewNG的课件,转载请注明.整理者:华科小涛@http://www.cnblogs.com/hust-ghtao/) 在上篇博客中,我们提出了线性回归的概念,给出了一种使代价函数最小的 ...

  8. shell脚本中怎样同时执行多个.sql文件，并把结果写入文件中（转）

    转载:http://joewalker.iteye.com/blog/408879命令行下具体用法如下: mysqldump -u用戶名 -p密码 -d 数据库名 表名 > 脚本名;导出整个数据 ...

  9. Centos系统各种日志存详解

    Centos系统各种日志存储路径和详细介绍 Linux常见的日志文件详述如下 1./var/log/boot.log(自检过程) 2./var/log/cron (crontab守护进程crond所派 ...

  10. Android调用系统相机、自己定义相机、处理大图片

    Android调用系统相机和自己定义相机实例 本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,而且因为涉及到要把拍到的照片显示出来,该样例也会涉及到Android载入大图片时候的处 ...