二、第一个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编程系 ...
随机推荐
- check————身份证
-- Access 不支持 Substring 查询,可以替换为 mid 查询. select 序号,姓名,身份证号,性别from 身份表where (len(身份证号)<>15 and ...
- Eclipse用法和技巧十三:自动生成的TODO注释1
使用eclipse的快捷键自动生成的代码,经常有这样的注释. 一眼看上去这个注释和一般的注释并无什么差别,不过TODO这个字符串的颜色不一样,应该有些内容.TODO是eclipse中提供的一种任务标签 ...
- fzu 1911 Construct a Matrix(矩阵快速幂+规律)
题目链接:fzu 1911 Construct a Matrix 题目大意:给出n和m,f[i]为斐波那契数列,s[i]为斐波那契数列前i项的和.r = s[n] % m.构造一个r * r的矩阵,只 ...
- GreenDAO数据库版本升级
GreenDAO是一款非要流行的android平台上的数据库框架,性能优秀,代码简洁. 初始化数据库模型代码的时候需要使用java项目生成代码,依赖的jar包已经上传到我的资源里了,下载地址如下:ht ...
- maven生成war包的两种方式
war包即对WEB应用程序进行打包,用于应用容器的部署.如在jboss中只要把war包丢入deploy目录下即可发布自己的应用了.打包方式有很多中,很多工具本身就支持此功能.下面主要介绍通过maven ...
- 按钮的图标 Button icons-JQUERY MOBILE 1.0正式版中文手册
按钮的图标 Button icons-JQUERY MOBILE 1.0正式版中文手册 data-icon属性可以被用来创建如下所示的图标 左箭头data-icon="arrow-l&quo ...
- 正则表达式概述与JAVA中正则表达式的应用
编程或者电脑使用过程中,经常需要对字符串进行 匹配,查找,替换,判断.如果单纯用代码 if () ,whlie 什么的进行比较复杂麻烦.正则表达式是一种强大灵活的文本处理工具,专门对字符串进行匹配,查 ...
- oracle flashback 2
Flashback database After oracle 10g, oracle can rollback to an prior time by flashback databas ...
- 怎样使用 App Studio 高速定制你自己的 Universal Windows App
今天之所以在写一篇关于 App Studio 的文章是由于,App Studio 经过了几次升级功能得到了明显提升还能够调用系统功能了.而且能够更方便的和应用商店关联公布 Universal Wind ...
- Thinkphp入门 四 —布局、缓存、系统变量 (48)
原文:Thinkphp入门 四 -布局.缓存.系统变量 (48) [控制器操作方法参数设置] http://网址/index.php/控制器/操作方法 [页面跳转] [变量调节器] Smarty变量调 ...