开发前的准备

下载并解压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. c#引用web.config中的ConnectionString

    c#引用web.config中的ConnectionString <connectionStrings>  <add name="JKXTConnectionString& ...

  2. 初入Android--Activate生命周期

    Activate的主要生命周期 (注意:这只是主要的生命周期,而不是完整的生命周期方法,其中的两个周期之间可能还执行了其他的一些方法) 每个时刻在屏幕上的状态 进入onCreate方法:Activat ...

  3. Merkaartor,Marble,QGIS等等

    Merkaartor介绍 Merkaartor是Qt开发开源的OpenStreetMap(下简称osm)数据的编辑器,这里简单列出相关资源.方面基于osm数据的开发. Merkaartor支持osm地 ...

  4. 用SignalR做类似QQ登录的应用

    原文:用SignalR做类似QQ登录的应用 首先通过NuGet下载signalr包 在工程下新建一个类,继承Hub public class DemoHub:Hub { public class Us ...

  5. wince平台下使用log4net记录日志

    前面我写过一篇文章是来介绍windows平台下开发软件使用log4net来记录日志的,详情请参考:用一个简单的示例说明日志记录组件log4net的使用. 我们在wince平台下开发程序也一样需要日志文 ...

  6. cocos2d-x游戏开发系列教程-坦克大战游戏加载地图的编写

    上节课写了关卡选择场景,那么接下来写关卡内容,先写最基本的地图的加载 我们新建一个场景类,如下所示: class CityScene : public cocos2d::CCLayer { publi ...

  7. poj 2299 逆序数

    http://poj.org/problem?id=2299 坑:答案是long long 输出……!!!!! 题意是:求一个数组进行冒泡排序交换的次数 题解:求逆序数 题解Ⅰ: 归并排序求逆序数 归 ...

  8. SilkTest Q&A 8

    Q72.如何在一个testplan中运行所有的testcase? A72. 1.打开testplan 2.点击Run/Run All Tests菜单,SilkTest开始执行testplan中所有的t ...

  9. TPL异步并行编程之任务超时

    此处参考自阿涛的博文:http://www.cnblogs.com/HelloMyWorld/p/5526914.html 一 自己定义 基本的思路: net中异步操作由于是交给线程来实现,因此不可能 ...

  10. 用"池"来提升对象的复用

    对象池化是目前常用的一种系统优化的技术.通俗的说也就是一个对象不用多次的被实例化,来消耗性能,可以把这些常用的类放入一个池中,当需要的时候在去池里去拿去,不用的时候 在放入池中.可以叫做对象池.他可以 ...