SUI-渲染一个简单的页面

1、在html节点内加入sui的命名空间
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://www.toany.net/ui" >

2、导入JSI
<script charset="UTF-8" type="text/javascript" src="boot.js"></script>

3、使用JSI导入SUI
$import("sui.*");


4、初始化SUI.Engine
SUI.Engine.initialize();


5、渲染指定节点
SUI.Engine.render(document.body);


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://www.toany.net/ui" >
<head>
	<title>Hello SUI</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">     
		<script charset="UTF-8" type="text/javascript" src="boot.js"></script>

		<link rel="stylesheet" type="text/css" href="javascripts/org/ext/v2_1/resources/css/ext-all.css" />
		<script charset="UTF-8" type="text/javascript" src="javascripts/org/ext/v2_1/adapter/ext/ext-base.js"></script>
		<script charset="UTF-8" type="text/javascript" src="javascripts/org/ext/v2_1/ext-all-debug.js"></script>
		<script>
				$import("sui.*");
		</script>
		<script>       
				function body_load(){
					Ext.BLANK_IMAGE_URL = 'javascripts/org/ext/v2_1/resources/images/defaults.gif'
					SUI.Engine.initialize();
					SUI.Engine.render(document.body);
				}
				window.onload = body_load;
		</script>
</head>
<body>
	<ui:button id="extButton" text="Click me!" onclick="alert('Hello,SUI')" ></ui:button>
</body>
</html>

你可能感兴趣的:(JavaScript,html,XHTML,ext,JSI)