extjs 4.2 教程 - 01 - Hello Extjs - 2018
原创    xingfu2017    发表于:2018-01-02 14:31:59
  阅读 :1.2k+   收藏   编辑

概述

ExtJS是一个用javascript、CSS和HTML等技术实现的主要用于创建RIA即富客户端,且与后台技术无关的前端Ajax框架。

GPL协议版本下载 :http://cdn.sencha.com/ext/gpl/ext-4.2.1-gpl.zip

API :http://docs.sencha.com/extjs/4.2.1/#!/api

实例 :http://docs.sencha.com/extjs/4.2.1/#!/example

中文API(4.1.0版本) :http://extjs-doc-cn.github.io/ext4api/

Hello Extjs4.2

为便捷,这里我们使用hbuilder 进行开发。下载地址:http://www.dcloud.io/

  • hbuilder编辑器中创建web项目”extjs” , 解压我们刚刚下载好的extjs-4.3.1-gpl.zip , 删除hbuilder为我们创建好的js,img,css目录,新建extjs目录,结构图如下

  • 复制extjs相关的js,css,locale到项目目录
  1. 复制我们解压文件目录中的ext-all.js到我们项目中的extjs/根目录

  2. 复制“resources”目录(含所有文件)到extjs/resources目录

  3. 复制“locale”目录(只要ext-lang-zh_CN.js)导extjs/locale目录

这时的结构图如下:

3.编辑index.html,引入css,js,locale文件,内容如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
    <script type="text/javascript" src="extjs/ext-all.js" ></script>
    <script type="text/javascript" src="extjs/locale/ext-lang-zh_CN.js"></script>
    <script>
        Ext.onReady(function(){
            Ext.Msg.alert("信息", "Hello Extjs4.2");
        })
    </script>
    </head>
    <body>

    </body>
</html>

点击工具栏的浏览器,选择在浏览器中浏览,查看运行结果

结果

  • extjs4.2为我们提供了4中css样式,classic(经典:默认此主题)、access(稳重/黑色)、gray(灰色)、neptune(海王星) ,在
    我们的项目路径下的“resources”可以看到。引入不同的css,可以看到不同的样式
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all-access.css" />
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all-gray.css" />
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all-neptune.css" />

access样式:

gray样式:

neptune样式:

评论
条评论