zoukankan      html  css  js  c++  java
  • 在项目中使用ExtJS

    下载ExtJs 5.1.0后解压得如下图的目录结构:

        

        下面来搭建ExtJs的开发环境。

        1. MyEclipse中新建Web Project,目录结构如下: 

    注意: 项目中extjs5.1.0目录的文件均来自ExtJs中build文件夹下,并且引用了crisp主题样式,读者也可引用其他 theme。

    scripts目录下的script.js用来编写ExtJs代码,而ExtJs的呈现载体为index.jsp,下面让我们来看下index.jsp做了什么工作。

    index.jsp:

    <%@ page language="java" import="java.util.*" contentType="text/html;charset=UTF-8" pageEncoding="utf-8"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
      	<script type="text/javascript" src="${pageContext.request.contextPath}/extjs5.1.0/ext-all.js"></script>
      	<script type="text/javascript" src="${pageContext.request.contextPath}/extjs5.1.0/package/ext-theme-crisp/build/ext-theme-crisp.js"></script>
      	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/extjs5.1.0/package/ext-theme-crisp/build/resources/ext-theme-crisp-all.css" />  
      	
    	<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/script.js"></script>
      </head>
      
      <body>
      </body>
    </html>

    注意: index.jsp引入了extjs5.1.0的三个文件: ext-all.js,ext-theme-crisp.js 和 ext-theme-crisp-all.css

    同时读者注意到,我们还引入了script.js,该文件将实现第一个ExtJs的小程序: "Hello World",让我们赶快来看下~

    script.js:

    Ext.onReady(function() {   
    	Ext.Msg.alert('Information','Hello World, LvSantorini');  
    });

    到这里,第一个ExtJs小程序就写完了,怎么样?很简单吧~

    运行结果:

  • 相关阅读:
    ASP.NET Web API 记录请求响应数据到日志的一个方法
    EF删除集中方法对比
    CSS 的优先级机制[总结]
    sql备份命令
    sql两张表关联更新字段
    VSCode隐藏node_modules目录
    C# RSACryptoServiceProvider加密解密签名验签和DESCryptoServic
    模拟退火(转)
    HNOI2006-鬼谷子的钱袋
    HNOI2006-公路修建问题(二分答案+并查集)
  • 原文地址:https://www.cnblogs.com/dingjiaoyang/p/6251498.html
Copyright © 2011-2022 走看看