Учебники

Sencha Touch — Первая программа

Декабрь 18, 2018

В этой главе мы перечислим шаги для написания первой программы Hello World на Ext JS.

Шаг 1

Создайте страницу index.htm в редакторе по нашему выбору. Включите необходимые файлы библиотеки в разделе заголовка HTML-страницы следующим образом.

index.htm

Live Demo

<!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 — все классы приложения, такие как его модели, представления и контроллеры, будут находиться в этом едином пространстве имен, что уменьшает вероятность столкновения глобальных переменных и имен файлов.

  • Метод launch () вызывается, когда страница готова и все файлы JavaScript загружены.

  • Ext.create () метод используется для создания объекта в Sencha Touch. Здесь мы создаем объект простой панели класса Ext.tab.Panel.

  • Ext.tab.Panel — это предопределенный класс в Sencha Touch для создания панели.

  • Каждый класс Sencha Touch имеет различные свойства для выполнения некоторых основных функций.

Метод Ext.application () является отправной точкой приложения Sencha Touch. Он создает глобальную переменную под названием «Sencha», объявленную со свойством name — все классы приложения, такие как его модели, представления и контроллеры, будут находиться в этом едином пространстве имен, что уменьшает вероятность столкновения глобальных переменных и имен файлов.

Метод launch () вызывается, когда страница готова и все файлы JavaScript загружены.

Ext.create () метод используется для создания объекта в Sencha Touch. Здесь мы создаем объект простой панели класса Ext.tab.Panel.

Ext.tab.Panel — это предопределенный класс в Sencha Touch для создания панели.

Каждый класс Sencha Touch имеет различные свойства для выполнения некоторых основных функций.

Класс Ext.Panel имеет различные свойства, такие как —

  • Свойство fullscreen позволяет использовать полный экран, поэтому панель будет занимать полноэкранное пространство.

  • Свойство items — это контейнер для различных предметов.

  • iconCls — это класс, используемый для отображения разных значков.

  • Свойство title должно предоставлять заголовок панели.

  • Свойство html — это содержимое html, которое будет отображаться на панели.

Свойство fullscreen позволяет использовать полный экран, поэтому панель будет занимать полноэкранное пространство.

Свойство items — это контейнер для различных предметов.

iconCls — это класс, используемый для отображения разных значков.

Свойство title должно предоставлять заголовок панели.

Свойство html — это содержимое html, которое будет отображаться на панели.

Шаг 2

Откройте файл index.htm в стандартном браузере, и вы получите следующий вывод.

45
Share: