• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Extjs 4 education
 

Extjs 4 education

on

  • 1,015 views

Extjs 4 education in Turkish.

Extjs 4 education in Turkish.
Basic object javascript
extjs component model etc.
Tree, Grid Form panel

Statistics

Views

Total Views
1,015
Views on SlideShare
1,015
Embed Views
0

Actions

Likes
0
Downloads
26
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Extjs 4 education Extjs 4 education Presentation Transcript

    • 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önelikJavascript  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önelikJavascript  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önelikJavascript  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önelikJavascript ‘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önelikJavascript • 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 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 = { Ext.create(‘Ext.form.Panel’, { xtype: ‘textfield’ items: [{ } xtype: ‘textfield’ Ext.create(‘Ext.form.Panel’, { }] items: [metin] }); });
    • Bileşen ModeliYaş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ıfSistemi 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 4MVC UygulamaMimarisi 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 MVCUygulama 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 yazarkengö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 ÖzetiApplication 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önetimiWindow 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 this.callParent(arguments); } });
    • 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önetimiDinleyicileri EklemeSilme 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önetimivar 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, handler: function (){ //kısa hali win.on win.addListener(kisisecildi, doKisiSecildi1); } }, { text: Başka Dinleyici Ekle, handler: function (){ win.addListener(kisisecildi, doKisiSecildi2); } }]}); Kod örneğini görebiliriz (OY2)
    • Veri Paketi veDoğ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 veDoğrulama Çok kullanılan sınıflar: Model, Proxy ve Store
    • Veri Paketi veDoğ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,stringe ç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ğrulamaVerinin 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.jsona 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 SayfaDüzenleri
    • Container SayfaDü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ç veForm • 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 veYü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’ }
    • TabloKolonlarıÖrnekte 3 kolon görünmektedir. Kolonlara herhangi bir tip verilmediğidurumda 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çinkullanılır, yaş, para vb. numbercolumn gibi boolean ve date tipindekolonlar da vardır. Bunların dışında kolon tipi olarak ‘templatecolumn’: Ext.grid.column.Template ‘actioncolumn’: Ext.grid.column.Action ‘rownumberer’: Ext.grid.RowNumbererTablo’nun “config” özelliği olarak selModel tanımlanabilir. selModelCheckboxSelectionModel tanımlandığında tabloda ilk kolon olarakseç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ıftanı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 Featuresve 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" : ""]} Kod örneğini görebiliriz (TAF4)
    • 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>; } } Kod örneğini görebiliriz (TAF5)
    • 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 PluginsCellEditing 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 } }) Kod örneğini görebiliriz (TAF6)
    • 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? Kod örneğini görebiliriz (TAF7)
    • 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ç FeatureDrag 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 }] } Kod örneğini görebiliriz (TAF7)
    • 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ı. Kod örneğini görebiliriz (TAF8)
    • Tablo ve Ağaç’taDiğ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 SistemiSı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 Yaratmave Genişletme • Yaratma • Genişletme var talep = Ext.create(Talep, Ext.define(PiyangoTalep, { { extend: Talep, adet: 10 constructor: function (config){ }); this.callParent(arguments); this.tip = P; } });
    • Sınıf SistemiBileş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’, initComponent: function (){ this.callParent(); this.fieldCls = onemli’; } });
    • Sınıf SistemiSı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 SistemiSı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 Sistemimixins, 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 UygulamaPratikleri • 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 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 }, initComponent: function (){ //kod } });• xxxx
    • En İyi UygulamaPratikleri 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 StoreSı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 beforeloaddan ö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
    • Örnek MVCUygulaması • 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 MVCUygulaması 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. <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/
    • Sorular ?