>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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s