Extjs 4 education

Ext JS 4 EğitimiHaziran-2012

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/

Gereksinimler

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 = {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 (prototype)

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; }

var piyango = new Piyango();piyango.getTip();

Kod örneğini görebiliriz (NY)


‘super’ metodları çocuk sınıftan çağırmakPiyango.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)


• 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 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 Giriş

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.

Ext JS 4 SDK

• Ç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);

});

Merhaba Dünya

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

Ext.ComponentDatePicker

Button

Container

Panel

Window

Grid

Bütün bileşenler modelin zorladığı kurallar uymak zorundadır.

Örneğin her bileşeninitComponent metodunu gerçekleştirmek zordundadır.

Bileşen ModeliYaratma

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 = { xtype: ‘textfield’}Ext.create(‘Ext.form.Panel’, { items: [metin]});

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

Bileşen ModeliYaşam Döngüsü

İlklendirmeİlklendirme

Ekrana çizmeEkrana çizme KaldırmaKaldırma

• Ayarlar atanır• ComponentMgr kayıt• Olaylar tanımlanır• Çizilmeden önceki işlemler

• beforeRender, onRender, afterRender olayları tetiklenir

• Bileşende alt bileşenler (items) varsa onlar için birer div tanımlanır

Not: En çok cpu burada harcanır

• beforeDestroy, onDestry, afterDestroy olayları tetiklenir

• ComponentMgr silme• destroy olayı tetiklenir• Dinleyiciler silinir

Extjs 3’te Ext.namespace(‘MB’);MB.Window = Ext.extend(Ext.Window, { title: ‘Merkez Bankası Pencere’, initComponent: function (){ //ilklendirmeleri yap MB.Window.superclass.initComponent. apply(this, arguments); }});new MB.Window().show();

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

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});

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)

Ext JS 4 Yeni Sınıf Sistemi

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

Ext.CompositeElementExt.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.DomHelperHtml node’ları oluşturmayı, node’ları değiştirmeyi sağlar.

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

Kod örneğini görebiliriz (TS)

Temel Sınıflar

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ı

Ext JS 4MVC 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)

Yeni MVC Uygulama Mimarisi

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

Controller [0..n] controllers

Views [0..n] views

Stores [0..n] stores

Models [0..n] models

Application Ext.app.Application

requires

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.

Ext.require ile bütün requires sınıfları yüklenir.

Not: Kullanılmayacak sınıfların dosyaları yüklenecektir. Bu performansı düşüren bir durumdur.

Ö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)

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 dastore.addListener(‘load’,doOnLoad);

Olay Yönetimi

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 GridExt.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);

}

});

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 ilklendirmelerthis.callParent(arguments);

}});

Olay YönetimiWindow

