zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    poj 1237 The Postal Worker Rings Once // hoj 1164 The Postal Worker Rings Once
    poj3096Surprising Strings
    Telnet服务的配置2(转)
    浅谈以太网帧格式(转)
    QT for linux 的错误 undefined reference to 'FcFreeTypeQueryFace' 的解决方法(转)
    CString,int,string,char*之间的转换(转)
    sprintf(转)
    CString类(转)
    Linux下telnet服务的配置(转)
    grub删除后的windows恢复(转)
  • 原文地址:https://www.cnblogs.com/ae6623/p/4416717.html
Copyright © 2011-2022 走看看