Extjs 4 education

Ext JS 4 Eğitimi
Haziran-2012

Gereksinimler

 JEE bilgisi (HttpServlet)
 Temel Javascript, html ve css bilgisi
 JEE Eclipse
 Apache Tomcat 6
 Firefox (Firebug ve WebDeveloper)
 Ext JS 4.0.7 kütüphane dosyaları
 bootstrap.js
 ext-all.js
 resources/
 docs/
 examples/

Nesneye Yönelik
Javascript

 Sınıf
function Bilet () {
this.adet = 0;
this.tip = null;
this.getAdet = function (){
return this.adet;
};
this.toString = function (){
return "Adet: " + this.adet;
};
}

Nesneye Yönelik
Javascript

 Nesne
var bilet = new Bilet();

ya da

var bilet = { var bilet = new Object();
adet: 0, bilet.adet = 0;
‘tip’: null, bilet[‘tip’] = null;
getAdet : function (){ Bilet.getAdet = function (){…};
return this.adet; Bilet.toString = function (){…}
};
toString : function (){
return "Adet: " +
this.adet;
};
}

Nesneye Yönelik
Javascript
 Kalıtım (prototype)
Piyango.prototype = new Bilet();
Piyango.prototype.constructor = Bilet;
function Piyango (){
this.tip = 'PIYANGO';
this.toString = function (){
return "Adet: " + this.adet;
};
}
Kod örneğini görebiliriz (NY)

Bilete getTip adlı bir metod eklediğimizde Piyango’da da görünmesini istiyoruz.

Bilet.prototype.getTip = var piyango = new Piyango();
function (){ piyango.getTip();
return this.tip;
}

Nesneye Yönelik
Javascript

‘super’ metodları çocuk sınıftan çağırmak
Piyango.prototype.getTip = function (){
Bilet.prototype.getTip.call(this);
}

Funcation.call javascript’in sağladığı bir özelliktir.
Eğer çalıştırılan metod parametre alıyorsa
“this”’den sonra sırasıyla gönderilmelidir.

Kod örneğini görebiliriz (NY)

Nesneye Yönelik
Javascript

• Javascript metodlarında override, overload yoktur. Bir
bağlam içinde, aynı isimli (parametreler önemli değildir)
birden fazla metod yazıldığında hata vermez.
function method1(p1, p2) {
//...geçersiz
}

function method1(abc) {
//...
}

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

Ext JS 4 Giriş

• Ext JS 4 SDK
• Ext JS 3 ile Ext JS 4 arasındaki farklar
– Sınıfların paketleri değiştirildi. Sınıflar
paketlerde toplandı.
– Ext JS 4’te sınıf isimleri değiştirildi. Ext JS
3’ün sınıf isimleri 4’te korundu
(alternateClassName).
• Ext JS 4 Yeni sınıf sistemi

Ext JS 4 SDK

ext-all.js: Bu js dosyası bütün Framework kodlarının
bulunduğu dosyadır.
ext.js: Temel ext js kodlarının bulunduğu dosyadır.
Bu dosyalar, gerçek ortama yüklenmesi gereken
dosyalardır.

docs: Buradaki dosyaları yerel bir web sunucusuna
yükleyebilirsiniz. Internet erişimi gerekmenden API’lere
bakabilirsiniz.

jsbuilder: Bu dizindekileri kullanarak kodlarımızı
sıkıştırabilir ve saklayabiliriz.

builds:
ext-core.js: Ext JS’nin temel sınıflarının bulunduğu
dosyadır.

Not: -debug dosyaları, sıkıştırılmamış dosyalardır. Test
ve hata ayıklamak için kullanılabilirler.

Ext JS 4 SDK

ext.js ve ext-all.js arasındaki fark
• ext.js sadece gerekli olan dosyaları yükler (src dizininin
sunucuda olması gerekir). ext-all.js’de bütün kütüphane
kodları mevcuttur. Gerçek ortam için ext-all.js
kullanılabilir.

bootstrap.js
• Bu dosya ext-all.js veya ext-all-debug.js dosyasının
yüklenmesini kodların atıldığı sunucunun özelliklerine
göre ayarlamaktadır. ext-all-debug.js aşağıdaki koşullara
göre yüklenecektir.
– Sunucu ismi localhost ise
– Sunucu ismi IP(v4) adresiyse.
– Protokol file ise
Diğer durumlarda ext-all.js yüklenecektir.

Merhaba Dünya

• Çalışma
– Dokümana bir tane düğme (Ext.button.Button) ekleyelim.
– Düğmeye bastığımızda “Merhaba Dünya” mesajı verelim.
– Mesajı ilk önce alert’le daha sonra Ext.MessageBox’ı kullanarak verelim.

Sayfaya aşağıdakileri ekleyelim

<link rel="stylesheet" type="text/css"
href="../extjs/resources/css/ext-all.css" />
<script src="../extjs/bootstrap.js"></script>

Ext.onReady(function(){
Ext.create(‘Ext.button.Button’, {
handler: function (){alert (‘MERHABA’);}
}).render(document.body);
});

Bileşen Modeli

• Ext JS Bileşen modeli (Component Model) bileşenlerin ortak
işlemlerini yöneten merkezi model olarak adlandırılabilir.
• Bileşenlerde bir dizi işlem ortaktır. Bu aynı zamanda bir
bileşenin yaşam döngüsüdür.
– İlklendirme (initialize)
– Ekrana çizilmesi (render)
– Kaldırılması (destroy)
• Bütün bileşenler Ext.Component sınıfından türemiştir.

