Ext学习之HelloWorld

hintcnuie · 发表于 2013-2-7 21:19:50

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">        <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>        <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等工具，才能看到这种效果，如下图所示：

		自动登录	找回密码
密码			立即注册

Ext学习之HelloWorld

浏览过的版块