Sencha Touch - Program Pertama

Dalam bab ini, kami akan membuat daftar langkah-langkah untuk menulis program Hello World pertama di Ext JS.

Langkah 1

Buat halaman index.htm di editor pilihan kami. Sertakan file perpustakaan yang diperlukan di bagian kepala halaman html sebagai berikut.

index.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>

Penjelasan

Metode ext.application () adalah titik awal dari aplikasi Sencha Touch. Ini membuat variabel global yang disebut 'Sencha' yang dideklarasikan dengan properti name - semua kelas Aplikasi seperti Model, Tampilan, dan Pengontrolnya akan berada di bawah namespace tunggal ini, yang mengurangi kemungkinan bertabrakan variabel global dan nama file.
launch () metode dipanggil setelah halaman siap dan semua file JavaScript dimuat.
Metode ext.create () digunakan untuk membuat objek di Sencha Touch. Di sini, kami membuat objek kelas panel sederhana Ext.tab.Panel.
Ext.tab.Panel adalah kelas standar di Sencha Touch untuk membuat panel.
Setiap kelas Sencha Touch memiliki properti berbeda untuk menjalankan beberapa fungsi dasar.

Kelas Ext. Panel memiliki berbagai properti seperti -

fullscreen Properti menggunakan layar lengkap, maka panel akan mengambil ruang layar penuh.
items properti adalah wadah untuk berbagai item.
iconCls adalah kelas yang digunakan untuk menampilkan ikon yang berbeda.
title properti adalah untuk memberikan judul ke panel.
html properti adalah konten html yang akan ditampilkan di panel.

Langkah 2

Buka file index.htm di browser standar dan Anda akan mendapatkan output berikut.