Ext.js 第一個(gè)程序
2022-05-19 17:56 更新
本章列出了在Ext JS中首先編寫Hello World程序的步驟:
步驟1
在我們選擇的編輯器中創(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)容。
第2步
在標(biāo)準(zhǔn)瀏覽器中打開index.html文件，您將在瀏覽器上獲得以下輸出。
以上內(nèi)容是否對(duì)您有幫助：
更多建議：