ExtJS学习笔记之二-------ExtJS入门介绍

1、ExtJS简介

   ExtJS 主要用来开发RIA富客户端的AJAX应用,主要用于创建前端用户界面,与后台技术无关的前端ajax框架。因此,可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术,由开发人员JackSlocum开发,通过参考JavaSwing等机制来组织可视化组件,无论从UI界面上CSS样式的应用,到数据解析上的异常处理,都可算是一款不可多得的JavaScript客户端技术的精品。

  Ext的UI组件模型和开发理念脱胎、成型于Yahoo组件库YUI和Java平台上Swing两者,并为开发者屏蔽了大量跨浏览器方面的处理。相对来说,EXT要比开发者直接针对DOM、W3C对象模型开发UI组件轻松。
  ExtJS很适合用来开发企业管理系统。

2、ExtJS核心组件

ExtJS学习笔记之二-------ExtJS入门介绍_第1张图片

ExtJS学习笔记之二-------ExtJS入门介绍_第2张图片

ExtJS学习笔记之二-------ExtJS入门介绍_第3张图片

ExtJS学习笔记之二-------ExtJS入门介绍_第4张图片

3、开始ExtJS程序

上官方网站下载ExtJS,本人现在使用的版本是ExtJS3.4.1   http://www.sencha.com/products/extjs3/download/ext-js-3.4.1.1/2192

要运行ExtJS3.4.1的程序,至少需要导入四个文件,

ext-3.4.1/resources/css/ext-all.css      这是EXTJS的样式文件,resources整个文件夹的内容都要放入项目中

ext-3.4.1/adapter/ext/ext-base-debug.js   这是EXTJS的基本JS文件,调试环境下使用ext-base-debug.js,正式环境下使用ext-base.js

ext-3.4.1/ext-all-debug.js                            这是包含EXTJS所有组件的JS文件,调试环境下使用ext-all-debug.js,正式环境下使用ext-all.js

ext-3.4.1/src/locale/ext-lang-zh_CN.js     EXTJS汉化的文件

下面运行一个Hello World的程序。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ExtJS</title>
	<link rel="stylesheet" type="text/css" href="ext-3.4.1/resources/css/ext-all.css"/>
	<script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base-debug.js"></script>
	<script type="text/javascript" src="ext-3.4.1/ext-all-debug.js"></script>
	<script type="text/javascript" src="ext-3.4.1/src/locale/ext-lang-zh_CN.js"></script>
	<script type="text/javascript">
	Ext.onReady(function(){
		Ext.MessageBox.alert('hello world', 'Hello World');
	});
	</script>
  </head>
  <body>
  </body>
</html>

程序的运行结果如下:

ExtJS学习笔记之二-------ExtJS入门介绍_第5张图片

你可能感兴趣的:(ExtJs,入门介绍)