开发前的准备

下载并解压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. check————身份证

    -- Access 不支持 Substring 查询,可以替换为 mid 查询. select 序号,姓名,身份证号,性别from 身份表where (len(身份证号)<>15 and ...

  2. Eclipse用法和技巧十三:自动生成的TODO注释1

    使用eclipse的快捷键自动生成的代码,经常有这样的注释. 一眼看上去这个注释和一般的注释并无什么差别,不过TODO这个字符串的颜色不一样,应该有些内容.TODO是eclipse中提供的一种任务标签 ...

  3. fzu 1911 Construct a Matrix(矩阵快速幂+规律)

    题目链接:fzu 1911 Construct a Matrix 题目大意:给出n和m,f[i]为斐波那契数列,s[i]为斐波那契数列前i项的和.r = s[n] % m.构造一个r * r的矩阵,只 ...

  4. GreenDAO数据库版本升级

    GreenDAO是一款非要流行的android平台上的数据库框架,性能优秀,代码简洁. 初始化数据库模型代码的时候需要使用java项目生成代码,依赖的jar包已经上传到我的资源里了,下载地址如下:ht ...

  5. maven生成war包的两种方式

    war包即对WEB应用程序进行打包,用于应用容器的部署.如在jboss中只要把war包丢入deploy目录下即可发布自己的应用了.打包方式有很多中,很多工具本身就支持此功能.下面主要介绍通过maven ...

  6. 按钮的图标 Button icons-JQUERY MOBILE 1.0正式版中文手册

    按钮的图标 Button icons-JQUERY MOBILE 1.0正式版中文手册 data-icon属性可以被用来创建如下所示的图标 左箭头data-icon="arrow-l&quo ...

  7. 正则表达式概述与JAVA中正则表达式的应用

    编程或者电脑使用过程中,经常需要对字符串进行 匹配,查找,替换,判断.如果单纯用代码 if () ,whlie 什么的进行比较复杂麻烦.正则表达式是一种强大灵活的文本处理工具,专门对字符串进行匹配,查 ...

  8. oracle flashback 2

    Flashback  database      After oracle 10g, oracle can rollback to an prior time by flashback databas ...

  9. 怎样使用 App Studio 高速定制你自己的 Universal Windows App

    今天之所以在写一篇关于 App Studio 的文章是由于,App Studio 经过了几次升级功能得到了明显提升还能够调用系统功能了.而且能够更方便的和应用商店关联公布 Universal Wind ...

  10. Thinkphp入门 四 —布局、缓存、系统变量 (48)

    原文:Thinkphp入门 四 -布局.缓存.系统变量 (48) [控制器操作方法参数设置] http://网址/index.php/控制器/操作方法 [页面跳转] [变量调节器] Smarty变量调 ...