本章列出了在Ext JS中首先編寫Hello World程序的步驟:
在我們選擇的編輯器中創(chuàng)建index.htm頁面。 將所需的庫文件包含在html頁面的head部分,如下所述:
index.html
<!DOCTYPE html>
<html>
<head>
<link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
<script src="./ext-6.0.0/build/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.Panel', {
renderTo: 'helloWorldPanel',
height: 200,
width: 600,
title: 'Hello world',
html: 'First Ext JS Hello World Program'
});
});
</script>
</head>
<body>
<div id="helloWorldPanel" />
</body>
</html>
Explanation
Ext.onReady()方法將在Ext JS準(zhǔn)備好渲染Ext JS元素時(shí)調(diào)用。
Ext.create()方法用于在Ext JS中創(chuàng)建對(duì)象,這里我們創(chuàng)建一個(gè)簡單的面板類Ext.Panel的對(duì)象。
Ext.Panel是Ext JS中用于創(chuàng)建面板的預(yù)定義類。
每個(gè)Ext JS類都有不同的屬性來執(zhí)行一些基本的功能。
Ext.Panel類有以下各種屬性:
renderTo 是此面板必須呈現(xiàn)的元素。 \'helloWorldPanel\'是Index.html文件中的div id。
Height 和寬度屬性用于提供面板的自定義尺寸。
Title 屬性是為面板提供標(biāo)題。
Html 屬性是要在面板中顯示的html內(nèi)容。
在標(biāo)準(zhǔn)瀏覽器中打開index.html文件,您將在瀏覽器上獲得以下輸出。
更多建議: