二、第一个ExtJS程序:helloExtJS
开发前的准备
下载并解压ExtJS包后，能够得到下图的文件文件夹结构：
在实际开发过程中并不须要全部的文件和文件夹，所需的包括例如以下文件夹就可以：
若使用eclipse进行开发，仅仅需将上述文件拷贝到WebRoot文件夹或其子文件夹。
開始
- 新建firstextjs.html
- 在使用ExtJS之前，须要在页面引入对应的样式和js文件，一般包含的最小集合是这样：ext-all.js，adapter/ext/ext-base.js，locale/ext-lang-zh_CN.js和整个resources文件夹。
ext-all.js，adapter/ext/ext-base.js 就包括了ext的全部功能，全部的js脚本都在这里了。
locale/ext-lang-zh_CN.js 是中文翻译。
resources文件夹下是css样式表和图片。
- 注意js文件的导入顺序
- 编写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> - 终于效果
至此，第一个ExtJS程序就搞定了。过程中一定要细致认真，不要出现低级错误。我就是在引入js文件时路径写错了，搞了大半天o(︶︿︶)o 。只是不明确为什么最后的显示效果还是那么丑。囧
改动：
之前在resources文件夹下没有导入images，导致显示有问题。新的文件夹结构：
又一次导入images后，能够正常显示：
二、第一个ExtJS程序:helloExtJS的更多相关文章
- python flask框架学习(二)——第一个flask程序
第一个flask程序 学习自:知了课堂Python Flask框架——全栈开发 1.用pycharm新建一个flask项目 2.运行程序 from flask import Flask # 创建一个F ...
- （二）一个MFC程序，消息映射，纯代码
1.应用程序类 CWinApp https://docs.microsoft.com/zh-cn/cpp/mfc/reference/cwinapp-class?f1url=https%3A%2F%2 ...
- JavaScript二(第一个js程序)
一.<script>xxxx</script>标签解析 1.charset :可选,表示通过src属性指定的字符集,由于大多数浏览器忽略它,所以很少有人用它2.defer:可选 ...
- OD 实验(十二) - 对一个 Delphi 程序的逆向
程序: 运行程序 界面显示的是未注册 点击 Help -> About 点击 Use Reg Key 这里输入注册码 用 PEiD 看一下 该程序是用 Delphi 6.0 - 7.0 写的 逆 ...
- PyCharm搭建Spark开发环境 + 第一个pyspark程序
一, PyCharm搭建Spark开发环境 Windows7, Java 1.8.0_74, Scala 2.12.6, Spark 2.2.1, Hadoop 2.7.6 通常情况下,Spark开发 ...
- SpringBoot系列二：搭建自己的第一个SpringBoot程序
声明:本文来源于MLDN培训视频的课堂笔记,写在这里只是为了方便查阅. 一.根据官网手工搭建(http://projects.spring.io/spring-boot/#quick-start) 1 ...
- 用JAVA写一个多线程程序，写四个线程，其中二个对一个变量加1，另外二个对一个变量减1
package com.ljn.base; /** * @author lijinnan * @date:2013-9-12 上午9:55:32 */ public class IncDecThrea ...
- 学习ASP.NET Core Blazor编程系列二——第一个Blazor应用程序（中）
学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 四.创建一个Blazor应用程序 1. 第一种创 ...
- 学习ASP.NET Core Blazor编程系列二——第一个Blazor应用程序（下）
学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...
随机推荐
- asp.net2.0安全性(3)－－验证与授权--转载来自车老师
"验证"与"授权"是对网页资源安全管理的两道门. 验证(Authentication):检查用户是否是合法的用户.就像是网站大门口的保卫,服责验证使用的用户名和 ...
- net core与golang web
Asp.net core与golang web简单对比测试 最近因为工作需要接触了go语言,又恰好asp.net core发布RC2,就想简单做个对比测试. 下面是测试环境: CPU:E3-1230 ...
- javascript 中 事件流和事件冒泡
一.事件流 是描述页面接受事件的顺序,IE 使用的是时间冒泡流;而Netscape的事件采用的是事件捕获流.1.事件冒泡JS 和 HTML是通过事件的方式实现交互.事件冒泡 开始元素,将事件逐级传递, ...
- eclipse之The currrently displayed page contains invalid values错误
现象: eclipse的preferences里面须要保存密码,保存报错Could Not Accept ChangesThe currrently displayed page contains i ...
- PDCA模型的学习
PDCA是广泛应用于质量控制中的一种管理学模型. P即plan,分析和了解当前的状况,然后作出改进的计划: D即do,执行所作出的计划: C即check,对执行的结果进行检查,要确认哪些是对的,哪些是 ...
- const限定符的作用
const限定符的作用: 1.定义const常量:const可以将一个对象变成一个常量,不可被修改,所以定义的 时候必须进行初始 ...
- HTML5 实现拖拽
如图 可以从第一个方框拖拽花色到第二个方框中. 也可以再拖动回来. 具体代码实现 index.html <!DOCTYPE HTML> <html> <head> ...
- Ural 1073 Square Country （DP）
题目地址:Ural 1073 DP水题.也能够说是背包. #include <iostream> #include <cstdio> #include <string&g ...
- spring mvc controller间跳转 重定向
1. 需求背景 需求:spring MVC框架controller间跳转,需重定向.有几种情况:不带参数跳转,带参数拼接url形式跳转,带参数不拼接参数跳转,页面也能显示. 本来以为挺简单的一 ...
- byte为什么要与上0xff(转)
无意间翻看之间的代码,发现了一段难以理解的代码. byte[] bs = digest.digest(origin.getBytes(Charset.forName(charsetName))) ; ...