From Learn About the Ext JavaScript Library

Contents 1 Giriş 1.1 Seneryo 1 - Acemi 1.2 Senaryo 2 - Yetkin 2 Bana Nasıl Olduğunu Göster

Giriş

Seneryo 1 - Acemi

Ext hakkında birşeyler duydunuz, online örnekleri gördünüz, hatta API'yi okumaya bile başladınız. Hadi yüzleşelim, Ext ile oynamak için kaşıntınız tuttu, ama size oyun alanı olacak bir test serverınız yok!

Senaryo 2 - Yetkin

API'nin ciğerini deşiyordunuz (incelemek de diyebiliriz) ve hemen şimdi denemek için can attığınız ilginç bir metod gördünüz ama sadece bu birtek metodu denemek için uygun kaynakları içeren bir test html sayfası oluşturmakla şu anda ilgilenemiyorsunuz.

Nedeniniz ne olursa olsun, burada Ext ile hemen şimdi oynamanın çabuk bir yolu var , test serverına ihtiyacınız yok. Bunu yapmak için Firebug eklentisi yüklenmiş bir Firefox tarayıcısına ihtiyacınız olacak,eğer şimdiye ka-adar yüklemediyseniz kendinize bir iyilik yapın ve şimdi yükleyin !

Bana Nasıl Olduğunu Göster

• Ext API Dökümantasyonunu açın. Muhtemelen oradasınız zaten.
• Firebug konsolunu açmak için F12 tuşuna basın(Firebug çalışıyor değil mi?)
• Eğer firebug konsolunuz '>>>' şeklinde birşeyler gösteren tek bir satırdan oluşuyorsa sağ alt köşedeki küçük kırmızı yukarı ok tuşuna basarak konsolu çok satırlı hale çevirin.
• İlk satır olarak alttaki kod parçacığını yazın ve çalıştırmak için Ctrl-Enter'a basın:

Ext.get(document.body).update('<div id="test"></div>');

Yukarıdaki kod parçacığının yapacağı dütün DOM body içeriğini test id'li bir div ile değiştirmek olacaktır . Tüm body içeriği gtti ama Ext kütüphanesi hala yüklü ve onunla oynamanız için hazır.

Şimdi Ext.Panel API'sin de gezindiğinizi ve yeni bir panel nesnesi yaratmanın ne kadar kolay olduğunu gözlerinizle görmek istediğinizi varsayalım. Aşağıdaki kod parçacığını firebugdaki kodunuza ekleyin:

Ext.get(document.body).update('<div id="test"></div>');
new Ext.Panel({
	renderTo: 'test',
	width: '200px',
	title: 'My Title',
	html: 'My HTML content'
});

Ctrl-Enter'a tekrar basın , ve buyrun, sayfada yeni paneliniz oluşturuldu.

Tamam, şimdi birbaşka seçeneği eklerseniz ne olacağını bilmek istiyorsunuz, söyleyelim, collapsible özelliğini aktif edelim. Kod parçacığınız hala orada firebugda duruyor, yani yeni yapılandırma seçiminiz için fazladan bir satır ekliyorsunuz:

Ext.get(document.body).update('<div id="test"></div>');
new Ext.Panel({
	renderTo: 'test',
	width: '200px',
	title: 'My Title',
	html: 'My HTML content',
	collapsible: true
});

Ctrl-Enter'a basın ve panelin sağ köşesinde beliren açma kapama düğmesini belirdiğini hemen farkedeceksiniz.

Ctrl-Enter'a her bastığınızda ilk satır dom'a bir önceki uygulamanızda eklediğiniz herşeyi silecek, böylece size üzerinde çalışabileceğiniz temiz bir alan sağlayacak . Basit bir ipucu ama kullanbileceğiniz birçok yapılandırma seçeneği arasından ne yapabildiğini öncelikli olarak görmek istedikleriniz için inanılmaz derecede kullanışlı.

İlk satırdaki update() metodunun içinde geçen string'e istediğiniz kadar HTML kodu ekleyebilirsiniz, ve sonra Ext API'sini keşfetmek için istediğiniz kadar Javascript yazabilirsiniz.

Şimdi gidip API ile kendi başınıza oynamaya başlayın!

• Ext Programmer's API Documentation
• Ext User Forums