Ext.js 第一个程序
本章列出了在 Ext JS 中编写第一个 Hello World 程序的步骤。
步骤 1
在我们选择的编辑器中创建一个 index.htm 页面。在html页面的head部分包含需要的库文件如下。
index.htm
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css"
rel = "stylesheet" />
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/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>
说明
Ext.onReady() 方法将在 Ext JS 准备好呈现 Ext JS 元素后调用。
Ext.create() 方法用于在 Ext JS 中创建对象。这里我们创建了一个简单面板类 Ext.Panel 的对象。
Ext.Panel 是 Ext JS 中用于创建面板的预定义类。
每个 Ext JS 类都有不同的属性来执行一些基本功能。
Ext.Panel 类具有各种属性，例如-
renderTo 是此面板必须呈现的元素。 'helloWorldPanel' 是 Index.html 文件中的 div id。
Height 和 width 属性用于自定义面板的大小。
Title 属性是为面板提供标题。
Html 属性是要在面板中显示的 html 内容。
步骤 2
在标准浏览器中打开 index.htm 文件，您将在浏览器上看到以下输出。
