Sencha Touch - 第一个程序

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

步骤1

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

索引.htm

现场演示 
<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js">
      </script>
      <script type = "text/javascript">
         Ext.application( {
            name: 'Sencha', launch: function() {
               Ext.create("Ext.tab.Panel", {
                  fullscreen: true, items: [{
                     title: 'Home', iconCls: 'home', html: 'Welcome to sencha touch'
                  }]
               });
            }
         });
      </script>
   </head>
   
   <body>
   </body>
</html>

解释

  • Ext.application() 方法是 Sencha Touch 应用程序的起点。它创建一个名为“Sencha”的全局变量，并用 name 属性声明 - 所有应用程序的类（例如其模型、视图和控制器）都将驻留在这个单一命名空间下，这减少了全局变量和文件名冲突的机会。

  • 一旦页面准备好并且加载了所有 JavaScript 文件，就会调用 launch() 方法。

  • Ext.create() 方法用于在 Sencha Touch 中创建对象。在这里，我们创建一个简单面板类 Ext.tab.Panel 的对象。

  • Ext.tab.Panel 是 Sencha Touch 中用于创建面板的预定义类。

  • 每个 Sencha Touch 类都有不同的属性来执行一些基本功能。

Ext.Panel 类具有各种属性，例如 -

  • fullscreen属性是为了利用整个屏幕，因此面板将占用全屏空间。

  • items属性是各种项目的容器。

  • iconCls是用于显示不同图标的类。

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

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

第2步

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