Ext.js - Sorular ve Cevaplar

Ext JS, genişletilmiş JavaScript anlamına gelir. Zengin UI web tabanlı masaüstü uygulamaları geliştirmek için bir JavaScript çerçevesidir.

YUI'den (Yahoo kullanıcı arayüzü) geliştirilmiş bir Sencha ürünüdür.

Bunlar, Ext JS kodunu çalıştırmak için HTML sayfasına eklenecek ana dosyalardır -

• Ext-all.js
• Ext-all.css

• Izgaralar, özet ızgaralar, formlar, grafikler, ağaçlar gibi zengin kullanıcı arabirimi koleksiyonuna sahip özelleştirilebilir kullanıcı arabirimi bileşenleri.
• Yeni sürümlerin eskisi ile kod uyumluluğu.
• Esnek bir düzen yöneticisi, verilerin ve içeriğin birden çok tarayıcı, cihaz ve ekran boyutunda görüntülenmesini düzenlemeye yardımcı olur.
• Gelişmiş veri paketi, UI widget'larını veri katmanından ayırır. Veri paketi, sıralama ve filtreleme gibi özellikleri etkinleştiren oldukça işlevsel modeller kullanarak istemci tarafında veri toplanmasına olanak tanır.
• Protokolden bağımsızdır ve herhangi bir arka uç kaynaktan verilere erişebilir.
• Özelleştirilebilir Temalar Ext JS widget'ları, platformlar arasında tutarlı olan çok sayıda kullanıma hazır temalarda mevcuttur.

• Hem modern hem de eski tarayıcılar için masaüstü bilgisayarlar, tabletler ve akıllı telefonlar arasında platformlar arası geliştirmeyi kolaylaştırır.

• IDE eklentileri aracılığıyla kurumsal geliştirme ortamlarına entegre olarak geliştirme ekiplerinin üretkenliğini artırır.

• Web uygulaması geliştirme maliyetini düşürür.

• Ekiplere, etkileyici bir kullanıcı deneyimine sahip uygulamalar oluşturma gücü verir.

• Kullanıcı arayüzünü güçlü ve kolay hale getirmek için bir dizi widget içerir.

• MVC mimarisini çok okunabilir kod izler.

• Kitaplığın boyutu 500 KB civarında büyüktür, bu da ilk yükleme süresini daha fazla yapar ve uygulamayı yavaşlatır.

• HTML'nin <DIV> etiketleriyle dolu olması, karmaşık ve hata ayıklamayı zorlaştırır.

• Genel kamu lisans politikasına göre, açık kaynak uygulamaları için ücretsiz, ancak ticari uygulamalar için ücretlidir.

• Basit şeyleri bile yüklemek için bazı zamanlar, düz html veya Jquery'de daha basit olan birkaç satır kodlama gerektirir.

• Ext JS uygulamaları geliştirmek için oldukça deneyimli bir geliştiriciye ihtiyacınız var.

Ext JS, tarayıcılar arası uyumluluğu destekler, tüm büyük tarayıcıları destekler -

• IE 6 ve üstü
• Firefox 3.6 ve üstü
• Chrome10 ve üzeri
• Safari 4 ve üzeri
• Opera 11 ve üzeri

Ext JS 4+, MVC (Model görünüm denetleyicisi) mimarisini destekler. Ext JS 5'ten MVVM'yi (Model View Viewmodel) da desteklemeye başladı.

Ext JS 6, Ext JS'nin hem masaüstü hem de mobil uygulamalar için kullanılabilmesi açısından büyük yarar sağlayan en son sürümüdür. Temelde Ext JS (masaüstü uygulamaları) ve Sencha touch (mobil uygulama) birleşimidir.

Ext JS bir JavaScript çerçevesidir, bu yüzden kullanmaya başlamak için kullanmalısınız önceden HTML ve JS bilgisine sahip olmalısınız (uzman düzeyinde değil, ancak temel anlayışa sahip olmanız gerekir). O zaman temel olanı anlamak gerekir, bu yüzden ona zaman tanıyın ve yavaş yavaş öğrenin.

