[ExtJs5.1.0系列-第1天] 初識ExtJs5.1.0

時間 2019-11-11

標籤 extjs5.1.0 extjs 系列 1天简体版

原文原文鏈接

ExtJs是用JavaScript、CSS和HTML等技術實現的主要用於建立用戶界面，且與後臺技術無關的前端Ajax框架，還被用來開發RIA(富客戶端)的Web應用。ExtJs的使用與Java中AWT，Swing編程十分相像(作過Swing編程的同窗內心有底兒了吧~以前沒有作過Swing的同窗經過學習ExtJs，後期上手Swing也會大有裨益)。ExtJs與Swing的相同之處在於都提供了各類組件，而且都以組件，容器，佈局概念爲基礎，但ExtJst提供的組件要豐富的多。javascript

ExtJs的組件庫可分爲基本組件、表單及元素組件、圖標組件3大類多100多種組件，再加上各類的擴展非官方組件和可選組件，基本上知足了開發RIA應用的各類需求。在將來的學習中，咱們將由簡到難，講解信息提示框組件，工具欄和菜單欄組件，樹型組件以及功能極其豐富的Grid組件等等的開發，讓讀者能夠徹底掌握ExtJs的使用。css

關於ExtJs版本的選擇，目前ExtJs已經發布了6.0 Beta版本，但考慮到其穩定性，以及ExtJs4.0版有些老，故選擇功能完善，界面風格多樣的ExtJs5.1.0來給你們介紹ExtJs的開發。
html

好了，廢話很少說，下面咱們立刻ExtJs之旅。
前端

--------------------------------------------------------------------------------------------------完美的分割線--------------------------------------------------------------------------------------------------java

ExtJs 5.1.0 正式版下載地址: http://extjs.org.cn/node/738node

下載ExtJs 5.1.0後解壓得以下圖的目錄結構:編程

下面來搭建ExtJs的開發環境。
小程序

1. MyEclipse中新建Web Project，目錄結構以下:
框架

注意: 項目中extjs5.1.0目錄的文件均來自ExtJs中build文件夾下，而且引用了crisp主題樣式，讀者也可引用其餘 theme。
jsp

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小程序就寫完了，怎麼樣？很簡單吧~

運行結果:

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。