Ext.js - 第一个程序

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

步骤1

在我们选择的编辑器中创建一个index.htm 页面。在 html 页面的 head 部分包含所需的库文件，如下所示。

索引.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。

  • 高度和宽度属性用于自定义面板的尺寸。

  • Title属性是为面板提供标题。

  • Html属性是要在面板中显示的html内容。

第2步

在标准浏览器中打开index.htm 文件，您将在浏览器上看到以下输出。