Simplifying Icon Management in Ext JS

New version of Ext JS, 2.2.1, is announced and we are so happy, aren’t we?

Another Ext JS news: Ext Conference 2009. I wish, I could attend. I hope, I am going to be there in the next conference…

In this short tutorial, I am going to show you to simply the icon management in Ext JS. It is not a complete solution. If you want to see a more professional one, see Ext.ux.TDGi.iconMgr from TDG innovations.

When you want to use icons in your Ext JS application you either have to use “icon” config option by giving path to your icon or “iconCls” by defining a new CSS class. The latter one is more prefferable way of doing it but it means that you need to define a CSS class for each of your icons. Let’s create a new function to make it easy!

Ext.ux.Icon = function(icon){
var path = 'img/icons/';
if(!Ext.util.CSS.getRule('.icon-'+icon)){
Ext.util.CSS.createStyleSheet('.icon-'+icon+' { background-image: url('path+icon+'.png) !important; }');
}
return 'icon-'+icon;
}

Change the value of “path” where your PNG icons are located. Don’t tell me you don’t hear the famous icon collection from famfamfam!

And call it like:

...,
iconCls: Ext.ux.Icon('excel'),
...,

It is going to add a new CSS rule “icon-excel” with background-image “excel.png” and add it to the head of your page.

I can hear you say why you have to use PNG extension? You are right, you don’t have. Just modify Ext.ux.Icon by adding a second argument ,maybe, called as extension and pass the icon’s extension:

Ext.ux.Icon = function(icon, extension){
var path = 'img/icons/';
if(!Ext.util.CSS.getRule('.icon-'+icon)){
Ext.util.CSS.createStyleSheet('.icon-'+icon+' { background-image: url('path+icon+'.'+extension+') !important; }');
}
return 'icon-'+icon;
}

...,
iconCls: Ext.ux.Icon('excel', 'png'),
...,

or by removing the extension part and passing the name of icon with its extension:

Ext.ux.Icon = function(icon){
var path = 'img/icons/';
if(!Ext.util.CSS.getRule('.icon-'+icon)){
Ext.util.CSS.createStyleSheet('.icon-'+icon+' { background-image: url('path+icon+') !important; }');
}
return 'icon-'+icon;
}

...,
iconCls: Ext.ux.Icon('excel.png'),
...,

Don’t use Ext.ux.Icon if you are going to use hundreds of CSS rules because each class is defined in its own “style” tag and it can affect browser rendering performance.

It’s not important what you think, it’s important what you do…

Down for everyone or just me?

http://downforeveryoneorjustme.com/

GOOGLE TÜRKÇE ÖĞRENDİ (GİBİ)

Internet’te Türkçe içerik anlamında her zaman sıkıntı vardır. Gerçi bu yazıyı okurken siteye şöyle bir bakarsanız “söylene de bakın” diyebilirsiniz. Kişisel alanım olduğu için tercih hakkımı kullandığımı söyleyebilirim fakat asıl konumuz farklı: Google Translate.

Google çeviri servisi Google Translate dilleri arasına Türkçe de eklenmiş durumda. Farkettiğim gibi denemek maksadıyla Google Translate sayfasına hemen bir ziyaret gerçekleştirdim. Bugüne kadar ki çalışmalardan verimli bir sonuç alınmadığına birçok kere şahit olduğum düşünüldüğünde önüme çıkan her yeni denemeye daha bir özenle yaklaştığımı söyleyebilirim. Google Translate için de aynısı oldu. Kendimi önyargılarımdan arındırarak ilk denememi yapmak istedim fakat sonuç neredeyse hüsran:

Şanssız olduğumu düşünüp birkaç deneme daha yaptığımda fikrim değişmeye başlamıştı. Fakat uzun, yan cümlecikli, eklerin birbirini takip ederek bağlandığı kelimelerin sayısının da arttığı durumlarda sonuç ekran görüntüsünü verdiğimden örnekten daha da kötüydü.

Beta konusunda çok hassas olan Google madem ki Türkçe’ye de el atıyor en azından bizi başarı yüzdelerine yönlendirecek açıklamaların yer aldığı bir “beta” simgesiyle uyarsaydı da beklentilerimiz konusunda bizi yanıltmasaydı. İyi tarafından bakıp en azından “kör topal” da olsa çevirebiliyor, biraz anlasak gerisini biz de tamamlarız diyenlere bir yardım olarak görebiliriz. Yine de Google’ın öneri gönderim aracından gelecek yardımlara çok ihtiyacı olacak.

Makine çevirisi yeni bir kavram değil tabii ki fakat Türkçe bu alanın üvey evlatlarından. Birçok dilin geldiği konuma bakınca Türkçe’deki başarısızlığı yapılan çalışmaların “nispeten” azlığına bağlayabilirsiniz. Yani çalışsak Türkçe’yi biraz okumuş kitlenin arkasını çok da aramadan hemen kabullendiği, aidiyet duygusuyla daha çok sarıldığı “Türkçe aslında matematiksel bir dil”, “Bilgisayar için en uygun dil Türkçe” gibi laflardan kurtarabiliriz. Kendimi ayrı bir yere koyduğum anlaşılmasın. Sonuçta karşılaştırma yapabilecek kadar araştırmaya ömrümün yeteceğini sanmıyorum.