ExtJS梦想之旅（一）--第一个ExtJS程序（HelloWorld）

来源：互联网发布：淘宝黄山烧饼哪个牌子编辑：程序博客网时间：2024/05/16 08:59

前两天一直在学习ExtJS之javascript基础，现在正式开始ExtJS梦想之旅，进入了ExtJS的学习！

一、ExtJS简介

ExtJS是一种RIA（富因特网应用程序）Ajax框架，它天生丽质，使用它开发出来的web应用可以不用美工的参与，也能做很炫丽的页面效果。它使用Javascript作为开发语言，借鉴了Java中Swing的设计思想，集成了桌面应用的交互性和传统WEB应用的部署灵活性，是一个很好的前端Ajax框架。ExtJS官方网址：http://www.extjs.org.cn/

二、开始使用ExtJS框架（开发第一个ExtJS程序）

我这里使用的3.4.1版本，目前的版本已经去到4.2版本了。

开发步骤：

在web应用中引入Ext的样式文件
引入ExtJS的脚本库(两个，一个驱动adapter,另外一个ext-all.js)
Ext应用代码：使用Ext.onReady来调用ExtJS组件

第一个HelloWorld程序

html代码：

<!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"><!-- 第一个Ext程序 --><!-- 第一步一如Ext的样式文件 --><link href="ext-3.4.1/resources/css/ext-all.css" rel="stylesheet" type="text/css"/><!-- 第二步：一如Ext的库文件(底层驱动) --><script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script><!-- 第三步：一如ext-all.js文件 --><script type="text/javascript" src="ext-3.4.1/ext-all.js"></script><!-- 一如第一个ExtJS程序 --><script type="text/javascript" src="hello-extjs.js"></script><title>Hello-ExtJS</title></head><body><div id="hello"></div></body></html>

js代码：

Ext.onReady(function() {// Ext.Msg.alert("第一个Ext窗口", "HelloWorld！");var window = new Ext.Window({title : "HelloWorld",maximizable : true, width : 300,height : 300,});window.show();});

最终显示效果：