ExtJS Radiogrouplar ve extend
Ext ile ilgili uzun zamandır yazmak istiyordum, biraz sert bir giriş olacak. Daha sonra javascript kosunda bilgili ve Ext’e hızlı bir başlangıç yapmak isteyenler için ne olduğunu, nasıl bir yapıya sahip olduğunu anlatırım.
Extend için kurban seçerken daha sonra işimize yarayacak bir component (komponent, parçacık.. her neyse) olsun istedim, yakın zamanda karşılaştığım bir soruna sahip, Radiogroup ‘u seçtim. Nitekim, getValue ve setValue nitelikleri, diğer componentların aksine (textfield, combobox, textarea vb) standart HTML’deki davranışları sergilemiyor. Ext’in diğer form araçlarıyla aynı prensipleri taşıması için kendisine setValue ve getValue ekleyeceğiz. Fakat öncelikle çıplak haline bakalım.
id:'gridForm',
items: [
{
width:120,
xtype: 'radiogroup',
fieldLabel: 'My Groupradio',
name:'groupradio',
id:'groupradio',
items: [
{boxLabel: 'Radio 1 ', name: 'groupradio', inputValue: 1,checked:true},
{boxLabel: 'Radio 2', name: 'groupradio', inputValue: 2},
]
}]
});
Eğer Ext.getCmp(’groupradio’).getValue() yaparsak, malesef ‘1′ değerini alamayacağız. Çünkü Ext, radio işleyişlerinde, sadece seçili olana name vermekte ve bu objeleri taramadan hangisinin seçili olduğunu anlamamızı imkansızlaştırıyor. Daha da kötüsü, bu methodları kullanan form.loadRec() ve form.getValues/setValues() ile veri alıp/yerleştiremiyoruz. Bunun için Ext ile uyumlu çalışabilecek getValue ve setValue tanımlamamız gerekli:
id:'gridForm',
items: [
{
width:120,
xtype: 'radiogroup',
fieldLabel: 'My Groupradio',
name:'groupradio',
id:'groupradio',
getValue: function() {
for( var i=0; i < this.items.length; i++ ) {
if( this.items.items[i].checked ) {
return this.items.items[i],this.items.items[i].inputValue;
}
}
},
setValue: function(v) {
for( var i=0; i < this.items.length; i++ ) {
if( this.items.items[i].checked )
this.items.items[i].setValue(false);
if ( this.items.items[i].inputValue == v)
this.items.items[i].setValue(true);
}
},
items: [
{boxLabel: 'Radio 1 ', name: 'groupradio', inputValue: 1,checked:true},
{boxLabel: 'Radio 2', name: 'groupradio', inputValue: 2},
]
}]
});
Artık getValue ve setValue methodlarımız olması gerektiği gibi çalışıyor. Fakat bunu bir de radiobox için standart haline getirirsek, blok kodlamadan kaçınmış olacağız. Zaten extend’in esprisi de burada:
getValue: function() {
for( var i=0; i < this.items.length; i++ ) {
if( this.items.items[i].checked ) {
return this.items.items[i],this.items.items[i].inputValue;
}
}
},
setValue: function(v) {
for( var i=0; i < this.items.length; i++ ) {
if( this.items.items[i].checked )
this.items.items[i].setValue(false);
if ( this.items.items[i].inputValue == v)
this.items.items[i].setValue(true);
}
}
});
Ext.ComponentMgr.registerType('radiogroup',gokceRadioGroup); //eski componentın üzerine yazmak için
Ext.ComponentMgr.registerType('gokceradiogroup',gokceRadioGroup); //eskisini bozmak istemiyorsanız, başka bir xtype oluşturmak için
/*Önerim, Component extendlerini ihtiyaçlarınıza göre bir veya birden fazla başka bir JS dosyasında toplamanız. */
var form = new Ext.form.FormPanel({
id:'gridForm',
items: [
{
width:120,
xtype: 'radiogroup', // = gokceradiogroup
fieldLabel: 'My Groupradio',
name:'groupradio',
id:'groupradio',
items: [
{boxLabel: 'Radio 1 ', name: 'groupradio', inputValue: 1,checked:true},
{boxLabel: 'Radio 2', name: 'groupradio', inputValue: 2},
]
}]
});
Şimdilik bu kadar. Umarım ilerde bilmeyenlerin ExtJS ile arasını yapacak bir yazı yazmaya zamanım olur. Mutlu kodlamalar.
Mayıs 5th, 2009 @ 1:18 pm
Mutlu kodlamalar :)
Temmuz 2nd, 2009 @ 11:28 am
ömrümü yedi extjs :P