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所示的结果。
时间： 2024-11-03 12:36:20