JavaScript基于对象编程的概念(Ext)1

入门介绍

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>");

      

       //创建一个PanelUI对象

       new Ext.Panel({

           renderTo:"test", //并将这个PanelUI对象展现到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>");

      

       //创建一个PanelUI对象

       new Ext.Panel({

           renderTo:"test", //并将这个PanelUI对象展现到test元素中

           title:"测试标题", //这个是Panel对象的标题

           html:"<font color='red'>这里是内容</font>", //Panel对象的内容

           width:"200px", //Panel对象的高度

           collapsible: true //增加这个属性,表示内容部分可以折起来

       });

    }

);

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

运行之后,效果如下:



 

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

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

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

 

你可能感兴趣的:(JavaScript,编程,UI,css,ext)