因为最近公司要写一个项目前台所以开始学习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. 10.19 qbxt国庆day3

    最近的题都莫名简单 经常AK 炼金术 [问题描述] 即使是最伟大的ACM选手也是需要足够的金钱来把妹的的.于是ZYB发明了一台炼金机器. 这台机器一共有三个功能: 1.能把a位沙子变成b位石油. 2. ...

  2. Android layout布局属性、标签属性总结大全

    RelativeLayout 第一类:属性值为true可false android:layout_centerHrizontal        水平居中 android:layout_centerVe ...

  3. POJ 3281 Dining ( 最大流 && 建图 )

    题意 : 有 N 头牛,John 可以制作 F 种食物和 D 种饮料, 然后接下来有 N 行,每行代表一头牛的喜好==>开头两个数 Fi 和 Di 表示这头牛喜欢 Fi 种食物, Di  种饮料 ...

  4. jq ajax超时设置

    var ajaxTimeoutTest = $.ajax({ url:'', //请求的URL timeout : 1000, //超时时间设置,单位毫秒 type : 'get', //请求方式,g ...

  5. python基础之1--Python入门

    第1章 Python生态圈 第2章 编程与编程语言 python是一门编程语言,作为学习python的开始,需要事先搞明白:编程的目的是什么?什么是编程语言?什么是编程? 2.1 编程的目的: 计算机 ...

  6. 导入json文件报错，TypeError expected string or buffer

    导入json文件报错,TypeError expected string or buffer 原因:用字符串赋值后,python会把双引号转换为单引号 import json data = [{&qu ...

  7. 惠普台式机在UEFI BIOS设置通电自动开机 影响电脑自动重启关不了机设置

    设置通电自动开机 影响电脑自动重启关不了机设置   惠普台式机在UEFI BIOS中 1. 开机时不断点击F10键进入BIOS,选择Advanced(高级)然后选择Boot Options,点击回车 ...

  8. Linux数组基础

    执行结果:

  9. eclipse+pydev 安装和配置过程

    安装 PyDev 在安装 PyDev 之前,要保证您已经安装了 Java 1.4 或更高版本.Eclipse 以及 Python.接下来,开始安装 PyDev 插件. 启动 Eclipse,利用 Ec ...

  10. C# 控制反转(IOC: Inverse Of Control) & 依赖注入（DI: Independence Inject）

    举例:在每天的日常生活中,我们离不开水,电,气.在城市化之前,我们每家每户需要自己去搞定这些东西:自己挖水井取水,自己点煤油灯照明,自己上山砍柴做饭.而城市化之后,人们从这些琐事中解放了出来,城市中出 ...