ExtJs – Many Ways to Get Component

Untuk mendapatkan sebuah component di ExtJs ada banyak cara, masing-masing memiliki kemudahan yang lain-lain.
Kurang lebih sebagai berikut :

1. Ext.getcmp(id).

Ini adalah cara paling mudah untuk mendapatkan component di ExtJs, anda hanya harus men-set id atau itemId ke config.

 Ext.getCmp('btnLogin');

Hanya saja anda mungkin mesti lebih memperhatikan bahwa Id yang anda set adalah global jadi jika ada id tertentu yang bentrok maka akan berakibat pada aplikasi anda.

2. Ext.ComponentQuery.query(StringQuery).

Contoh component query adalah :

 Ext.ComponentQuery.query(‘button[name=login]‘)[0];
 // or
 Ext.ComponentQuery.query(‘form > button[name=login]‘)[0];

Sedikit penjelasan bahwa component query itu layaknya CSS Selector yang bisa dilihat disini : http://www.w3schools.com/cssref/css_selectors.asp
Jadi, ‘form’ pada component query diatas adalah sebuah alias atau xtype dari sebuah parent,
sedangkan ‘button[name=login]’ adalah kita ingin mendapatkan sebuah component dengan alias atau xtype button dengan name ‘login’.
Selain menggunakan = (*sama dengan) anda juga bisa menggunakan selector lain seperti :

E[foo] has an attribute “foo”
E[foo=bar] has an attribute “foo” that equals “bar”
E[foo^=bar] has an attribute “foo” that starts with “bar”
E[foo$=bar] has an attribute “foo” that ends with “bar”
E[foo*=bar] has an attribute “foo” that contains the substring “bar”
E[foo%=2] has an attribute “foo” that is evenly divisible by 2
E[foo!=bar] attribute “foo” does not equal “bar”
baca disini : http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.dom.Query

Balikan dari component query adalah sebuah array component jadi saya menambahkan ‘[0]’ dibelakang untuk mendapatkan array index 0.

Anda juga bisa menggunakan component query untuk mendapatkan component yang diset itemId-nya secara langsung :

 Ext.ComponentQuery.query('#itemId')[0];

3. Menggunakan component itu sendiri untuk mendapat component yang berkaitan.

Beberapa component mempunyai method seperti : getComponent, query, child, down, up.
Nah method-method ini bisa kamu gunakan untuk mendapatkan componet terkait.
Penggunaanya hampir mirip dengan component query, hanya saja berkaitan dengan component tersebut.

Saya jelaskan sedikit tentang ini :

 parent.getComponent('itemId');

Ini seperti Ext.getCmp() hanya saja method ini hanya akan membaca component-component yang berada dibawah component ini (diletakan di component ini).

 parent.query('button[itemId=save]');

Ini sama dengan Ext.ComponentQuery.query hanya saja sama seperti getComponent() yang membaca component diatasnya.

 parent.child('button[itemId=save]');

Sama dengan parent.query

 parent.down('button[itemId=save]');
 component.up('panel[itemId=parent]');

Down dan Up juga menggunakan selector seperti Ext.ComponentQuery.query.
Jika down mendapatkan component dibawahnya seperti panel mendapatkan button dibawahnya.
Sedangkan up mendapatkan component diatasnya (yang menjadi container-nya) seperti button mendapatkan panel yang menjadi containernya.

Terima kasih dan semoga bermanfaat.

mazipan-signature

Be a good reader, leave your comment please.

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