Olay YönetimiAtama

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.unwin.removeListener('kisisecildi', doKisiSecildi1);

}}, {

text: 'Dinleyici Ekle',handler: function (){

//kısa hali win.onwin.addListener('kisisecildi', doKisiSecildi1);

}}, {

text: 'Başka Dinleyici Ekle',handler: function (){

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.

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

Veri Paketi ve Doğrulama

Veri Paketi ve Doğrulama (Model)

• Ext.data.Model sınıfı’nın– Alanları (Ext.data.Field)

• Tip• Doğrulama (Validation)

– İlişkileri (HasMany, BelongsTo)

– Metodları– Proxy aracılığıyla verileri

yükleme ve kaydetme (Ext.data.Proxy)

Özellikleri vardır.

Ext.define('MB.data.model.Kisi', { extend: 'Ext.data.Model', fields: [ {name: 'ad'},//auto type,string'e çevrilecektir {name: 'soyad', type: 'string'}, {name: 'yas', type: 'int'}, {name: 'kayitliMi', type: 'boolean'}, {name: 'dogumTarihi', type: 'date', dateFormat: 'd/m/Y'}, {name: 'okul', type: Ext.data.Types.STRING}, {name: 'cinsiyet', type: 'string'} ] });

var kisi = Ext.create('MB.data.model.Kisi', {ad: 'Fatma',soyad: 'Baydur',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.Errorshatalar.isValid(); //boolean hatalar.items //{{field: ‘ad’, message: ‘must be present’},{..},..}

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

Veri Paketi Ve DoğrulamaVerinin Yüklenmesi, Kaydedilmesi

• Model proxy tanımlayarak verinin yüklenmesini ve kaydedilmesini sağlayabilir.

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

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();

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 SayfaDüzenleri

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.panel.Panel

Ext.form.Panel

Ext.panel.Table

Ext.grid.Panel

Ext.tree.Panel

Form

• Form paneli – Panel, kendisine eklenen

bileşenleri form şeklide düzenleyebilir.

– Post edilebilir html form (Ext.form.Basic) özelliğini sağlar

– Herhangi bir web kaynağına formu post edebiliriz. Bu asenkron bir işlemdir.

form.getForm().submit({url: ‘Servlet?cmd=kaydet’

});

Ext.create('Ext.form.Panel', {title: 'Kişi',width: 300,frame: true,items: [{

xtype: 'textfield',fieldLabel: 'Ad',name: 'ad'

},{xtype: 'textfield',fieldLabel: 'Soyad',name: 'soyad'

}],buttons: [{

text: '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• vtype (tanımlanmış

regex)

{xtype: 'textfield',fieldLabel: 'Ad',name: 'ad',allowBlank: false

}

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',soyad: 'Bankası'

});f.getForm().loadRecord(m);

Ext.define ('TAF.KisiModel',{extend: 'Ext.data.Model',fields: ['ad', 'soyad']

});

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.

Bu panele de MVC pattern’iuygulanır.

• store• view

– store ve columns grid’in en önemli iki parçasıdır.

Store ve dolayısiyle Model tablonun verisini oluşturan elemandır. Store’suz bir tablo (grid) yaratamayız.

Ext.create('Ext.grid.Panel', { title: 'Kişi Listesi', width: 300, columns: [ {

text:'Ad', dataIndex: 'ad‘

}, {

text:'Soyad', dataIndex: 'soyad‘ } ], store: { model: 'MB.data.model.Kisi', data: [{ad:'Aysel', soyad: 'Demir'}, {ad:'Fuat', soyad: 'Bakır'}, {ad:'Suna', soyad: 'Akın'}]

}});

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– Grouping– GroupingSummary– Summary– Chunking– Feature– RowBody

Bir featture aşağıdaki gibi tanımlanabilir

Ext.create(‘Ext.grid.Panel’, { features: [{ groupHeaderTpl: 'Okul {okul}', ftype: 'grouping’ }], //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: {groupField: 'okul', model:

'MB.data.model.Kisi',data: [

{okul: ‘..’, ..}, {okul: ‘..’, ..}]}

features: [{groupHeaderTpl:

'Okul {okul} Kişi Sayısı: {rows.length}',

ftype: 'grouping’}]

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.

{ text: 'Yaş', dataIndex: 'yas’, xtype: 'numbercolumn’, flex: 1, summaryType: 'average’, summaryRenderer: function (value){ return '<font color="red">' + value + '</font>'; }}

features: [{ groupHeaderTpl: 'Okul {okul} Kişi Sayısı: {rows.length}', ftype: 'groupingsummary’}]


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.

{text: 'Doğum Tarihi',dataIndex: 'dogumTarihi',xtype: 'datecolumn',format: 'd/m/Y',editor: {

xtype: 'datefield'}

}

Ext.create ('Ext.grid.plugin.CellEditing', {

clicksToEdit: 1})

Ext.create ('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• onReady• apply• applyIf• isEmpty• isNumeric• isNumber• widget (Ext.create(‘widget.bilesen’))

Ext.JSON içindeki metodlar• decode• encode

Ext.DomHelper içindeki metodlar

• insertHtml

• Ext.Ajax.request– Ext.Ajax

(event)

requestexception(conn, response, options, eOpts)

Bunun örneği En iyi uygulama pratiklerinde.


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

• TanımlamaExt.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 Sınıf Tanımla

• Yaratma

var talep = Ext.create('Talep',

{

adet: 10

});

• Genişletme

Ext.define('PiyangoTalep', {

extend: 'Talep',

constructor: function (config){

this.callParent(arguments);

this.tip = 'P';

}

});

Sınıf Sistemi Yaratma ve 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', {extend:

'Ext.form.field.Text',alias: 'widget.yenimetin’,initComponent: function (){

this.callParent();this.fieldCls =

'onemli’;}

});

Ext.create('YeniMetinKutusu')Ext.widget('yenimetin')new YeniMetinKutusu()

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

• 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 Sınıf Yükleme

• mixins (çoklu kalıtım)

Ext.define(’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)

mixins: { yaz: ’MB.mixins.Gunluk'}

Sınıf Sistemi mixins, statics, config

SürükleSürükle

Sürüklenebilir mi?

Sürüklenebilir mi?

Hedef geçerli mi?

Hedef geçerli mi?

Evet

GösterGöster

Evet

BırakBırak

Bırakma gerçerli mi?

Bırakma gerçerli mi?

Bırakmayı

sonlandır

Bırakmayı

sonlandır

Evet

Evet

Eski yerine gönder

Eski yerine gönder

Hayı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ı

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

• 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 UygulamaPratikleri

• View’lere controller eklenmesiBir 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, //Stringapp: null, //Ext.app.ApplicationgetCont : 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'},initComponent: function (){

//kod}

});

• xxxx


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 MVCUygulaması

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

• 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.


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.


• 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.<link rel="stylesheet" type="text/css"

href="extjs/resources/css/ext-all.css" />

<link rel="stylesheet" type="text/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/

Temalar

?

Sorular

Education

Extjs 4 education