Ext.js - 第一个程序

本章列出了在 Ext JS 中编写第一个 HelloWorld 程序的步骤。

步骤 1

在任意选定的编辑器中创建一个 index.htm 页面。在 html 页面的头部分包含必需的库文件，如下所示。

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 文件，在浏览器中会得到如下输出。

打印页面