Bileşen Modeli

DatePicker
Ext.Component Bütün bileşenler modelin zorladığı
kurallar uymak zorundadır.
Button
Örneğin her bileşen
initComponent metodunu
gerçekleştirmek zordundadır.
Container
Window

Panel

Grid

Bileşen Modeli
Yaratma
Bileşen modeli iki türlü nesne yaratmayı sağlar

•Doğrudan yaratma

var metin = Ext.create(‘Ext.form.field.Text’, {
fieldLabel: ‘Ad’
})

•Sonradan yaratma [Deferred (Lazy) initialization] (performansı arttırır)

var metin = { Ext.create(‘Ext.form.Panel’, {
xtype: ‘textfield’ items: [{
} xtype: ‘textfield’
Ext.create(‘Ext.form.Panel’, { }]
items: [metin] });
});

Bileşen Modeli
Yaşam Döngüsü
• Ayarlar atanır
İlklendirme
İlklendirme • ComponentMgr kayıt
• Olaylar tanımlanır
• Çizilmeden önceki işlemler

Ekrana çizme
Ekrana çizme Kaldırma
Kaldırma

• beforeRender, onRender, • beforeDestroy, onDestry,
afterRender olayları tetiklenir afterDestroy olayları tetiklenir
• Bileşende alt bileşenler (items) • ComponentMgr silme
varsa onlar için birer div • destroy olayı tetiklenir
tanımlanır • Dinleyiciler silinir
Not: En çok cpu burada harcanır

Ext JS 4 Yeni Sınıf
Sistemi
Extjs 4’te Ext.create ve Ext.define nesne ve sınıf yaratmaya yarayan metotlardır.
Ext.define(‘MB.Sinif', {
//sınıfın metotları ve özellikleri
});

Extjs 3’te Extjs 4’te
Ext.namespace(‘MB’); MB.Window = Ext.define(Ext.Window, {
MB.Window = Ext.extend(Ext.Window, { //namespace (MB.Window) otomatik
title: ‘Merkez Bankası Pencere’, //tanımlanıyor
initComponent: function (){ extend: ‘Ext.Window’,
//ilklendirmeleri yap initComponent: function (){
//ilklendirmeleri yap
MB.Window.superclass.initComponent. this.callParent(arguments);
apply(this, arguments); }
} });
}); //new MB.Window().show()
new MB.Window().show(); //olarak da kullanılabilir.
Ext.create(‘MB.Window’).show();

Mixins (Daha sonra ayrıntılı olarak işlenecek)
Dinamik sınıf yükleme (Daha sonra ayrıntılı olarak işlenecek)
Statikler (Daha sonra ayrıntılı olarak işlenecek)

Temel Sınıflar

Ext.Element
Bütün görsel bileşenlerin Ext.Element tipinde bir öğesi bulunur. Dokümanın DOM
yapısındaki yerini gösterir.

Ext.CompositeElement
Ext.Element’lerin dizisi olarak kabul edebiliriz. Ext.Element’in bütün metodları tanımlı.
Çağrıldığında dizideki bütün elemanlara bu metod uygulanıyor.

Ext.DomHelper
Html node’ları oluşturmayı, node’ları değiştirmeyi sağlar.

Ext.DomQuery
Adından da anlaşılacağı üzere DOM içinde CSS selector kullanılarak, bileşenleri arar.

Kod örneğini görebiliriz (TS)

Ext JS 4
MVC Uygulama
Mimarisi

Ext JS 4’te uygulama yazma metodunda yeni bir
yaklaşım.
• Yeni MVC uygulama mimarisi
• Ext.ComponentQuery ve
Ext.container.Container
• Extjs 3’e göre uygulama
• Extjs 3 uygulamasının MVC’ye göre yazılması
• MVC yazarken gözetilmesi gerekenler
• Gerçek ortam için uygulamanın hazırlanması

Yeni MVC
Uygulama Mimarisi

MVC nasıl çalışıyor?
• Bir MVC uygulaması tanımlanırken,
uygulamanın adı ve yolu belirtilir. Belirtilen yola
göre gerekli olan sınıflar ve bu sınıflara ait
dosyalar namespace’e göre dinamik olarak
yüklenir.

• MVC aşağıdaki bileşenlerden oluşur
– Uygulama (Application)
– Kontrol Sınıfları (Controller)
– Görsel bileşenler (Views)
– Veri Kaynakları (Stores)
– Modeller (Models)

MVC yazarken
gözetilmesi gerekenler

 init metodu: Controller’ın view’lerle iletişimini
bu metotda tanımlayabiliriz.
 control metodu: Burada controller,
Ext.ComponentQuery’yi kullanarak sayfada
bulunan bileşenlere erişebiliyor. Örneğin bir
düğmenin click olayına. Örnekte görülebilir.
 NOT: Bu yöntem, controller ilk çağrılışta bileşenlerin
sorgulanacağı için ilk başta ek bir işlem maliyeti
getirir.
Not: Bu yazış şeklini değiştirebiliriz. En iyi
uygulama pratiklerinde görülebilir.

MVC Mimari Özeti
Application Ext.app.Application

requires
Controller [0..n] controllers
Ext.require ile
Views [0..n] views bütün requires sınıfları
yüklenir.
Stores [0..n] stores
Not: Kullanılmayacak
Models [0..n] models sınıfların dosyaları
yüklenecektir. Bu
performansı düşüren
bir durumdur.

