Ext Core ve Elementler

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.

Elementlere Ulaşmak

HTML sayfaları genellikle birçok HTML işaretlerinden oluşur. Siz tarayıcıya X sayfasını açmayı emrettiğinizde sayfadaki taglar bir HTML elementine çevrilir ve tarayıcı bir DOM biçimlendirme ağacı oluşturur.

• Bu DOM tarayıcının global faaliyet alanını bir “variable called document” içine kaydeder.
• Bu döküman değişkeni sayfadaki markupların her bir parçasını referans olarak tutar.
• Yine bu döküman objesi “getElementById” adında önemli bir metod sağlar.
• Bu metod herhangi bir tarayıcıda bir HTML Element’ini temel almanızı (esas almak) sağlar.
• Ext Core çapraz tarayıcı desteği sağlamak için Ext.Element adında bir class uygular.
• Ext.Element diğer Ext Core classlarına göre en fazla metota sahip class‘tır.

Ext.Element içindeki Metodlar

• CSS ve Stilleme
• Dom Sorguları yada Traversal
• Dom Manipulation
• Dimensions (Boyutlar ve Ölçü)

Ext.Get Kullanımı

Ext.Get sayfadaki belirtilen “ID” yi içeren HTML Element’ine ulaştırır/alır. Yazım stili Ext.get(); şeklindedir.

Hemen bir örnekle pekiştirelim:

var secid = Ext.get('IDmiz');
<div id="idmiz"></div>

Şu an “secid” değişkeninde ‘IDmiz‘ isimli element tutuluyor. Buna istediğimizi yapabiliriz. Mesela istediğimiz bir class‘ı atayabiliriz.

CSS kodumuz:

.pembe {
background: pink;
}ve JavaScript
var secid = Ext.get('idimiz');
secid.addClass('pembe');<div id="idimiz">Merhaba Dünya</div>

şeklindeki kodu  çalıştırdığımızda pembe arkaplana sahip (daha doğrusu .pembe classının özelliklerini içeren) bir çıktı alacağız.

addClass metodu sayfa içerisinde önceden tanımlanmış bir CSS class’ını belirlenen HTML elementi ile birleştirir.

Yine CSS konusunda sizin JavaScript kodu içerisinde oluşturacağınız bir CSS stilini ekleyebilirsiniz.

Örnek

var error = {
'background-color': '#fbe3e4',
'font': '16px',
'width': '200px',
'height': '50px',
'padding-top': '15px',
'padding-left': '15px'
};

Burada error adındaki değişkene array şeklinde CSS özellikleri atıyoruz. Yazım sözdizimi ise:
'background-color': '#fbe3e4' şeklinde görüleceği gibi 'özellik' : 'değer' ve ondan sonra bir özellik daha gelecek ise “,” gelmek zorundadır. Eğer son satırsa yani başka özellik gelmeyecekse “,” koymamıza gerek yoktur.

Ext.Get konusunda daha fazla kafa karışıklığına yol açmamak için bukadar metotun en azından şuanlık yeterli olacağını düşünüyorum.

Gelecek konumuzda element başlığında devam edeceğiz.

Etiketler: ExtJS, Javascript, Kodlama