Her iki çerçeve de oldukça farklıdır, çünkü Ext JS tam teşekküllü UI açısından zengin bir çerçeve olduğundan, Ext JS ve jQuery UI'yi karşılaştırabiliriz. Ancak Ext JS'de jQuery UI'den çok daha fazla bileşen var.

Ext JS 1.1

Ext JS'nin ilk sürümü 2006 yılında Jack Slocum tarafından geliştirilmiştir. YUI'nin bir uzantısı olan bir dizi yardımcı program sınıfıydı. Kütüphaneyi YUI-ext olarak adlandırdı.

Ext JS 2.0

Ext JS sürüm 2.0, 2007'de piyasaya sürüldü. Bu sürüm, sınırlı özelliklere sahip masaüstü uygulaması için yeni API belgelerine sahipti. Bu sürüm, Ext JS'nin önceki sürümüyle geriye dönük uyumluluğa sahip değildi.

Ext JS 3.0

Ext JS sürüm 3.0, 2009'da piyasaya sürüldü. Bu sürüm, hız pahasına, grafik ve liste görünümü olarak yeni özellikler ekledi. Sürüm 2.0 ile geriye doğru uyumluydu.

Ext JS 4.0

Ext JS 3'ün piyasaya sürülmesinden sonra Ext JS geliştiricileri, hızı artırmak gibi büyük bir zorluk yaşadılar. Ext JS 4.0 sürümü 2011 yılında piyasaya sürüldü. Revize edilmiş bir yapıya sahipti ve ardından MVC mimarisi ve hızlı bir uygulama geldi.

Ext JS 5.0

Ext JS sürüm 5.0, 2014 yılında piyasaya sürüldü. Bu sürümdeki en büyük değişiklik, MVC mimarisini MVVM mimarisine değiştirmekti. Dokunmatik cihazlarda masaüstü uygulamaları oluşturma, iki yönlü veri bağlama, duyarlı düzenler ve daha birçok özellik içerir.

Ext JS 6.0

Ext JS 6, Ext JS (masaüstü uygulaması için) ve sencha touch (mobil uygulama için) çerçevesini birleştirir.

Ext JS, çeşitli UI bileşenlerine sahiptir, başlıca kullanılan bileşenlerden bazıları şunlardır:

• Grid
• Form
• Mesaj Kutusu
• İlerleme çubuğu
• Araç İpucu
• Window
• HTML Düzenleyici
• Charts

xType, bileşenin işlenmesi sırasında belirlenen Ext JS UI bileşeninin türünü tanımlar. Örneğin textField, Sayısal, düğme vb.

Bu, doğrulama türü kolayca özelleştirilebilir. Ext JS tarafından sağlanan birkaç vType -

alphanumText - Girilen metinde alfabe veya sayısal değer dışında herhangi bir simge varsa bu yanlış döndürür.

emailText - Metin geçerli bir e-posta adresi değilse bu yanlış döndürür.

Evet Ext JS, Ajax ile entegre edilebilir. Uygulama şu şekildedir: bulanıklıktan sonra bir metin kutusunda, sunucudan gelen verileri doğrulaması gerektiğini varsayalım, çünkü metin kutusuna girilen verilerin sunucuda / veritabanında mevcut olup olmadığını kontrol etmek için metin kutusu kimliğine bir Ajax çağrısı yapabiliriz. .

Yes Ext JS, Java, .net, Ruby on rails, PHP, ColdFusion vb. Gibi diğer sunucu tarafı çerçevesiyle entegre edilebilir.

Ext JS, Eclipse, Aptana, Sublime, Webstrom vb. Gibi herhangi bir popüler entegre geliştirme ortamında (IDE) uygulanabilir.

Bunlar, Ext JS'de DOM öğelerine erişmenin birkaç yoludur -

• Ext.get()
• Ext.getElementById()
• Ext.fly()
• Ext.select()

MVVM mimarisi, Model Görünümü Görünüm modelidir. MVVM mimarisinde, MVC'nin denetleyicisi ViewModel ile değiştirilmiştir.