Dinamik yükleme özelliği Uygulama, (Appliaction) controller’ları ve controller’larda
tanımlanan görünüm, veri depoları ve modelleri yüklemekle yükümlüdür. constructor
metodunda bu işlemler gerçekleşir.

Örnek (MVC)

Olay Yönetimi

• Javascript temel olaylarına örnek
Bir düğmenin üstüne tıklanması, farenin düğmenin
üstüne gelmesi ve farenin düğmenin sınırlarından
çıkması hep olaydır.
<input type="button" value="örnek1" onclick="alert('düğmeye tıklandı')">
<input type="button" value="örnek2"
onmouseover="document.getElementById('sonuc').innerHTML += 'üstüne
geldi'">

Örnek (OY1)

Olay Yönetimi

 Extjs olay tabanlı uygulama geliştirme yöntemini çok yoğun kullanan
bir kütüphanedir.
 Görsel bileşenlerin değişimlerinin ve Loader, Store vb. gibi asenkron
işlemleri kullanan sınıfların değişimlerinin yönetilmesi olay tabanlı
yöntemin kullanılmasıyla gerçekleşmektedir.
 Ext JS Ext.util.Observable sınıfı yardımıyla olay yönetimlerini
gerçekleştirmektedir.
 Ext JS sınıfları, tanımlanan durumlarda olay üretirler. Bu üretilen
olayın sonucunda ne yapmak istiyorsanız, olayı üreten nesneye bir
dinleyici (Listener) eklemeniz gerekir.
 addListener ya da on
 Eklenen dinleyici silmek istediğimizde
 removeListener ya da un
Button’da üretilen olayları görelim

Olay Yönetimi

• Örneğin; store yüklendiği zaman alert üretelim.

function doOnLoad(st, recs, succ, op, eOpts ) {
alert(‘Store yüklendi. Kayıt sayısı: ’ + recs.length);
};

var store = Ext.create(‘Ext.data.Store’, {
fields: [‘adi’, ‘soyadi’],
proxy: {
url: ‘Servlet?c=kisiYukle’
},
listeners: {
load: doOnLoad
}
});

//ya da
store.addListener(‘load’,doOnLoad);

Olay Yönetimi
(Örnek) Kişi
Bir pencere içindeki tablonun çift kliğine bir dinleyici ekleyeceğiz.
Örnek kod aşağıda gösterilmektedir.

Kisi Model
Ext.define ('MB.data.model.Kisi', {
extend: 'Ext.data.Model',
fields: ['ad', 'soyad'],
getAdSoyad: function (){
return Ext.String.format('{0} {1}',
this.data.ad,
this.data.soyad);
}
});

Olay Yönetimi
(Örnek) Grid
Kisi Grid
Ext.define ('MB.grid.Kisi', {
extend: 'Ext.grid.Panel',
alias: 'widget.kisigrid',
initComponent: function () {
this.columns = [{text:'Ad', dataIndex: 'ad'},
{text:'Soyad', dataIndex: 'soyad'}];
this.store = {
model: 'MB.data.model.Kisi',
data: [{ad:'Ayşe', soyad: 'Soyad1'},
{ad:'Ali', soyad: 'Soyad2'}]
};
this.callParent(arguments);
}
});

Olay Yönetimi
Window

Kisi Grid Window

Ext.define ('MB.window.Kisi', {
extend: 'Ext.window.Window',
initComponent: function (){
this.addEvents['kisisecildi'];
this.items = [{
xtype: 'kisigrid',
listeners: {
itemdblclick: function(view, r) {
view.up('window').fireEvent('kisisecildi', r);
}
}
}];
//diğer ilklendirmeler
}
});

Olay Yönetimi
Atama

var win = Ext.create('MB.window.Kisi', {
width: 300,
height: 100,
listeners: {
kisisecildi: function (r){
alert(r.getAdSoyad());
}
}
});
win.show();

Olay Yönetimi
Dinleyicileri Ekleme
Silme

Bir olay için birden fazla dinleyici
ekleyebiliriz
– bilesen.addListener(‘olayismi’, metod1)
– bilesen.addListener(‘olayismi’, metod2)

Eklenen dinleyicileri bileşenden kaldırmak için
– bilesen.removeListener(‘olayismi’, metod1)
– bilesen.removeListener(‘olayismi’, metod2)

Bir sonraki sayfadaki örneği inceleyelim.

Olay Yönetimi
var win = Ext.create('MB.window.Kisi', {
width: 400,
height: 200,
listeners: {
kisisecildi: doKisiSecildi1
},
buttons: [{
text: 'Dinleyici Sil',
handler: function (){
//kısa hali win.un
win.removeListener('kisisecildi', doKisiSecildi1);
}
}, {
text: 'Dinleyici Ekle',
//kısa hali win.on
win.addListener('kisisecildi', doKisiSecildi1);
}
}, {
text: 'Başka Dinleyici Ekle',
win.addListener('kisisecildi', doKisiSecildi2);
}
}]
});

Kod örneğini görebiliriz (OY2)

Veri Paketi ve
Doğrulama

• Model (pojo)
• Modelde ilişkiler (1-n, n-1)(Associations)
• Doğrulamalar
• Store
• Proxy
• Store’lar üzerinde işlemler

Ext.data paketi.

Veri Paketi ve
Doğrulama

Çok kullanılan sınıflar: Model, Proxy ve Store

