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 JS 准备好呈现 Ext JS 元素，就会调用 Ext.onReady() 方法。
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 文件，您将在浏览器中获得以下输出。