ViewModel- Temelde görünüm ve model arasındaki değişiklikleri etkiliyor. Verileri modelden görünüme bağlar. Aynı zamanda görüşle doğrudan bir etkileşimi yoktur, sadece model bilgisine sahiptir.

Ext.getCmp('buttonId').on('click', function(){
// statement to perform logic
});

Ext.onReady (), DOM tam olarak yüklendiğinde çağrılan ilk yöntemdir, böylece başvurmak istediğiniz öğe, komut dosyası çalıştırıldığında kullanılabilir olacaktır.

Ext.select('div').on('click', function(){
// statement to perform logic
});

Ext JS'deki farklı uyarı kutuları şunlardır:

• Ext.MessageBox.alert();
• Ext.MessageBox.confirm();
• Ext.MessageBox.wait();
• Ext.MessageBox.promt();
• Ext.MessageBox.show();

Store için temel sınıflar Ext.data.Store'dur

Model için Ext.data.Model

Controller için Ext.app.controller

Bunlar olay işlemenin farklı yollarıdır -

• Dinleyicileri Kullanma
• Olayları daha sonra eklemek
• Özel etkinlikleri kullanma

Store.getCount() - Önbelleğe alınmış kayıtlar için

Store.getTotalCount() - DB'deki toplam kayıt sayısı için.

Store.getModifiedRecords () yöntemi, değiştirilmiş kayıtları almak için kullanılır.

Mağaza değişikliklerini güncellemek için Store.commitChanges () yöntemi.

Izgara kimliğimiz varsa: Ext.getCmp ('gridId'). GetStore (). GetAt (index);

Mağaza kimliğimiz varsa: Ext.getStore ('storeId'). GetAt (index);

Store.load ();

• Grid için temel sınıf - Ext.grid.GridPanel
• Form için - Ext.form.Panel
• Panel için - Ext.panel.Panel
• Grafik için - Ext.chart.Chart
• Ağaç için - Ext.tree.Panel

Farklı düzen türleri -

• Absolute
• Accordion
• Anchor
• Border
• Auto
• hBox
• vBox
• Card(TabPanel)
• Card(Wizard)
• Column
• Fit
• Table

Bu, pagingToolbar () kullanılarak yapılabilir -

new Ext.PagingToolbar ({
   pageSize: 25,
   store: store,
   displayInfo: true,
   displayMsg: 'Displaying topics {0} - {1} of {2}',
   emptyMsg: 'No topics to display',
});
// trigger the data store load
store.load({params:{start:0, limit:25}});

dockedItems: [{
   xtype: 'toolbar',
   items: [{ 
      id:'buttonId', 
      handler: function() { 
         Ext.Msg.alert('title','alertMsg');
      });
   }]
}]

Yük maskesi, veriler ızgaraya işlenene kadar kullanıcıya yükleme (veya Özel mesaj) göstererek başka herhangi bir işlemi önlemek için kullanılır. Yük maskesi: doğru; veriler ızgaraya işlenirken yük maskesini gösterme özelliğidir.

Oluşturucu, bazı kriterlere göre değiştirilmiş verileri göstermek için mağazadan aldığımız verileri değiştirmek istediğimizde kullanılır. Bu bir sütun özelliği olarak kullanılabilir -

renderer: function(value, metadata, record, rowIndex, colIndex, store){
// logic to perform
}

Ext.getCmp ('id'). GetValue ();

Gizli: doğru;

Sıralanabilir: doğru; bu varsayılan doğrudur.

grid.getStore().on ({
   beforeload : function(store) {
      // perform some operation
   },
   load : {
      fn : function(store) {
         //perform some operation
      },
      scope : this
   }
   store.load();
});

Ext JS 6, her iki çerçevenin (Ext JS ve Sencha Touch) görsel öğelerini içerebilen araç kiti paketine sahiptir.

Şu şekilde eklenebilir -

'araç seti': 'klasik', // veya 'modern'

Araç seti klasikse Ext JS masaüstü uygulama çerçevesini içerir.

Araç seti modernse sencha touch mobil uygulama çerçevesini içerir.