Veri Paketi ve
Doğrulama (Model)
• Ext.data.Model sınıfı’nın Ext.define('MB.data.model.Kisi', {
extend: 'Ext.data.Model',
– Alanları (Ext.data.Field) fields: [
{name: 'ad'},//auto type,string'e çevrilecektir
• Tip {name: 'soyad', type: 'string'},
{name: 'yas', type: 'int'},
• Doğrulama (Validation) {name: 'kayitliMi', type: 'boolean'},
– İlişkileri (HasMany, {name: 'dogumTarihi', type: 'date',
dateFormat: 'd/m/Y'},
BelongsTo) {name: 'okul', type: Ext.data.Types.STRING},
{name: 'cinsiyet', type: 'string'}
– Metodları ]
– Proxy aracılığıyla verileri });

yükleme ve kaydetme var kisi = Ext.create('MB.data.model.Kisi', {
(Ext.data.Proxy) ad: 'Fatma',
soyad: 'Baydur',
Özellikleri vardır. yas: 25,
dogumTarihi: '16/03/1987'
okul: 'Hacettepe',
cinsiyet: 'K'
});

Not: fields’a eklenen her config{} Ext.data.Field
nesnesine dönüştürülür.
Not: type için Ext.data.Types sınıfında sabitler
tanımlanmıştır.
Ext.data.Types.INT, Ext.data.Types.DATE,
…

Veri Paketi ve Doğrulama
(Model Doğrulama)

