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.