Sencha Touch - İlk Program

Bu bölümde, Ext JS'de ilk Hello World programını yazma adımlarını listeleyeceğiz.

Aşama 1

Seçtiğimiz bir düzenleyicide bir index.htm sayfası oluşturun. Gerekli kitaplık dosyalarını html sayfasının baş kısmına aşağıdaki gibi ekleyin.

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>

Açıklama

Ext.application () yöntemi, Sencha Touch uygulamasının başlangıç noktasıdır. Name özelliğiyle bildirilen 'Sencha' adlı global bir değişken oluşturur - Modeller, Görünümler ve Denetleyiciler gibi tüm Uygulama sınıfları bu tek ad alanı altında yer alır ve bu da global değişkenlerin ve dosya adlarının çarpışma olasılığını azaltır.
launch () yöntemi, sayfa hazır olduğunda ve tüm JavaScript dosyaları yüklendiğinde çağrılır.
Ext.create () yöntemi, Sencha Touch'ta bir nesne oluşturmak için kullanılır. Burada Ext.tab.Panel basit panel sınıfından bir nesne oluşturuyoruz.
Ext.tab.Panel, Sencha Touch'ta bir panel oluşturmak için önceden tanımlanmış sınıftır.
Her Sencha Touch sınıfı, bazı temel işlevleri gerçekleştirmek için farklı özelliklere sahiptir.

Ext.Panel sınıfı, -

fullscreen özellik tam bir ekrandan yararlanmaktır, dolayısıyla panel tam ekran alanı kaplar.
items özellik, çeşitli öğeler için konteynerdir.
iconCls farklı simgeleri görüntülemek için kullanılan sınıftır.
title özellik, başlığın panele verilmesidir.
html özellik, panelde gösterilecek html içeriğidir.

Adım 2

İndex.htm dosyasını standart bir tarayıcıda açın ve aşağıdaki çıktıyı alacaksınız.