Ext学习之HelloWorld

hintcnuie

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

最近访客更多访客>>

wangchh8134

yhcc_0817

luohhyo

魁拔222

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

EXT JavaScript CSS Firebug HTML

1.首先，要下载ext，解压后，将其存放到WebRoot目录下。

2.建立test目录，在目录下新建一个helloworld.html页面，页面内容如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Ext HelloWorld</title>
	
    <meta http-equiv="keywords" content="Ext Example HelloWorld">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=GB18030">
    
    <!-- Include Ext and app-specific scripts: -->
    <script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext/ext-all-debug.js"></script>
    <script type="text/javascript" src="helloworld.js"></script>
    
    <!-- Include Ext stylesheets here: -->
    <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">

  </head>
  
  <body>
  </body>
</html>

在这个文件的head部分，引入了Ext文件，同时还引入了一个helloworld.js文件，这个文件是我们helloworld例子中的最主要的文件。

3.在test目录下建立helloworld.js:

Ext.onReady(function(){
	Ext.getBody().update("<div id='helloworld'></div>");
	new Ext.Panel({
		renderTo:'helloworld',
		width:'200px',
		draggable:true,
		html:'Hello,This is my first Ext program'
	});
	
	
});

在这个文件中，我们首先调用Ext.onReady(function)方法，这个方法的主要功能就是，当页面（document）dom加载完毕的时候，开始执行onReady函数参数中定义的那个函数，在这个例子中执行的调用就是我们定义的新的匿名函数，如下所示：

function(){
	Ext.getBody().update("<div id='helloworld'></div>");
	new Ext.Panel({
		renderTo:'helloworld',
		width:'200px',
		html:'Hello,This is my first Ext program'
	});
	
	
}

在这个匿名函数中，首先执行Ext.getBody方法，得到document.body对象，这个对象是经过Ext包装过的Element类，所以拥有Element类的所有方法，update就是一个。update方法用来主对象中的html片段，如果没有，则创建，所以我们在页面上就创建了一个新的div,id为helloworld.

接下来，通过new.Ext.Panel(),我们又创建了一个Panel对象，定义了panel的标题和内容，在这里需要值得一提的是renderTo属性，renderTo属性指定这个panel渲染在dom的哪一个节点上，在这里我们使用了上面刚刚创建的helloworld节点。

这样，我们第一个Ext的例子就完成了。需要注意的是，创建的这个div和panel都是通过Ext动态创建出来的，所以在页面上通过查看源代码是看不到的，通过firebug等工具，才能看到这种效果，如下图所示：