belajar ExtJS dari jQuery

Baik ExtJS maupun jQuery kesemuanya adalah library yang dikembangkan untuk mempercepat pemrograman javascript. Dalam konsep jQuery dikatakan bahwa semuanya adalah obyek dan ini ditunjukan dengan kemudahan akses terhadap semua obyek-obyek html yang ada dalam suatu dokumen menggunakan fungsi $(nama/id/selector/tag dari obyek). fungsi ini benar-benar luar biasa karena dengan hanya menyebut $() kita sudah dapat mengakses obyek apapun dalam halaman HTML.

Hal yang serupa juga diterapkan dalam ExtJS namun mereka membedakan antara akses Element (DOM) dengan akses Component. Yang menunjukkan kemiripan dengan konsep obyek dari jQuery adalah Ext.Component sedangkan Ext.Element lebih serupa dengan prosesor XML untuk membaca dokumen HTML sebagai kumpulan node-node yang saling terkait. Dalam jQuery keduanya ini digabungkan.

Jadi buat yang terbiasa dengan konsep jQuery dapat tetap menerapkannya di dalam ExtJS dengan definisi bahwa Component berbeda dengan Element. Waktu belajar ExtJS awalnya tergambar bahwa metode Ext.get() ato Ext.Element.get() ini ditujukan untuk mengakses obyek sama seperti pada jQuery, ternyata masih ada lagi metode serupa yakni Ext.getComp() ato Ext.ComponentMgr.get() untuk mendapatkan obyek html seperti pada jQuery.

Berikut ini contoh kode yang penulis gunakan untuk menerapkan ExtJS.

MyWindowUi = Ext.extend(Ext.Window, {
title: 'Percakapan',
width: 540,
height: 521,
layout: 'border',
id: 'winConversation',
initComponent: function() {
this.items = [
{
xtype: 'treepanel',
title: 'Users',
region: 'east',
width: 161,
border: true,
split: true,
collapsible: true,
rootVisible: false,
id: 'treeUser',
root: {
text: 'Online'
},
loader: {
url: '?app=loaddata',
clearOnLoad: false,
requestMethod: 'GET'
}
},
{
xtype: 'panel',
title: 'Aktifitas',
region: 'center',
split: true,
layout: 'border',
autoScroll: true,
id: 'panelConversation',
items: [
{
xtype: 'textarea',
fieldLabel: 'Label',
region: 'south',
width: 100,
split: true,
id: 'txtMessage'
},
{
xtype: 'tabpanel',
activeTab: 0,
region: 'center',
id: 'tabConversation',
items: [
{
xtype: 'panel',
title: 'Global',
id: 'conGlobal'
},
{
xtype: 'panel',
title: 'Tab 2'
}
]
}
]
}
];
MyWindowUi.superclass.initComponent.call(this);
}
});

Ext.onReady(function() {
var myWindow = new MyWindow({
renderTo: Ext.getBody()
});
myWindow.show();
Ext.getCmp('treeUser').on('click', function(node, event){
Ext.ComponentMgr.get('tabConversation').add({
xtype: 'panel',
title: node.id,
id: 'tab' + node.id
});
});
});

Selamat mencoba ExtJS.... ;-)

Referensi :
java2s.com
extjs documentation
example.extjs.eu