ExtJS 'in Temel Yapısı ve Özellikleri

Ext.app.Application : Tek bir sayfaya ait ExtJS 4 uygulaması ve Viewport ile temsil edilir.

Ext.application({
                  name: 'Myapp',
                  launch: function(){
                            Ext.create('Ext.container.Viewport',{
                                    items: {
                                            html: 'my app'
                                           }
                                      });
                                    }
               });

Bu uygulamanın bütün sınıflarını tek bir ad altında toplar. Önce myapp adlı global bir değişken oluşturulur. myapp, başvuru almak için GetApplication yöntemini kullanır.

var app=MyApp.getApplication(); => Şimdi kullanıma hazır ve genellikle viewport ile kullanılır.

Ext.app.Controller : Controller ile birlikte uygulamanın bağlanması sağlanır. Burada kullanıcıları yönetmek için bir denetleyici oluşturulur.

Ext.define('MyApp.controller.Users',{
                         extend: 'Ext.app.Controller',
                         init  :  function(){
                                  this.control({
                                     'viewport>panel':{
                                         render:this.onRendered
                                                      } 
                                               });
                                            },
                   onPanelRendered: function(){
                          console.log('The panel was rendered');
                                              }
                });

Uygulamayı takip edebilmek için init fonksiyonu güncellendi.Init fonksiyonu; doğrudan viewportun panelini bulur.

Ext.button.Button: Tıklandığında kodu çalıştırmak veya kullanmak için buton oluşturur.

Ext.create('Ext.Button',{
                         text: 'Click me',
                         renderTo: Ext.getBody(),
                         handler: function(){
                                  alert: ('Butona tıkladın');
                                            }
          });


Ext.button.Cycle: Bir buton içerisinde birden fazla özellik seçebiliriz. Butonda açılan bir choose menü gibi düşünebiliriz.




Ext.button.Split: Tıklandığında ayrı bir olay açılır.

Ext.container.ButtonGroup: Butonların sekmeli bir şekilde düzenlenmesini sağlar.

