Ext.js - İlk Program

Bu bölüm, Ext JS'de ilk Hello World programını yazma adımlarını listeler.

Aşama 1

Seçtiğimiz 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://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      
      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.Panel', {
               renderTo: 'helloWorldPanel',
               height: 200,
               width: 600,
               title: 'Hello world',
               html: 'First Ext JS Hello World Program'
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "helloWorldPanel" />
   </body>
</html>

Açıklama

Ext.onReady () yöntemi, Ext JS, Ext JS öğelerini oluşturmaya hazır olduğunda çağrılacaktır.
Ext.create () yöntemi, Ext JS'de bir nesne oluşturmak için kullanılır. Burada Ext.Panel basit panel sınıfından bir nesne oluşturuyoruz.
Ext.Panel, bir panel oluşturmak için Ext JS'de önceden tanımlanmış sınıftır.
Her Ext JS sınıfı, bazı temel işlevleri gerçekleştirmek için farklı özelliklere sahiptir.

Ext.Panel sınıfı, -

renderTobu panelin oluşturulması gereken öğedir. 'helloWorldPanel', Index.html dosyasındaki div kimliğidir.
Height ve width özellikler panelin boyutunu özelleştirmek içindir.
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 tarayıcıda aşağıdaki çıktıyı alacaksınız.