ExtJS Dersleri kategorisindeki yazılar

Bildiğiniz gibi Firebug, Firefox için üretilmiş bir debug konsoludur. Gelişmiş özellikler içerir. Ancak kimi zaman bunu iyiye kullanmak yerine tasarımınızı çalmak isteyen kullanıcılar çıkacaktır. Bunlara karşı Firebug’ı bloklamak isteyebilirsiniz. Bu doğrultuda şu adımları yapmalıyız:
Öncelikle Firebug’ın aktif olup olmadığını kontrol etmemiz gerekiyor. Bu yüzden “_firebugConsole” un doğru olup olmadığını kontrol edeceğiz. Biz buna ExtJS ile şu şekilde ulaşacağız. Bu yazı sayesinde bu zamana kadar öğrendiklerimizin bir çoğunu pekiştirmiş uygulama halinde görmüş olacağız.
var firebug = Ext.get(‘_firebugConsole’);
// firebug değişkeni içinde
if(firebug) {
// Eğer Firebug Aktifse … şunları yap
}
Şimdi aktif bir şekilde görelim:
Ext.onReady(function () {
// Ext HAZIR
var firebug = Ext.get(‘_firebugConsole’);
// firebug değişkeninde depola
if(firebug) {
//eğer firebug aktif ise :
Ext.fly(‘icerik’).hide().update(”);
// içerik id’sine git gizle ve içeriğini ” ile yenile
Ext.fly(‘block’).addClass(‘hata’).update(‘<h1>Firebug\’ı seçtin. Giremezsin</h1>’);
// block idsine Git ve oluşturmuş olduğum hata classını ekle …

Bir önceki yazımızda Ext.Fly konusuna değindikten sonra sıra Ext ve CSS işlemlerine geldi. Burada da Ext.fly‘ı kullanarak CSS işlemleri yapacağız. Bu nedenle Ext.fly‘ı anlamış olmanız gerekir. Çünkü CSS metotları Element Class’ı içerisinde yazılmıştır ve Ext.css() şeklinde bir kullanım mümkün değildir.
CSS işlemleri
Ext ile çok rahat ve detaylı bir şekilde CSS işlemleri yürütebilirsiniz. Ext’i bu konuda seveceğinize eminim. Ext ile CSS işlemi yaparken kullanağımız syntax Ext.get(‘el’).dosomething(); ya da Ext.fly(‘el’).dosomething(); şeklindedir. Biz Flyweight konusundan hatırlayacağınız gibi Ext.fly şeklinde kullanacağız. Şimdi konuya bir giriş yapma vakti. Bir iletişim formu hazırladığınızı düşünün… Bu formu AJAX ile yolladığınızda verinin yollanması yada hata oluşması durumunda bir işlem yaptırmanız gerekecek… İşlemin Başarılı ve Başarısız olma durumuna karşı iki CSS class ı oluşturalım.

Flyweight Design Pattern tek global objeler oluşturarak bunları tekrar tekrar kullanarak ram kullanımını minimize etmek için tasarlanmıştır. Daha fazla bilgi için bu adresi ziyaret edebilirsiniz.
Ext flyweight olarak kullanmak için global bir Ext.Element oluşturur. Bu global flyweight sonra DOM içindeki herhangi bir bölümde hedef olarak kullanılır. Bu flyweight objesine ulaşmak için “Ext.fly” metodu kullanılır. Ext’e yeni başlayanlar Ext.get mi yoksa Ext.fly mı kullanacakları konusunda şaşırırlar. (Bende bunlardan biriydim).
Eğer bir Ext.Element’ini sonradan kullanmak için bir reference olarak kaydetmek zorunluysa Ext.Get kullanın. Eğer bir element’i reference olarak depolamaya ihtiyaç yoksa Ext.fly kullanılmalıdır.
Konuyu kavramanız açısından şunu not olarak belirtmemde fayda olacağını düşünüyorum. Benimde bu konuyu kavramamda Ext takımından Aaron Conran’ın örneği çok faydalı olmuştu.

Bir önceki yazımızda Ext Core’a bir giriş yapmıştık. Ext Core’a girişten sonraki seviyeye uyacak konu elementler olacaktı.  Bu konuda öncelikle mantığı öğrendikten sonra Ext.get‘i anlamaya çalışacağız. Ext.get yazım olarak Mootools yada jQuery gibi frameworklerin seçicilerine benzemiyor. Ama Mootools’taki gibi abc.hide(); şeklinde kullanabiliriz. Böyle bir girişin yeterli olacağını düşünerek konuya giriyorum.

Ext Core düşük boyutta, zengin özellikler içeren MIT lisansı altında lisanslanmış bir JavaScript kütüphanesidir. Ext Core hızlı bir web geliştirme aracı olması için heyecan verici özelliklerle donatılmış, tasarlanmıştır. Bu geliştiriciyi güzel bir tasarıma ve daha doğru bir kod yazmaya teşvik eder. Bu kütüphane DOM (manipulation/traversal), Ajax, Olaylar (events) ve özelleştirilebilir olaylar, animasyonlar, şablonlama, OO mekanizmalar ve daha fazlasını sağlar.
Yüksek performans elde edebilir ve çapraz tarayıcıda çalışır (Internet Explorer 6+, FireFox 1.5+ (PC, Mac), Safari 3+, Opera 9+ (PC, Mac)). Bu kadar açıklamanın Ext Core hakkında bir fikir oluşturacağına inanıyorum.
ExtJS İle Ext Core’un Arasındaki Farklar
Ext Core’un detaylarına geçmeden önce muhtemelen daha önce duymuş olduğunuz ExtJS ile Ext Core’un arasındaki farkı anlatayım. Ext Core sade JavaScript işlemleri yapmak için yaratılmıştır. ExtJS ise UI işlemleri içinde kullanacağınız bir kütüphanedir. ExtJS’nin ticari amaçla kullanımı için bir …