Ext.create('Ext.panel.Panel',{
           title: 'Panel with...',
           width: 500,
           height: 300,
           renderTo: document.body,
           bodyPadding: 10,
           html: 'HTML Panel Content',
           tbar: [{
                   xtype: 'buttongroup',
                   columns: 3,
                   title:
                   items: [{
                             text: ..
                             scale: ..  },
                  ...
                 {
                  ...
                 }]
                  
Sınıf Örneği:
function Bilet(){
                  this.adet=0;
                  this.tip=null;
                  this.getAdet=function(){
                                       return "Adet: "+this.adet;
                                         };
                }

Nesne Örneği:
var bilet= new Bilet();
//ya da
var bilet={
           adet : 0,
           'tip': null,
              getAdet: function(){
                                return this.adet;
                              };
          toString: function(){
                                return "Adet: "+this.adet;
                              };
          }
             
var bilet= new Object();
bilet.adet= 0; 
bilet.'tip'= null;
Bilet.getAdet= function(){...};
Bilet.toString= function(){...};


Kalıtım: Piyango.prototype=new Bilet();
         Piyango.prototype.constructor=Bilet;
         function Piyango(){
                            this.tip='PIYANGO';
                            this.toString=function(){
                                   return "Adet: "+this.adet;
                                                    };
                                                                    }
Bilete getTip adlı bir metod eklediğimizde Piyango'da da görünmesini istiyoruz.
Bilet.prototype.getTip=
             function(){
                        return this.tip;
                       }


'Super' metodları çocuk sınıfından çağırmak
Piyango.prototype.getTip=function(){
            Bilet.protoype.getTip.call(this);
                                   }

• Function.call javascriptin sağladığı bir özelliktir. Eğer çalıştırılan metot parametre alıyorsa "this"den sonra sırasıyla gönderilmelidir.
• JS metotlarında override,overload yoktur. Bir bağlam içinde, aynı isimli (parametreler önemli değildir) birden fazla metot yazıldığında hata vermez.

function method1(p1,p2){...} => geçersiz

function method1(abc){...}

1. Tip kontrolü yoktur.
2. Metot çağırırken parametre sayısı önemli değildir. Çalışma zamanında önemlidir.

Action: ExtJS' de eylem oluşturmak mümkündür.

var action=new Ext.Action //yeni eylem tanımladık.

({

   text: 'Seçim 1',

   handler: function(){ //tıklandığında yapması gerekenleri //içeren fonksiyon

Ext.Msg.alert('Tıkladın','Seçim 1'e tıkladınız');

                     });

Doğrudan bir araç çubuğuna eylem eklemek için;

(oluşturduğumuz form elemanının içinde)

...

tbar[                      //Araç çubuğunda bir action menu oluşturduk

     action,

     {

      text: 'Action Menu',

      menu: [action]

     }]

new Ext.Button(action) //butona eylem ekleme
action.setText(text);  //butonun adını değiştirme
action.setDisabled(!action.isDisabled());
this.setText(action.isDisabled() ? 'Aktif et' : 'Pasif et');

Bir edit menüsü butonu oluşturabiliriz ve action ile butona eylem verebiliriz.

var editMenuBtn={
                  text: 'Edit',
                  menu: [ pasteAction ]} 
/*pasteAction öncesinde şunu tanımlamalıyız: 
var pasteAction= new Ext.Action({
                                 text: 'Paste',
                                 handler: genericHandler}); genericHandler içine de özelliğini istediğmiiz fonksiyonu atabiliriz */

Kısa Notlar:

• new Ext.Action
• Değişken tanımlama: var
• ExtJS bir script dilidir ve <script></script> arasında yazılır.
• Script,<head></head> veya <body></body> içerisinde tanımlanabilir.
• Script tipleri tanımlanır ve kodlar Ext.onReady(function(){...}); içinde yazılır.

Accordion: ExtJS ile accordion penceresi ve pencereye accordion paneli koymak mümkündür. Bunun için yeni bir pencere oluşturmak ve layout parametresini accordion olarak belirlemek yeterlidir.

Bir panel oluşturalım. ( var panel1={ 
                           xtype: 'panel', 
                           title: 'Panel1',
                           html: 'xy'  })

Bunu pencerede çağırıp; pencereye accordion özelliği verelim.

new Ext.Window{

           width: 500,
           height: 300,
           layout: 'accordion',
           layoutConfig{ animated: true},// panellerin kayarak inmesini sağlar, dinamik bir görünüm gibi    
           items: [panel1]}).show(); //elemanların içinde paneli çağırıp, gösteriyoruz.




Viewport: ExtJS'de görünüm alanı oluşturmayı sağlar. İçine butondan pencereye, girdden treeye her şeyi ekleyebiliriz. Bir container gibi düşünebiliriz. collapsible: true dediğimizde viewport açılıp/kapanma özelliğine sahip olur.

new Ext.Viewport ile çağrılır.

new Ext.Viewport({
                  layout: 'border',
                  defaults: {
                             frame: true,
                             split: true
                            }
                 },

                items: [{

                    region:'north',   //konumu ortada

                                                  minHeight: 300

                       ...

                    collapsible: true

                        },

                        {                     

                    xtype: 'container',  //viewportun geri kalanını doldurur.

                    region:'center',

                    layout: 'fit'

                       ...    

                                                          }

var panel1= new Ext.Panel   //panel oluşturur.

hbox: Viewport'a panel koyabildiğimiz gibi window içinde hbox da tanımlayabiliriz.

new Ext.Window({
                layout: 'hbox',
                    ...
                layoutConfig: { pack: 'start' }
                    ...
                items: [
                        {
                         title: 'panel1',
                                                              height: 100,
                         width: ... }, ...
                       ]
               }).show();

Grid: ExtJS ile uğraşırken en çok grid özellikleri işime yaramıştı. Grid, tablo verilerini dinamik olarak değiştirmek, gizlemek, sıralamak, sütunlar ile esnek bir şekilde çalışmak vb. işlemlerin yapılmasına olanak sağlar.

var gridOzellik= new Ext.grid.PropertyGrid({
                   ...
                   propertyNames: {
                        tasted: QA,
                           ...
                                  },
                   source: {//tablo elemanları beirlenir.
                       '(isim)': 'Grid Özellikleri',
                       gruplama: false,
                             //tarih tanımlama fonksiyonu
                       tarih: new Date(Date.parse('01.01.2014'));
                       borderWidth: 3 //kenar genişliği özelliği vs.
                           },
                  viewConfig: {
                       forceFit: true,
                       scrollOffset: 2
                              }          });

Daha sonra istediğimiz şekilde (örn. buton içinde) çağırabiliriz.

ozellikliGrid.setSource({
  '(isim)': 'Grid Özellikleri',
  gruplama: false });

//setSource ile butona tıklayınca verileri default haline getirir.


Tooltip: Ext.Tooltip kütüphanesini kullanır. Daha sonra tanımlanan tooltip div'de çağrılır.

new Ext.Tooltip({
                 target: 'tip1',
                  html: 'basit' });

div'de çağırıyoruz

...
<body>
<div id='tip1' class=...> Temel</div>
</body>

• dismissDelay: 5000 //5 saniye boyunca açık olur.
• closable: true //kapatılabilme özelliği
• draggable: true //sürüklenebilme özelliği

Ext.dd sınıfı drag-drop olayını yönetmeyi sağlar.
Ext.apply DD yeni oluşturulan örneklere geçersiz nesne uygulamayı sağlar.

Textarea: Metin kutusu alanı. Herhangi bir panelde (formpanel,viewport vb.) items içinde tanımlanır.

items: [{
          xtype: 'textarea',
          name: ...,
          labelSeparator: ...,
          anchor: '%100'
        }, {...} ]


Statusbar: Statusbar eklemek için;
<link rel="stylesheet" type="text/css" href="ext-3.4.0"/examples/ux/statusbar/css/statusbar.css /> satırı <head> içine eklenir.

Önce bir fonksiyon tanımlanır.

var loadFn= function(btn,statusBar){
    btn=Ext.getCmp(btn); //veriyi alır.
    statusBar=Ext.getCmp(statusBar);
    btn.disable();
    statusBar.showBusy(); //meşgul göster.

(function(){
            statusBar.clearStatus({useDefaults: true});
            btn.enable(); }).defer(2000);
           });

new Ext.Panel({
               collapsible: true,
               bodyStyle: 'padding 10 px;',
               ...
               items[{
                       xtype: 'button',
                       ...
                       bbar: new Ext.ux.StatusBar({//statusbar
                                                   ...
                                                     //özellikleri tanımlanır.
                                                  });
}]
});