Ext Core ve CSS

ExtJS Logo

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.

<style type="text/css">
.gerekli {
background-color: red;
}
.basarili {
background-color: green;

}
</style>
<div id="bos">Lütfen gerekli alanları doldurun!</div>
<div id="tmm">Mesajınız alındı</div>

Yukarıdaki şekilde taslak olarak markup yaptık… Ext ile Ajax konusuna gelene kadar şöyle düşünmeliyiz.

<style type="text/css">
.gerekli {
background-color: red;
}
.basarili {
background-color: green;

}
</style>

if (basari == "bos") {
Ext.fly('islem').addClass('gerekli');
<div id="islem">Lütfen gerekli alanları doldurun!</div>
}
elseif (basari == "basarili" ) {
Ext.fly('islem').addClass('basarili');
<div id="islem">Mesajınız alındı</div>
}

Başarı durumda “basarili” başarısızlık durumunda “gerekli” classı ‘islem‘ ID’sine atılıyor. Şimdi diğer metotlarımıza bakalım…

Radioclass

Ext.fly('abc').radioClass('classadi');

Bir element’in içine class ekler ve eğer elementin siblinglerinde aynı class varsa siler.

RemoveClass

Ext.fly('Id').removeClass('class');

Bir elementin içindeki belirtilen class’ı yok eder.

ToggleClass

Eğer belirtilen elementte belirtilen Class varsa siler, yoksa ekler.

Ext.fly('Id').toggleClass('class'); // class eklendi
Ext.fly('Id').toggleClass('class'); // class silindi
Ext.fly('Id').toggleClass('class'); // class tekrar eklendi

hasClass

Eğer element içinde istenilen class varsa “şunu” yap şeklindedir.

if (Ext.fly('elId').hasClass('myCls')) {
// buraya herhangi bir işlem ekleyebilirsiniz.
}

replaceClass

Belirtilen elementten istenilen class yerine başka bir class ekler. Yani eski aktif classı pasif yapar yerine belirlenen classı ekler.

Ext.fly('elId').replaceClass('eski', 'yeni');

getStyle

Belirlenen elementin özelliklerini alır.

var renk = Ext.fly('yazi').getStyle('color');
var arkaplan = Ext.fly('elId').getStyle('background-color');
alert(arkaplan); // arkaplan rengini alert eder

getColor

6 Haneli Hex cinsinden renk değerini alır.

Ext.fly('icerik').getColor('background-color');
Ext.fly('icerik').getColor('border-color');

setStyle

Belirlenen özellikleri CSS içerisinde herhangi bir özellik oluşturmadan Ext içerisinde oluşturmayı sağlar.

Ext.fly('yazi').setStyle('color', '#FF0000'); // yazi idli elementin rengi kırmızı olur.
Ext.fly('baslik').setStyle('margin', 10); baslik id'sinin marginleri 10 olu.
Ext.fly('icerik').setStyle({
background-color : '#F8F8F8',
border : 'dashed'
});

ya da

var resim = {
'float': 'left',
'padding-top': '15px',
'padding-left': '15px'
};

Ext.fly('resim').setStyle(resim);

şeklinde kullanım olabilir.

SetOpacity

Element’e opaklık set eder.

Ext.fly('opak').setOpacity(.5);

Bu yazımızda Ext ve CSS konusuna değindik. Okuduğunuz için teşekkür ederim ve bilgilerin pekişmesi açısından örnekleri denemenizi tavsiye ederim…

Etiketler: ExtJS, Javascript, Kodlama