ExtJS入门知识进阶一

lzh166

浏览: 298073 次
性别:
来自: 北京

最近访客更多访客>>

sshcainiao

linziyuu

yzs1013

rurama

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ExtJS

EXT JavaScript CSS UI JSP

Ext是一个javascript库，它包含有javascript文件以及CSS文件和一些图片资源文件。所以要引用它，相当简单。把它解压之后，即可引用，比如：

<link rel="stylesheet" type="text/css" href="../script/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../script/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../script/ext/ext-all.js"></script>

具体的路径，大家根据自己机器上的路径来定。

让我们来开始第一个程序：

1、首先编写一个JSP文件：

<%@ page language="java" contentType="text/html; charset=GB18030"
    pageEncoding="GB18030"%>
<!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=GB18030">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../script/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../script/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../script/ext/ext-all.js"></script>
<script type="text/javascript" src="index01.js"></script>
</head>
<body>

</body>
</html>

可以看到，在这个JSP文件中，引入了index01.js文件，下面我们来编写这个index01.js文件：

2、编写index01.js文件

Ext.onReady(
	function(){
		//获得document.body这个DOM元素，并更新它的内容
		Ext.get(document.body).update("<div id='test'></div>");
		
		//创建一个Panel的UI对象
		new Ext.Panel({
			renderTo:"test", //并将这个Panel的UI对象展现到test元素中
			title:"测试标题", //这个是Panel对象的标题
			html:"<font color='red'>这里是内容</font>", //Panel对象的内容
			width:"200px" //Panel对象的高度
		});
	}
);

3、运行index01.jsp，即可以得到如下效果

4、我们可以改变一下index01.js中的内容，比如增加一个属性：

Ext.onReady(
	function(){
		//获得document.body这个DOM元素，并更新它的内容
		Ext.get(document.body).update("<div id='test'></div>");
		
		//创建一个Panel的UI对象
		new Ext.Panel({
			renderTo:"test", //并将这个Panel的UI对象展现到test元素中
			title:"测试标题", //这个是Panel对象的标题
			html:"<font color='red'>这里是内容</font>", //Panel对象的内容
			width:"200px", //Panel对象的高度
			collapsible: true //增加这个属性，表示内容部分可以折起来
		});
	}
);

注意最后一个属性：collapsible:true！

运行之后，效果如下:

右上角出现了一个三角框，点击它，即可以收起下面的内容！

这些，就是Ext给我们带来的初步印象。

要想能够灵活应用Ext，我们必须有步骤的去学习关于Ext中各种内容，深入了解Ext的设计原理，然后才能得心应手、随心所欲的去运用、扩展、封装Ext，真正精通javascript这门语言。

分享到：

ExtJS入门知识进阶一 | String、StringBuffer和StringBuilder之间 ...

2010-04-17 21:46
浏览 1527
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论