因为最近公司要写一个项目前台所以开始学习extjs前端框架，希望一起共勉。

那么我们的教程就从 Hello World 讲起。

helloWorld.js

  1.  
    Ext.onReady(function() {
  2.  
    Ext.MessageBox.alert('系统提示', 'Hello World!');
  3.  
    });

helloWorld.jsp

  1.  
    <%@ page language="java" contentType="text/html; charset=UTF-8" %>
  2.  
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  3.  
    <html>
  4.  
    <head>
  5.  
    <%
  6.  
    String path = request.getContextPath();
  7.  
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  8.  
    %>
  9.  
    <title>hello Word</title>
  10.  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  11.  
    <meta http-equiv="pragma" content="no-cache">
  12.  
    <meta http-equiv="cache-control" content="no-cache">
  13.  
    <meta http-equiv="expires" content="0">
  14.  
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  15.  
    <meta http-equiv="description" content="This is my page">
  16.  
    <!-- 引入ExtJs样式 -->
  17.  
    <link rel="stylesheet" type="text/css" href="<%=basePath %>static/ext-6.0.0.415/build/classic/theme-neptune/resources/theme-neptune-all.css">
  18.  
    <!-- 引入ExtJs核心Js -->
  19.  
    <script type="text/javascript" src="<%=basePath %>static/ext-6.0.0.415/ext-bootstrap.js"></script>
  20.  
    <script type="text/javascript" src="<%=basePath %>static/ext-6.0.0.415/build/ext-all.js"></script>
  21.  
    <script type="text/javascript" src="<%=basePath %>static/ext-6.0.0.415/build/classic/locale/locale-zh_CN.js"></script>
  22.  
    <!-- 页面Js -->
  23.  
    <script type="text/javascript" src="<%=basePath %>static/js/helloWord.js"></script>
  24.  
    </head>
  25.  
    <body>
  26.  
    </body>
  27.  
    </html>

说明：
    (1)Ext.onReady():ExtJS Application的入口...就相当于Java或C#的main函数.
    (2)Ext.MessageBox.alert()：弹出对话框。

extjs 6的更多相关文章

  1. ExtJS 4.2 评分组件

    上一文章是扩展ExtJS自带的Date组件.在这里将创建一个评分组件. 目录 1. 介绍 2. 示例 3. 资源下载 1. 介绍 代码参考的是 Sencha Touch 2上的一个RatingStar ...

  2. ExtJS 4.2 介绍

    本篇介绍ExtJS相关知识,是以ExtJS4.2.1版本为基础进行说明,包括:ExtJS的特点.MVC模式.4.2.1GPL版本资源的下载和说明以及4种主题的演示. 目录 1. 介绍 1.1 说明 1 ...

  3. ExtJS 4.2 第一个程序

    本篇介绍如何创建一个ExtJS应用程序.并通过创建目录.导入文件.编写代码及分析代码等步骤来解释第一个ExtJS程序. 目录 1. 创建程序 1.1 创建目录建议 1.2 实际目录 1.3 index ...

  4. ExtJS 4.2 组件介绍

    目录 1. 介绍 1.1 说明 1.2 组件分类 1.3 组件名称 1.4 组件结构 2. 组件的创建方式 2.1 Ext.create()创建 2.2 xtype创建 1. 介绍 1.1 说明 Ex ...

  5. ExtJS 4.2 组件的查找方式

    组件创建了,就有方法找到这些组件.在DOM.Jquery都有各自的方法查找元素/组件,ExtJS也有自己独特的方式查找组件.元素.本次从全局查找.容器内查找.form表单查找.通用组件等4个方面介绍组 ...

  6. ExtJS 4.2 业务开发(一)主页搭建

    本篇开始搭建一个ExtJS 4.2单页面应用, 这里先介绍主页的搭建,内容包括:主页结构说明.扩展功能等方面. 目录 1. 主页结构说明 2. 扩展功能 3. 在线演示 1. 主页结构说明 1.1 主 ...

  7. ExtJS 4.2 业务开发(二)数据展示和查询

    本篇开始模拟一个船舶管理系统,提供查询.添加.修改船舶的功能,这里介绍其中的数据展示和查询功能. 目录 1. 数据展示 2. 数据查询 3. 在线演示 1. 数据展示 在这里我们将模拟一个船舶管理系统 ...

  8. ExtJS 4.2 业务开发(三)数据添加和修改

    接上面的船舶管理业务,这里介绍添加和修改操作. 目录 1. 添加操作 2. 修改操作 3. 在线演示 1. 添加操作 1.1 创建AddShipWindow.js 在业务中的view目录下创建一个Ad ...

  9. ExtJS 4.2 Grid组件的单元格合并

    ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能. 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid ...

  10. ExtJS 4.2 Date组件扩展：添加清除按钮

    ExtJS中除了提供丰富的组件外,我们还可以扩展他的组件. 在这里,我们将在Date日期组件上添加一个[清除]按钮,用于此组件已选中值的清除. 目录 1. Date组件介绍 2. 主要代码说明 3. ...

随机推荐

  1. maven+selenium+java+testng+jenkins自动化测试

    最近在公司搭建了一套基于maven+selenium+java+testng+jenkins的自动化测试框架,免得以后重写记录下 工程目录 pom.xml <project xmlns=&quo ...

  2. soj 131 找题

    soj 131 找题 给出两个长度为n,都含k个1的字符串A,B.现在令\(a_1,a_2,\dots,a_k\)是A中1的下标,\(b_1,b_2,\dots,b_k\)是B中1的下表,然后将a,b ...

  3. UDP socket

    1.Udp :User Datagram Protocol(Udp)用户数据报文协议. 2.适用于局域网的主机间通信. 3.使用方法 1:创建Socket OS_Socket local(127.0. ...

  4. Arcgis Server for JavaScript API之自定义InfoWindow

    各位看到这个标题不要嫌烦,因为本人最近一直在研究相关的问题,所以相关文章也只能是这些,同时希望看过我的文章的朋友,我的文章能够给你帮助. 在前面的两篇相关的文章里面,实现InfoWindow是通过di ...

  5. 牛客寒假算法基础集训营5 J 炫酷数学

    链接:https://ac.nowcoder.com/acm/contest/331/J来源:牛客网 小希最近想知道一个东西,就是A+B=A|B(其中|为按位或)的二元组有多少个. 当然,直接做这个式 ...

  6. 理解Javascript_01_理解内存分配

    理解Javascript_01_理解内存分配 转载自:http://www.cnblogs.com/fool/archive/2010/10/07/1845226.html   在正式开始之前,我想先 ...

  7. N - 嘤嘤嘤 （并查集+枚举）

    Our lovely KK has a difficult Social problem. A big earthquake happened in his area. N(2≤N≤2000)N(2≤ ...

  8. HDU 3652 区间有13并且这样整除13 的数量（数位DP)

    题目:求1-n的范围里含有13且能被13整除的数字的个数. 分析: dfs(len, num, mod, flag) mod记录数字对13取余后的值 len表示当前位数 num＝＝0 不含13且上一位 ...

  9. 2016 Multi-University Training Contest 10 || hdu 5860 Death Sequence（递推+单线约瑟夫问题）

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=5860 题目大意:给你n个人排成一列编号,每次杀第一个人第i×k+1个人一直杀到没的杀.然后 ...

  10. STL之set（唯一且有顺序）

    set作为一个容器也是用来存储同一数据类型的数据类型,并且能从一个数据集合中取出数据, 在set中每个元素的值都唯一,而且系统能根据元素的值自动进行排序.应该注意的是set中数元素的值不能直接被改变. ...