2.3 编写“Hello World”程序明白了Ext JS 4配置后，就可编写“Hello World”程序了。新建一个HTML文件Hello_World.html，加入如代码清单2-1所示的代码。代码清单2-1 Hello World程序
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>第2章 示例2-1 Hello World</title> <link rel="stylesheet" type="text/css" href="../Ext4/resources/css/ext-all.css"/> <script type="text/javascript" src="../Ext4/bootstrap.js"></script> <script type="text/javascript" src="../Ext4/locale/Ext-lang-zh_CN.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function(){ if(Ext.BLANK_IMAGE_URL.substr(0,4)!="data"){ Ext.BLANK_IMAGE_URL="./images/s.gif"; } //Ext.create('Ext.Viewport',{ new Ext.Viewport({ layout:'fit', items:[{ xtype:"panel", title:"欢迎", html:"<h1 style='text-align:center;font-size:60px;font-weight:bold;'>Hello World</h1>" }] }); }) </script> </body> </html>代码主要包括两部分：第一部分是在head部分配置了Ext JS库文件和样式文件的引用；第二部分是在Ext.onReady函数中使用Viewport定义界面，并在一个面板内显示“Hello World”。在浏览器中打开页面将看到如图2-1所示的结果。
相关资源：七夕情人节表白HTML源码(两款)