• ExtJs教程第一集 搭建ext环境后的第一个hello World


    1. 下载js文件, 官方地址ExtJS v3.2.0 或者ExtJS v3.4.0都行

    2. 解压Extjs包,把以下文件夹和js文件拿出来

    3. adapter(文件夹)
      resources(文件夹)
      ext-all.js
      ext-all-debug.js

    4. 目录结构如下

              

             

      

         5.  开始写html代码 

    

    版本1

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      <html>
       <head>
        <title>测试ExtJS部署</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
        <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
           <script type="text/javascript" src="extjs/ext-all-debug.js"></script>   
        <script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script> 
           <script type="text/javascript">
        Ext.onReady(function() {
         Ext.MessageBox.alert('提示', '执行方法 Ext.onReady()');
        });
        </script>
       </head>

       <body></body>
      </html>

    2. 在谷歌浏览器运行之即可。

      

    版本2 

     jsp页面如下

    1. <%@ page language="java" contentType="text/html; charset=utf-8"
          pageEncoding="utf-8"%>
      <!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>Insert title here</title>
      <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
        <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
           <script type="text/javascript" src="extjs/ext-all-debug.js"></script>   
        <script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script> 
          
      </head>
      <body>
       <script type="text/javascript">
        Ext.onReady(function() {
       Ext.MessageBox.alert('提示', 'hello world!boy');
        });
        </script>
      </body>
      </html>

    版本3

          目录结构如下

         

          extjs文件夹里面的文件如下

         

          

    hello.html 代码如下

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head runat="server">
      <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
      <script src="extjs/ext-base.js" type="text/javascript"></script>
      <script src="extjs/ext-all.js" type="text/javascript"></script>
      <script src="extjs/ext-lang-zh_CN.js" type="text/javascript"></script>
      <boyd>
      <script type="text/javascript">
        Ext.onReady(function() {
         Ext.MessageBox.alert('提示', '执行方法 Ext.onReady()');
        });
        </script>
      </body>
      </html>

    总结:导入的js文件夹只需要两个,adapter(文件夹)resources(文件夹)

               引入的css文件一个

              <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />

               引入的js文件可以有多种组合,目前我尝试出来的可以是

    •           ext-base.js +  ext-all-debug.js

    •           ext-base.js +  ext-all.js   

    如下

    1. <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="extjs/ext-all-debug.js"></script>   
        <script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script> 

    2. <script src="extjs/ext-base.js" type="text/javascript"></script>
      <script src="extjs/ext-all.js" type="text/javascript"></script>
      <script src="extjs/ext-lang-zh_CN.js" type="text/javascript"></script>

  • 相关阅读:
    三个步骤,从零开始快速部署LoRaServer
    Java项目打包后 启动报java.nio.charset.MalformedInputException: Input length = 1异常
    iis中没有URL重写
    并发测试工具Jmeter
    IOS – OPenGL ES 调节图像饱和度 GPUImageSaturationFilter
    UImage – 色彩直方图 GPUImageHistogramGenerator
    IOS – OPenGL ES 调节图像伽马线 GPUImageGammaFilter
    GPUImage – 亮度平均 GPUImageLuminosity
    IOS – OpenGL ES 调节图像对比度 GPUImageContrastFilter
    IOS – OpenGL ES 调节图像RGB通道 GPUImageRGBFilter
  • 原文地址:https://www.cnblogs.com/ae6623/p/4416717.html
Copyright © 2020-2023  润新知