• Ext.data.Model’i doğrulamak için validations özelliğini model tanımına
eklememiz gerekir.
• 5 tip doğrulama tipi vardır
– presence
– length
– format
– inclusion
– exclusion
validations: [
{type: 'presence', field: 'ad'},
{type: 'presence', field: 'soyad'},
{type: 'length', field: 'yas', min: 5, max: 20},
{type: 'inclusion', field: 'cinsiyet', list: ['K','E']}
]
//…
var kisi = Ext.create('MB.data.model.Kisi‘, {..});
var hatalar = kisi.validate(); //Ext.data.Errors
hatalar.isValid(); //boolean
hatalar.items //{{field: ‘ad’, message: ‘must be present’},{..},..}

Örnek (VPD1) ***Çalışma  form düzenle, hataları göster

Veri Paketi Ve Doğrulama
Verinin Yüklenmesi,
Kaydedilmesi

• Model proxy tanımlayarak verinin yüklenmesini ve
kaydedilmesini sağlayabilir.
Ext.define('MB.data.model.Kisi', {
proxy: {
type: 'rest',
url: '../MBServletRest',
//format: 'json', // MBServletServlet.json'a veriler json string şeklinde
post edilecek
//format girmezsek /MBServletRest’e gönderilir istekler
reader: {
type: 'json'
}
}

var kisi = Ext.create('MB.data.model.Kisi', ..);
kisi.save();
MB.data.model.Kisi.load(1101);
kisi.destroy();

Örnek (VPD2) ***Çalışma  java servlet düzenle

Proxy
• İki tip proxy var.
– Client
• LocalStorageProxy
• SessionStorageProxy
• MemoryProxy
– Server
• Ajax  Rest
• JsonP
• Direct
• Proxy hem Model için hem de Store için tanımlanabilir. Model’e niçin
proxy tanımladığımızı önce görmüştük.
• Store için, store’a yüklenecek modellerin nereden nasıl yükleneceğini
proxy ile belirleyebiliriz.

Not: Önceki örneklerde store tanımlamıştık fakat veriyi statik nesne
dizilerinden almıştık.

Sayfa Düzenleri

• Kütüphanenin en güçlü
tarafı sayfa düzenleri
– Esnek
– Hızlı
• Esneklikten kasıt
istediğimiz gibi bileşenleri
yerleştirebilmemiz
– Buna yönelik Component
Layouts eklenmiştir Ext JS
4’e.
• Ext JS 4’te yeni gelen
sayfa düzenleri
– DockLayout
– ToolbarLayout
– FieldLayout

Sayfa Düzenleri

• Ext JS 4’e ComponentLayout ve ContainerLayout
eklenmiştir. Form Layout Ext JS 4’te yok onun yerine
varsayılan anchor layout.
• Ext JS 4’te iki farklı sayfa düzeni olarak ayrılmıştır sayfa
düzenleri.
– Container Layout
• Border
• Box (HBox, VBox, Accordion)
• Fit
• …
– Component Layout
• Dock
• Toolbar
• Field
• TriggerField

Container Sayfa
Düzenleri Örnekler

Sık kullanılan sayfa düzenleri
• Hbox (flex)
• Vbox (flex, width)
• Border (center, north, south, east, west)
– region
• Table (colspan, rowspan)
– Columns
• Card Layout (sekmeli, tek görünüm)
– activeItem

Tablo, Ağaç ve
Form
• En çok kullanılan bileşenler tablo, ağaç ve
formlardır.
– Tablo Ext.grid.Panel (MVC)
– Ağaç Ext.tree.Panel (MVC)
– Form Ext.form.Panel

Ext.form.Panel

Ext.panel.Panel Ext.grid.Panel

Ext.panel.Table
Ext.tree.Panel

Form
• Form paneli
– Panel, kendisine eklenen
bileşenleri form şeklide
düzenleyebilir.
Ext.create('Ext.form.Panel', {
– Post edilebilir html form title: 'Kişi',
width: 300,
(Ext.form.Basic) frame: true,
özelliğini sağlar items: [{
xtype: 'textfield',
– Herhangi bir web fieldLabel: 'Ad',
name: 'ad'
kaynağına formu post },{
xtype: 'textfield',
edebiliriz. Bu asenkron bir fieldLabel: 'Soyad',
işlemdir. }],
name: 'soyad'

form.getForm().submit({ buttons: [{
text: 'Kaydet'
url: ‘Servlet?cmd=kaydet’ }]
}); });

Form
• Forma aşağıdaki tiplerde bileşen
ekleyebiliriz
•form Ext.form.Panel
•checkbox Ext.form.field.Checkbox
•combo Ext.form.field.ComboBox
•datefield Ext.form.field.Date
•displayfield Ext.form.field.Display
•field Ext.form.field.Base
•fieldset Ext.form.FieldSet
•hidden Ext.form.field.Hidden
•htmleditor Ext.form.field.HtmlEditor
•label Ext.form.Label
•numberfield Ext.form.field.Number
•radio Ext.form.field.Radio
•radiogroup Ext.form.RadioGroup
•textarea Ext.form.field.TextArea
•textfield Ext.form.field.Text
•timefield Ext.form.field.Time
•trigger Ext.form.field.Trigger

Bütün bileşen tiplerini görebiliriz

Form Doğrulama
(Validation)

• allowBlank
• minLength
• maxLength {
• regex xtype: 'textfield',
fieldLabel: 'Ad',
name: 'ad',
• vtype (tanımlanmış allowBlank: false
}
regex)

Form Gönderme ve
Yükleme (submit, load)
• getForm().submit
• getForm().load
• getForm().loadRecord

var f = this.up('form');
f.getForm().submit({
url: 'Servlet?cmd=kaydet'
})

f.getForm().load({
url: 'Servlet?cmd=getir'
})

Not: load formun anlayacağı yapıda bir json string
dönmeliyiz.

var m = Ext.create('TAF.KisiModel',{
ad: 'Merkez', Ext.define ('TAF.KisiModel',{
soyad: 'Bankası' extend: 'Ext.data.Model',
}); fields: ['ad', 'soyad']
f.getForm().loadRecord(m); });

Tablo
• Grid paneli
– Tablo şeklinde gösterilen verileri ele
alan paneldir.
– Plugin ve Feature ile tabloya birçok
özellik ekleyebiliriz.
– Store ve View’i ayrılmış şekildedir. Ext.create('Ext.grid.Panel', {
title: 'Kişi Listesi',
Bu panele de MVC width: 300,
pattern’iuygulanır. columns: [
• store {
text:'Ad',
• view dataIndex: 'ad‘
– store ve columns grid’in en önemli },
iki parçasıdır. {
text:'Soyad', dataIndex: 'soyad‘
}
],
Store ve dolayısiyle Model store: {

tablonun verisini oluşturan model: 'MB.data.model.Kisi',
data: [{ad:'Aysel', soyad: 'Demir'},
elemandır. Store’suz bir {ad:'Fuat', soyad: 'Bakır'},
{ad:'Suna', soyad: 'Akın'}]
tablo (grid) yaratamayız. });
}

Tablo kolonları
(columns)
• columns tabloda hangi kolonları göstereceğimizi belirlediğimiz grid
alanıdır. Kolonlar Ext.grid.Column paketinde toplanmıştır.
columns: {
text:'Ad',
dataIndex: 'ad‘
},
{
text:'Soyad',
dataIndex: 'soyad‘
},
{
text: ‘Yaş’,
xtype: ‘numbercolumn’
dataIndex: ‘yas’
}

Tablo
Kolonları
Örnekte 3 kolon görünmektedir. Kolonlara herhangi bir tip verilmediği
durumda varsayılan kolon düşünülür, veri string olarak hücreye yazılır.
xtype’ı numbercolumn olan kolon sayısal verileri göstermek için
kullanılır, yaş, para vb. numbercolumn gibi boolean ve date tipinde
kolonlar da vardır. Bunların dışında kolon tipi olarak
‘templatecolumn’: Ext.grid.column.Template
‘actioncolumn’: Ext.grid.column.Action
‘rownumberer’: Ext.grid.RowNumberer
Tablo’nun “config” özelliği olarak selModel tanımlanabilir. selModel
CheckboxSelectionModel tanımlandığında tabloda ilk kolon olarak
seçme kutusu görünecektir. Bu tablo verisi olarak işlem görmez.
Not: selModel olarak Ext.selection.Model’den türeyen bir sınıf
tanımlanabilir. API’de açıklanmaktadır.

Tablo kolonları
önemli “config” özellikleri

• renderer
Tablodaki alanı, farklı göstermek istiyorsak renderer ile araya girerek
görünen veriyi değiştirebiliriz
Örnekteki “Kayıtlı Mı” alanına bakılabilir. ([true, false]->[evet, hayır])
• format (datecolumn için)
Tarih tipindeki alanları genelde veri tabanlarında yyyymmdd şeklinde
tutarız. Bu tip alanları gösterirken formatlamamız gerekir. renderer’a
benzer, ama datecolumn’a özgü bir “config” özelliği olarak eklenmiştir.
Örnekteki “Doğum Tarihi” alanına bakılabilir.
• flex
Tablodaki kolonların genişliklerini oransal olarak ayarlar.

Kod örneğini görebiliriz (TAF3)

Tablo Features
ve Plungins

Tablo feature’ı bize tablo’ya plugin yazmamız için gerekli arayüzü
sağlar. Bunun yanıdan Ext.grid.feature paketine 7 tane sınıf
bulunmaktadır.

– AbstractSummary Bir featture aşağıdaki gibi tanımlanabilir
– Grouping
– GroupingSummary Ext.create(‘Ext.grid.Panel’, {
– Summary features: [{
– groupHeaderTpl: 'Okul {okul}',
Chunking
ftype: 'grouping’
– Feature }],
– RowBody //diger özellikler…
})

Tablo Features
(Grouping)
• Tablodaki kayıtları gruplamak için kullanılır
– Tablo’nun store’una groupField özelliğini tanıtmamız
gerekir. Modeldeki bir alan olmalıdır.
– Grid’e feature ekleyebiliriz
store: { features: [{
groupField: 'okul', groupHeaderTpl:
model: 'Okul {okul} Kişi Sayısı:
'MB.data.model.Kisi',
data: [ {rows.length}',
{okul: ‘..’, ..}, ftype: 'grouping’
{okul: ‘..’, ..}] }]
}
Not: {[values.rows.length > 10 ?
“bold" : ""]}


Tablo Features
(GroupingSummary)

• Tablo’yu gruplamanın yanında grup özetini grubun sonunda
göstermemizi sağlar.
• Bir önceki örnekte okula göre gruplamıştık. Ek olarak grup
içindeki kişilerin yaş ortalamasını grubun özetinde gösterelim.
{ features: [{
text: 'Yaş',
dataIndex: 'yas’, groupHeaderTpl:
xtype: 'numbercolumn’, 'Okul {okul} Kişi Sayısı:
flex: 1,
summaryType: 'average’, {rows.length}',
summaryRenderer: function
(value){ ftype: 'groupingsummary’
return '<font color="red">' + }]
value + '</font>';
}
}


Tablo Features
(RowBody)
• Her satırın altına bir bölme oluşturur. İstediğimiz bilgiyi
yazabiliriz.
{
ftype: 'rowbody',
//Ext.grid.feature.FeatureView.getAdditionalData
getAdditionalData: function (data, index, record, o) {
return {
rowBody: '<div style="color: green; padding: 5px;">' + record
+ '</div>’
}
}
}

Tablo Plugins
CellEditing ve RowEditing

• Tablo üzerinde veri değiştirmemizi sağlarlar.
– CellEditing
– RowEditing
• Her ikisi için de değişebilir kolonlar için editor tanımlamamız
gerekir.
{ Ext.create
text: 'Doğum Tarihi', ('Ext.grid.plugin.CellEditing', {
dataIndex: 'dogumTarihi', clicksToEdit: 1
xtype: 'datecolumn', })
format: 'd/m/Y',
editor: { Ext.create
xtype: 'datefield' ('Ext.grid.plugin.RowEditing', {
} clicksToEdit: 1
} })


Ağaç
• Ağaç da Grid gibi Ext.panel.Table’dan türemektedir.
• store zorunludur (Ext.data.TreeStore)
Ext.create('Ext.tree.Panel', {
title: ’Okul/Öğrenciler',
width: 200,
store: Ext.creat('Ext.data.TreeStore',
{
root: {
expanded: true,
children: [{
text: ‘..’,
children: [{
text: ‘..’
leaf: true
}]}

Node özelliklerini görelim NodeInterface //TODO link?

Ağaç
Seçme Kutulu (checkbox)

• Checkbox olan bir ağaç yapabilmek için ağacı doldurduğumuz
veri’ye checked (boolean) alanını eklememiz yeterli olacaktır.
• Bir önceki örnekteki ağacın store’unda aşağıdaki değişikliği
yaparsak

{
text : "Papatya",
leaf : true,
checked: true
}

Ağaç Feature
Drag and Drop

• Sürükle bırak özelliği ile node’ların yerlerini değiştirebilirsiniz.
Bunun için Ağacın viewConfig özelliğine plugins
tanımlamak gerekecektir (tablo’da da bu şekilde).

viewConfig: {
plugins: [{
ptype: 'treeviewdragdrop'
}]
}


Ağaç Tablo
(TreeGrid)

• Tablo şeklinde ağaç gibi açılıp kapanan
bileşen. Bunun için Ext.tree.Panel
yaratırken Grid’deki gibi columns özelliği
girmemiz gerekiyor. Sadece ilk kolonun
xtype’ı ‘treecolumn’ olmalı.


Tablo ve Ağaç’ta
Diğer Özellikler

• Sıralama (Sorting)
– Lokal sıralama
– Remote sıralama
• Sayfa sayfa gösterme (Paging)
– remote store tanımlama
• Tablo’da kolonların yerinin değiştirilmesi ve
görünür/görünmez yapılması

*** Uygulama

Faydalı
Fonksiyonlar

Ext sınıfı içindeki metodlar Ext.JSON içindeki metodlar
• onReady • decode
• apply • encode
• applyIf
• isEmpty Ext.DomHelper içindeki
• isNumeric metodlar
• isNumber • insertHtml
• widget (Ext.create(‘widget.bilesen’))

Faydalı
Fonksiyonlar

• Ext.Ajax.request
– Ext.Ajax
(event)
requestexception(conn, response,
options, eOpts)

Bunun örneği En iyi uygulama pratiklerinde.

Faydalı
Fonksiyonlar

Ext.Array
• merge

Ext.Date
• format
• parse

Ext.Loader
• setConfig
• require
• syncRequire

Ext.String
• format

Sınıf Sistemi

• Sınıf tanımlama
• Create, Extend
• Bileşen genişletme
• Ext Core
• Sınıf yükleme (Class Loading)
• mixins
• statics
• config

Sınıf Sistemi
Sınıf Tanımla

• Tanımlama
Ext.define('Talep', {
adet: 0,
talepTipi: 'P',
constructor: function (config){
console.log('Talep constructor');
this.callParent(config);
}
});

Ext.define’la tanımlanan her sınıf Ext.Base’den türemektedir.

Sınıf Sistemi Yaratma
ve Genişletme

• Yaratma • Genişletme

var talep = Ext.create('Talep', Ext.define('PiyangoTalep', {
{ extend: 'Talep',
adet: 10
constructor: function (config){
});
this.tip = 'P';
}
});

Sınıf Sistemi
Bileşen Genişletme

• Bileşen genişletme de herhangi bir Ext JS bileşeninin
(Ext.form.field.Text )genişletilmesiyle olmaktadır.
• Aşağıdaki kod, metin kutusuna kırmızı renkle yazmamızı sağlar.

<script src="ss.js"></script>
Ext.define ('YeniMetinKutusu', { Ext.create('YeniMetinKutusu')
extend: Ext.widget('yenimetin')
'Ext.form.field.Text', new YeniMetinKutusu()
alias: 'widget.yenimetin’,
this.callParent();
this.fieldCls =
'onemli’;
}
});

Sınıf Sistemi
Sınıf Yükleme

• Javascript’te sınıftan nesne yaratmak için sınıfın
bulunduğu js dosyası dokümanda yüklenmiş olması
gerekir.
• Bunun için js dosyasını <script src=“”> olarak
belirtebiliriz.
• Büyük uygulamalarda birçok dosya olacağı için bu işlem
performansı düşürür ve karmaşıklığı arttırır.
• Bunun için Ext JS Loader ve Ext.require ile bu işlemi
kontrollü şekilde ve kod’la bu işlemi yapmamızı sağlar.

Sınıf Sistemi
Sınıf Yükleme
• Bir önceki örneğe bakarsak
– ss.js dosyası kullanılan bloktan önce yüklenmiştir
– ss.js’yi yüklemediğimizi düşünelim

new YeniMetinKutusu()
YeniMetinKutusu is not defined hatası alınır

Ext.create('YeniMetinKutusu')
Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required
class: YeniMetinKutusu

Ext.Loader.setConfig({
enabled: true
});
Ext.require('YeniMetinKutusu', function() { //YeniMetinKutusu.js
var metinKutusu = new YeniMetinKutusu();
metinKutusu.render(document.body);
});

Örneği Firefox debugger’ı kullarak görebiliriz.

Sınıf Sistemi
mixins, statics, config

• mixins (çoklu kalıtım) mixins: {
Ext.define(’MB.mixins.Gunluk', { yaz: ’MB.mixins.Gunluk'
yaz: function() { }
console.log(’...');
}
});
• statics Sınıflara static metot tanımlar
statics: {
PI: 3.14,
ortalama: function (dizi){
//…
}
}
• config
– set
– get
– reset
– Apply (set ile çalışır, kendi kodunuzu yazabilirsiniz)

Sürükle Bırak
(Drag & Drop)

Sürükle Bırak
Bırak
Sürükle

Evet Evet

Eski
Eski Hayır
Sürüklenebili Bırakma
Bırakma
Sürüklenebili yerine
yerine
r rmi? gerçerli mi?
gerçerli mi?
mi? gönder
gönder

Evet
Evet

Bırakmay
Bırakmay
Hedef
Hedef ıı
Göster
Göster
geçerli mi?
geçerli mi? sonlandır
sonlandır

Sürükle Bırak
(Drag & Drop)

• Ext JS’de tanımlanmış DD sınıfları (plugin).
– treeviewdragdrop (tablo, ağaç, form bölümü)
– gridviewdragdrop

Tanımlanan iki plugin için API’de kullanımlarına bakalım.

• Kendi sürükle bırak gerçekleştirimini yapabiliriz. Bunun için sürükleyeceğimiz alanı ve
bırakılacak alanları tanımlamalıyız.
Ext.dd.DropTarget
Ext.dd.DragTarget
• Ext.Component.draggable özelliği Ext.Component’dan türeyen her bileşene
sürüklenme özelliği vermemizi sağlar.
{draggable: true}

Kod örneğini görebiliriz (SB1) draggable kullanımı

En İyi Uygulama
Pratikleri

• Bileşen yapınızın oluşturulması
– Temel sınıfların formpanel, gridpanel, treepanel vb. sınıfların projeye
göre veya kurum/şirket yapısına göre genişletilmesi
• MVC örüntüsünde controls yerine controller’ın mixins ile
görüntülere (views) eklenmesi
• Modeller’in (örn: java pojo’ları) extjs model sınıfılarına
eklemlenmesi. (Özelliklerinin fields dizisi olarak)
• Editable Grid Panel’in post edilmesi için faydalı metodlar
(toJsonString)
• Validation özelliğinin java annotation’larıyla istemci tarafına
getirilmesi.
• Ext.Ajax sınıfının olaylarına dinleyici atanması.
• Kendi Store sınıfımızın yazılması

En İyi Uygulama
Pratikleri
• View’lere controller eklenmesi
Bir mixin tanımlanıp ilgili bileşene eklenebilir. Böylelikle view’lerin içinden controller
metodlarına doğrudan erişebilirsiniz. Bu controls yazmanın başka bir şekli olarak
görülebilir.
Ext.define(‘MB.mixins.Controller', {
cont: null, //String
app: null, //Ext.app.Application
getCont : function() {
if (this.app &&
this.contName &&
Ext.getClassName(this.app) === 'Ext.app.Application') {
return this.app.getController(this.cont);
} else {
alert(“controller dönülemedi. bileşenin mixins’lerini kontrol ediniz”);
}
}
});

Ext.define(‘MB.bil.GridPanel', {
extend: 'Ext.grid.Panel',
alias: “mbgridpanel",
width: '100%',
anchor: '100%',
mixins: {
controller: ‘MB.mixins.Controller'
},
//kod
}
});

• xxxx

En İyi Uygulama
Pratikleri

Ext.Ajax sınıfının olaylarına dinleyici atanması.

Ext.Ajax.on('requestexception',
function(conn, response, options) {
switch (response.status) {
case 401:
//alert zaman aşımı break;
case 0:
//alert İstek zaman aşımına uğradı. break;

case 910 /*KOD_KULLINICI_BULUNAMADI*/:
//alert MSG_WARN_OTURUM_DOLDU break;
default:
alert (response.responseText); break;
}});

Kendi Store
Sınıfımızın Yazılması
Ext.define(‘MB.bil.Store', {
extend: 'Ext.data.Store',
constructor: function(config) {
config = config || {};
this.callParent([config]);
this.proxy.actionMethods = Ext.apply(this.proxy.actionMethods, {
read : 'POST'
});
if (!config.listeners) {
this.addListener('load', function (store, records, successful, operation, eOpts ){
if (!successful) { //hata mesajı ver
}
});
this.addListener('beforeload', function (store, operation, eOpts){
return store.checkForLoad();
});
}
},

/**
* true veya false döner bu metodu override etmeniz gerekir işlevi olması için için beforeload'dan önce çalışır
* Örneğin return !Ext.isEmpty(this.proxy.extraParams.xxxx); gibi
*/
checkForLoad: function (){ return true;},

/**
* get all records
* @return Model Array
*/
getAll: function (){
return this.getRange(0, this.getCount() - 1);
},

getErrorMsg: function (){
return (this.proxy.reader.jsonData && this.proxy.reader.jsonData.msg) ? this.proxy.reader.jsonData.msg :
"";
}
});

Örnek MVC
Uygulaması
Konu: Milli Piyango İdaresi bünyesindeki şubelerin bilet taleplerinin gerçekleştirilmesi.

İşlevsel Gereksinimler
**Şubeler çekilecek piyango ve hemen kazan biletleri için merkezden bilet talebinde
bulunurlar. Taleplerini aşağıdaki bilgilere göre kaydederler.
•Piyango için
– Talep TarihiString (YYYYMMDD)
– Çekiliş Tarihi: String (YYYYMMDD)
– Adet: Integer (en az 100, en çok 1000 olabilir)
– Bilet Serisi (Tam: [T], Yarım [Y, U], Çeyrek [R, H, N, K]): char

•Hemen Kazan için
– Talep TarihiString (YYYYMMDD)
– Çekiliş Tarihi: String (YYYYMMDD)
– Adet: Integer (en az 10, en çok 1000 olabilir)
– Bilet Serisi (A, B): char

Örnek MVC
Uygulaması

• Merkez bu talepleri göz önüne alarak istekte bulunan şubelere bilet tahsis eder.
Talepleri aşağıdaki kriterlere göre listeler
– Talep Tarih Aralığı
– Bilet Tipi (Piyango, Hemen Kazan)
– Talebin karşılanıp karşılanmadığı
– Şube
• Listelenen talepler üzerinde talebi karşılayarak talebin durumunu değiştirir.
– Şubenin talep ettiği adet sayısını azaltabilir.
• Liste üzerinde sayfa yapısının olması gerekir.
• Görünen kayıtlar üzerinde bilet tipine göre gruplama ve grubun altbilgisinde toplam adet sayısının
görünmesi gerekir.
• Şubeler taleplerini, talepler onaylanıp tahsis edilene kadar, güncelleyebilir ya da silebilirler.
• Şubeler taleplerini listeler
Talepleri aşağıdaki kriterlere göre listeler
– Talep Tarih Aralığı
– Bilet Tipi (Piyango, Hemen Kazan)
– Talebin karşılanıp karşılanmadığı
• Liste üzerinde, talep ya da talepleri silebilir, seçilen talebi güncelleyebilir.

Örnek MVC
Uygulaması

Görsel Gereksinimler

•Merkezin talep sorgulama formunda, şube, birden çok seçilebilir. Bu seçme işlemi
sürükle–bırak şeklinde kullanıcı dostu olması gerekir. Seçilen şube silinebilmeli ve bütün
seçimler tek bir işlemle kaldırabilmelidir.

•Sunucuyla olan her bilgi alışverişinde işlem günlüğü ekranın en altında okunabilir bir
şekilde (çözünürlüğe göre kaybolmayacak şekilde) görünmelidir.

•Kullanıcı ekranları sekmeli yapıda görebilmelidir. Örneğin yeni talep kaydı için liste
ekranını kapatıp talep kaydetme ekranını açmamalıdır. Sekmeli yapıda olması gerekir.

Temalar

• Ext JS’de tanımlanmış 4 tane tema var
– ext-all.css (default)
– ext-all-access.css
– ext-all-gray.css
– ext-all-scopped.css
Tema değiştirmek için temanın css dosyasını head içinde vermeliyiz.
href="extjs/resources/css/ext-all.css" />
href="extjs/resources/css/ext-all-access.css" />

• Intenetten paralı ve parasız temalar indirilebilir. Örneğin;
– extthemes.com/extjs4/
• Sencha’nın kendi temamızı oluşturumamız için aracı var
– www.sencha.com/learn/theming/

Extjs 4 education

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (6)

Similaire à Extjs 4 education

Similaire à Extjs 4 education (20)

Extjs 4 education