ExtJS梦想之旅(一)--第一个ExtJS程序(HelloWorld)

       前两天一直在学习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版本了。

     开发步骤:

  1. 在web应用中引入Ext的样式文件
  2. 引入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();
});

最终显示效果:

 



 

 

      

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Seven的代码实验室

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值