因为最近公司要写一个项目前台所以开始学习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. uoj#453. 【集训队作业2018】围绕着我们的圆环（线性代数+递推）

    题面 传送门 题解 我对线代一无所知 如果下面有啥说错的地方请说出来省的我一辈子都搞不明白 如果你没看懂以下在讲什么不要紧,因为我也没看懂 首先,关于\(A\times B \equiv C \pmo ...

  2. ADX3000 三层网络 纠错

    基于三层网络设计要点: 1 组网配置,两端LAN口,IP地址不同网段,设置主IP地址,当做网段内部的网关使用 2 接口域添加trust接口 3 静态IP,有且仅能有一条,目的IP 0.0.0.0 子网 ...

  3. FPGA实战操作(1) -- SDRAM（Verilog实现）

    对SDRAM基本概念的介绍以及芯片手册说明,请参考上一篇文章SDRAM操作说明. 1. 说明 如图所示为状态机的简化图示,过程大概可以描述为:SDRAM(IS42S16320D)上电初始化完成后,进入 ...

  4. 网络流之最大流与最小费用流入门&&模板

    理解处 刷题处 模板处 最大流模板 处理重边的+(优化) #include<bits/stdc++.h> using namespace std; ; const int INF = 0x ...

  5. JS函数调用分析过程

  6. Python入门字符编码

    计算机基础知识 一.应用程序任何操作硬件的请求都需要向操作系统发起系统调用,然后由操作系统去操作硬件 二.文本编辑器存取文件的原理 1.打开编辑器就打开了启动了一个进程,是在内存中的,所以,用编辑器编 ...

  7. Office 下载地址

    Office Professional Plus 2013 64位简体中文版文件名: cn_office_professional_plus_2013_x64_dvd_1134006.iso语言: C ...

  8. 关于在JS中设置标签属性

    Attribute 该属性主要是用来在标签行内样式,添加.删除.获取属性.且适用于自定义属性. setAttribute("属性名",属性值“”):这个是用来设置标签属性的: re ...

  9. No bean named 'xxxxxxx' available--springboot 上线打war包

    springboot项目发布上线后,报错:No bean named 'xxxxxxx' available 因为我开发时pom用的jar,但上线发布war.解决方法: 1.pom.xml <p ...

  10. java——单例模式

    这个教程写的真好:https://blog.csdn.net/mnb65482/article/details/80458571 1. 什么是单例模式? 单例模式确保某个类只有一个实例. 单例类必须自 ...