Scribd
Unggah
237 tayangan

Modul ExtJS

ExtJS adalah framework untuk membangun antarmuka pengguna web yang menarik dan profesional dengan sedikit kode. Ia menyediakan komponen antarmuka pengguna dan memudahkan pengembangan aplikasi web."

Diunggah oleh

kalembrow
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
237 tayangan

Modul ExtJS

ExtJS adalah framework untuk membangun antarmuka pengguna web yang menarik dan profesional dengan sedikit kode. Ia menyediakan komponen antarmuka pengguna dan memudahkan pengembangan aplikasi web."

Diunggah oleh

kalembrow
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 30

Pemrograman ExtJS

Pendahulan
ExtJS merupakan framework yang focus pada kemudahan pengembangan user interface untuk aplikasi
web. Dengan arsitektur ExtJS kita dapat membuat aplikasi web yang memiliki tampilan yang menarik
dan professional hanya dengan sedikit membuat kode program.
Tentang Javascript
Javascript merupakan bahasa yang object oriented. Setiap data di dalam Javascript adalah objek.
Numbers, strings, tanggal, dan Boolean (true atau false) semua adalah objek.
Variable pada Javascript merupakan referensi dari objek yang kita assign, seperti halnya
pointer/penunjuk terhadap lokasi sebuah objek.
Dalam Javascript sebuah fungsi juga adalah objek dan dapat disimpan/assign pada sebuah variable dan
juga dapat dikirimkan/passed sebagai parameter. Jadi sebuah deklarasi fungsi dalam Javascript adalah
literal yang sama dengan deklarasi sebuah string.
Sebagai contoh
var myVariable = "A string literal";
alert(myVariable);
myVariable = function() {
alert("Executing the function");
};
myVariable();

Konsep ini merupakan dasar utama bagi kita untuk memahami framework ExtJS. Fungsi akan dipassing
sebagai parameter ke dalam fungsi-fungsi (methods) ExtJS yang kemudian dieksekusi oleh ExtJS untuk
menangani event user interface atau event komunikasi network (AJAX).
Tentang ExtJS
Pada modul ini kita akan menggunakan ExtJS versi 3.x. Walaupun demikian contoh-contoh dalam modul
ini masih kompatibel dengan versi 2.x.
Pada awalnya ExtJS merupakan extension dari Yahoo User Inteface Library (YUI). ExtJS menyediakan apa
yang menjadi kekurangan YUI yaitu kemudahan dalam penggunaan APInya dan widgets dengan
tampilan yang professional.
Dengan kemudahan dan komponen user interface yang kaya, aplikasi web ExtJS akan terlihat seperti
aplikasi Desktop. Hal ini juga menyebabkan akan meningkatnya produktifitas developer, karena akan

lebih focus pada bisnis proses dari web aplikasi yang dikembangkan dan tidak perlu lagi terlalu
memikirkan masalah user interface.
Instalasi
1. Untuk mulai menggunakan ExtJS silahkan download ExtJS SDK dari alamat
http://www.extjs.com/products/js/download.php
2. Ekstraklah file ExtJS tersebut pada folder tertentu misalnya lib yang berada pada webroot server
apache.

Ubahlah nama folder ext-3.2.1 menjadi extjs.


Dalam SDK ini semua file yang kita butuhkan untuk menggunakan ExtJS sudah tersedia, biasanya
disebut ext-all. Dalam SDK ini juga terdapat versi yang digunakan dalam fase development yang
disebut versi debug. Versi debug ini yang akan banyak kita gunakan dalam modul training ini.
Versi debug memudahkan kita untuk mencari error yang terjadi karena tidak terkompresi
sehingga akan dengan mudah memberikan informasi nomor baris yang error.
Ketika aplikasi kita sudah selesai dan akan kita implementasi pada server produksi, kita harus
mengubah aplikasi kita untuk menggunakan ExtJS yang versi standard yaitu ext-all, dan aplikasi
kita akan berjalan sebagaimana mestinya.
Folder adapter dan resources merupakan folder yang dibutuhkan ExtJS agar dapat bekerja
dengan baik, selain itu hanya dibutuhkan untuk fase development.
a. adapter: file-file library pihak lain yang dapat digunakan bersama dengan ExtJS
b. docs: dokumentasi ExtJS
c. examples: contoh-contoh penggunakan ExtJS
d. pkgs: ExtJS modul yang digunakan dalam development ExtJS
e. resource: dependencies ExtJS Library, seperti CSS dan images
f. src: source code ExtJS
g. test: test suite untuk ExtJS
h. welcome: file image lainya

Saat kita akan mendeploy halaman web yang menggunakan ExtJS ke server, folder adapter dan
resources juga harus ikut dideploy bersama dengan file ext-all.js da next-all-debug.js
Menggunakan ExtJS pada halaman web
Sebelum dapat menggunakan ExtJS pada halaman web kita, kita harus buat referensi ke ExtJS library.
Untuk hal ini kita butuh menginclude beberapa baris code pada bagian HEAD dari halaman HTML web
kita.
<html>
<head>
<title>Getting Started Example</title>
<link rel="stylesheet" type="text/css"
href="lib/extjs/resources/css/ext-all.css" />
<script src="lib/extjs/adapter/ext/ext-base.js"></script>
<script src="lib/extjs/ext-all-debug.js"></script>
</head>
<body>
<!-- Nothing in the body -->
</body>
</html>

Pastikan path atau lokasi yang dituliskan benar dan juga urutan mengincludenya harus sesuai seperti
contoh di atas.
a. Ext-all.css adalah file stylesheet yang mengatur look and feel dari komponen-komponen ExtJS.
File ini wajib di includekan dan tidak boleh dimodifikasi.
b. Ext-base.js, menyediakan fungsi-fungsi dasar dari ExtJS. File ini yang dapat kita modifikasi jika
kita menggunakan ExtJS dengan library lain seperti jQuery misalnya.
c. Ext-all-debug.js atau ext-all.js, semua komponen/widget ExtJS berada dalam file ini. Debug
version digunakan dalam fase development dan gunakan yang versi non-debug untuk
production.
Spacer Image
ExtJS butuh sebuah spacer image yaitu file image (GIF) transparan berukuran 1x1 pixel yang digunakan
ExtJS untuk layout komponennya (widgets).

HelloWord dengan ExtJS


Berikut ini adalah contoh bagaiman kita menggunakan ExtJS pada halaman web kita. Pada contoh ini
akan menampilkan sebuah alert dialog.
<html>
<head>
<title>Getting Started Example</title>
<link rel="stylesheet" type="text/css"
href="lib/extjs/resources/css/ext-all.css" />
<script src="lib/extjs/adapter/ext/ext-base.js"></script>
<script src="lib/extjs/ext-all-debug.js"></script>
<script>
if (Ext.BLANK_IMAGE_URL.substr(0, 5) != 'data:') {
Ext.BLANK_IMAGE_URL = 'lib/extjs/resources/images/default/s.gif';
}
Ext.onReady(function(){
Ext.Msg.alert('Hi', 'Hello World Example');
});
</script>
</head>
<body>
<!-- Nothing in the body -->
</body>
</html>

Ext.onReady Function
ExtJS hanya akan merender widget ketiga sebuah halaman HTML telah selesai diinisialisasi oleh browser.
Semua halaman ExtJS dapat mengakses dokumen hanya melalui pemanggilan fungsi Ext.onReady.
Contoh sebelumnya dapat diubah menjadi
var mainFunction = function(){
Ext.Msg.alert('Hi', 'Hello World Example');
};
Ext.onReady(mainFunction);

Berinteraksi dengan ExtJS Widget


Pada bagian ini kita akan mulai berinteraksi dengan ExtJS Widget dengan membuat sejumlah dialog yang
saling berinteraksi. Kita akan menggunakan fungsi OnReady, MessageBox, dan get untuk belajar
bagaimana membuat dialog dengan tipe yang berbeda-beda.
Kita mulai dengan beberapa fungsi dasar dari ExtJS. Masih dengan contoh sebelumnya kemudian kita
akan tingkatkan penggunaan ExtJS. Fungsi-fungsi berikut akan kita gunakan pada setipa project dalam
modul ini.
a. Ext.Msg: Fungsi ini digunakan untuk membuat messagebox
b. Configuration objects: digunakan untuk mendefinisikan bagaimana karakteristik widget ExtJS
c. Ext.get: Fungsi ini digunakan untuk mengakses dan memanipulasi element-element dalam DOM
Config Object
ExtJS Config Object adalah Object literal Javascript. Tujuannya adalah untuk memberikan cara
mengkonstruk data sehingga mudah dibaca.
Widget dan Classes
ExtJS memiliki banyak Widget yang diimplementasikan dalam bentuk class class. Misalnya Messagebox,
Grid, Window, Tree, Form, dan lainnya. Selain itu ExtJS juga memiliki clas-class lain untuk data, utility
dan base class. Fungsi seperti OnReady adalah bagian dari class core function. Pada bagian ini kita akan
focus pada class-class yang termasuk dalam windget atau user interface.
Berikut ini adalah contoh bagaimana kita menggunakan Config Object pada Class Widget dalam hal ini
adalah Messagebox untuk mengatur karakteristik Messagebox tersebut.

Ext.onReady(function(){ Ext.Msg.show({
title: 'Milton',
msg: 'Have you seen my stapler?',
buttons: {
yes: true,
no: true,
cancel: true
}
});
});

Seperti pada contoh sebelumnya, disini kita mempasing sebuah fungsi yang akan menampilkan
Messagebox pada fungsi OnReady. Yang berbeda disini adalah messagebox tersebut sudah kita
konfigurasi menggunakan config object. Dengan cara yang sama kita dapat melakukan konfigurasi untuk
widget-widget yang lainnya dalam ExtJS.
Contoh sebelumnya dapat kita ubah menjadi
var stapler = function(){
Ext.Msg.show({
title: 'Milton',
msg: 'Have you seen my stapler?',
buttons: {
yes: true,
no: true,
cancel: true
}
});
}
6

Ext.onReady(stapler);
Konfigurasi Lebih Lanjut
Tambahkan kode berikut (CSS) pada bagian HEAD dari halaman HTML kita.
milton-icon {
background: url(milton-head-icon.png) no-repeat;
}
Kemudian lakukan perubahan pada konfiguras Widget kita
Ext.Msg.show({
title: 'Milton',
msg: 'Have you seen my stapler?',
buttons: {
yes: true,
no: true,
cancel: true
},
icon: 'milton-icon',
fn: function(btn) {
Ext.Msg.alert('You Clicked', btn);
}
});

Membuat Form
Pada bagian ini kita akan menggunakan Widget ExtJS yang lainnya yaitu Form. Form pada ExtJS sama
dengan form pada HTML tetapi lebih flexible, memiliki error checking, styling, dan layout otomatis.
Form dienkapsulasi pada class FormPanel yang merupakan turunan dari class Panel, sehingga Form
dapat melakukan semua yang dapat dilakukan oleh Panel dalam ExtJS.
Pada bagian ini kita akan memahami hal-hal berikut
a. Membuat Form dengan kemampuan Ajax submission
b. Validasi field
c. Mengambil data dari database

Form memiliki 2 fungsi utama, pertama adalah bagian yang berfungsi sebagai action seperti loading
value dan submitting form data. Kemudian yang kedua adalah bagian yang mengatur bagaimana fieldfield pada form ditampilkan (layout).
Berikut adalah komponen dasar form yang akan sering digunakan.
a. Ext.form.FormPanel: subclass dari Panel yang berfungsi sebagai Form
b. Ext.form.BasicForm: class yang digunakan FormPanel untuk managemen field, ajax submission
dan loading data.
c. Ext.form.Field: class dasar yang mengimplementasi kapabilitas sebuah field
Berikut adalah contoh sederhana sebuah Form
Ext.onReady(function(){
var movie_form = new Ext.FormPanel({
url: 'movie-form-submit.php',
renderTo: Ext.getBody(),
frame: true,
title: 'Movie Information Form',
width: 250,
items: [{
xtype: 'textfield',
fieldLabel: 'Title',
name: 'title'
},{
xtype: 'textfield',
fieldLabel: 'Director',
name: 'director'
},{
xtype: 'datefield',
fieldLabel: 'Released',
name: 'released'
}]
});
});

Form Validation
Untuk mencegah sebuah field kosong berikut adalah konfigurasi yang dilakukan
{
xtype: 'textfield',
fieldLabel: 'Title',
name: 'title',
allowBlank: false
}
Setiap jenis field dalam ExtJS memiliki konfigurasi khusus sesuai dengan tipe data masing-masing.
Berikut adalah beberapa option yang tersedia
Field Type

Option

Value type

Description

numberfield

decimalPrecision

Integer

How many
decimal places to
allow

datefield

disabledDates

Array

An array of date
strings that cannot
be selected

timefield

increment

Integer

How many
minutes between
each time option
9

Sebagai contoh misalnya kita ingin meng-disable tanggal tertentu pada datefield
{
xtype: 'datefield',
fieldLabel: 'Released',
name: 'released',
disabledDays: [1,2,3,4,5]
}

Saat kita menggunakan jenis field yang berbeda, kita memiliki validator yang berbeda misalnya
numberfield dapat kita batasi size dari number tersebut atau decimal placenya.
Standar konfigurasi masing-masing jenis field dapat ditemukan dalam API Reference

10

Build-in Validation
ExtJS memiliki build in validation yaitu vtypes. Ini dapat digunakan untuk membatasi user input yang
umumnya digunakan, misalnya untuk input email, url, alpha, alphanum
Ext.onReady(function(){
var movie_form = new Ext.FormPanel({
url: 'movie-form-submit.php',
renderTo: document.body,
frame: true,
title: 'Movie Information Form',
width: 250,
items: [{
xtype: 'textfield',
fieldLabel: 'Title',
name: 'title',
allowBlank: false
},{
xtype: 'textfield',
fieldLabel: 'Director',
name: 'director',
vtype: 'alpha'
},{
xtype: 'datefield',
fieldLabel: 'Released',
name: 'released',
11

disabledDays: [1,2,3,4,5]
}]
});
});
Menampilkan Errors
Salah satu build-in option yang dapat digunakan untuk menampilkan error message adalah ballon tips
dengan class QuickTips. Untuk menggunakannya kita hanya butuh menambahkan 1 baris code berikut
sebelum Form kita diinisialisasi.
Ext.QuickTips.init();

Radio button dan check box


Kode berikut ini menambahkan radio button pada form kita sebelumnya menggunakan radiogroup.
Default xtype dari radiogroup adalah radio jadi kita tidak perlu mengkonfigurasinya.
{
xtype: 'radiogroup',
columns: 1,
fieldLabel: 'Filmed In',
name: 'filmed_in',
items: [{
name: 'filmed_in',
boxLabel: 'Color',
inputValue: 'color'
},{
name: 'filmed_in',
boxLabel: 'Black & White',
inputValue: 'B&W'
}]
}

12

Checkbox
{
xtype: 'checkbox',
fieldLabel: 'Bad Movie',
name: 'bad_movie',
checked: true
}
Kita dapat menggunakan CheckboxGroup jika diinginkan ada beberapa checkbox. Penggunaannya sama
seperti RadioGroup.
Combobox
Komponen ini memiliki fungsi yang sama dengan element SELECT pada HTML, yang menyediakan pilihan
dropdown yang dapat dipilih. Combobox dapat secara dinamis mengambil data dari server (datasource).
Datasource dapat kita analogikan berupa tabel pada client side. Datasource ini memiliki beberapa record
data. Classs ArrayStore kita konfigurasi seperti halnya tabel yang memiliki field name dan data berupa
array 2 dimensi.
var genres = new Ext.data.ArrayStore({
fields: ['id', 'genre_name'],
data : [['1','Comedy'],['2','Drama'],['3','Action']]
});
Beberapa konfigurasi yang kita butuhkan saat menginisialisasi Combobox antara lain
a. Store: store merupakan data yang akan ditampilkan dalam Combobox
b. Mode: mengspesifikasikan apakah datasource akan diload terlebih dahulu atau diload secara
dinamis saat kita mengetikan suatu karakter di Combobox.
c. displayField: Mengspesifikasikan field yang valuenya akan diasosiasikan. Jika option ini
digunakan maka option hiddenName juga harus dikonfigurasi.
d. hiddenName: ini merupakan hidden HTML field yang digunakan untuk menyimpan nilai dari
combobox.

13

{
xtype: 'combo',
hiddenName: 'genre',
fieldLabel: 'Genre',
mode: 'local',
store: genres,
displayField:'genre_name',
valueField:'id',
width: 120
}

Contoh ini cocok untuk combobox yang datanya tidak terlalu banyak dan tidak berubah secara
dinamis.
Combobox dengan data dari Database
Untuk melakukan hal ini maka kita perlu membuat kode pada server side misalnya dengan
menggunakan PHP. Kode pada server side akan mengambil data dari tabel dan memformatnya
dalam format String JSON sehingga dapat digunakan oleh Combobox. Untuk melakukan hal ini kita
membutuhkan library JSON untuk melakukan encode data. Pada PHP 5.1 ke atas library JSON sudah
tersedia.
14

<?php
// connection to database goes here
$result = mysql_query('SELECT id, genre_name FROM genres');
If (mysql_num_rows($result) > 0) {
while ($obj = mysql_fetch_object($result)) {
$arr[] = $obj;
}
}
Echo '{rows:'.json_encode($arr).'}';
?>
Ketika kita menggunakan remot data seperti contoh ini, maka ada beberapa hal yang perlu kita
sesuaikan pada client sidenya. Pertama, datasource harus mengetahui format data yang ada. Saat
kita menggunakan class ArrayStore maka format datanya adalah array. Pada contoh berikut kita
spesifikasikan bahwa data yang akan dibaca adalah data dalam format JSON sehingga kita
membutuhkan JsonReader.
var genres = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['id', 'genre_name'],
root: 'rows'
}),
proxy: new Ext.data.HttpProxy({
url: 'data/genres.php'
}),
autoLoad: true
});

TextArea dan HTMLEditor


Selanjutnya kita akan menambahkan multiline textarea pada form. ExtJS punya 2 option untuk hal ini.
Pertama kita dapat menggunakan standar textarea atau kita dapat menggunakan HTMLEditor berupa
rich text editing.
Kita akan menggunakan 2 option konfigurasi yang baru
a. hideLabel: ini akan menyebabkan textarea tersebut tidak akan memiliki label pada bagian
kirinya.
b. Anchor: jika diberi nilai 100% maka textarea ini akan memenuhi lebar dari form.
15

{
xtype: 'textarea',
name: 'description',
hideLabel: true,
height: 100,
anchor: '100%'
}
Atau kita dapat mengganti xtype dengan htmleditor
{
xtype: 'htmleditor',
name: 'description',
hideLabel: true,
height: 100,
anchor: '100%'
}

16

Form Field Listening Event


Untuk melakukan listening event pada form field kita dapat menggunakan option config listener.
Berikut adalah contoh untuk mendeteksi penekanan tombol Enter pada text field, ketika user
menekan tombol Enter maka form akan disubmit.
{
xtype: 'textfield',
fieldLabel: 'Title',
name: 'title',
allowBlank: false,
listeners: {
specialkey: function(field, eventObj){
if (eventObj.getKey() == Ext.EventObject.ENTER) {
movie_form.getForm().submit();
}
}
}
}
Combobox Event
{
xtype: 'combo',
name: 'genre',
fieldLabel: 'Genre',
mode: 'local',
store: genres,
displayField:'genre_name',
width: 130,
listeners: {
select: function(field, rec, selIndex){
if (selIndex == 0){
Ext.Msg.prompt('New Genre', 'Name', Ext.emptyFn);
}
}
}
}

17

Button dan Form Action


Sampai disini kita sudah membuat sebuah form yang lumayan kompleks. Yang belum dibuat adalah
form ini belum mengirimkan data ke server. Untuk hal ini kita akan menambahkan beberapa button
pada form tersebut.
buttons: [{
text: 'Save',
handler: function(){
movie_form.getForm().submit({
success: function(form, action){
Ext.Msg.alert('Success', 'It worked');
},
failure: function(form, action){
Ext.Msg.alert('Warning', 'Error');
}
});
}
}, {
text: 'Reset',
handler: function(){
movie_form.getForm().reset();
}
}]

18

Kemudian pada sisi server kita buat code sbb


<?php
$title = $_POST['title'];
if (empty($title)) {
$json = '{succes:false,errors:{title:"Please
title"}}';
echo $json;
}
?>

fill

in

this

Pada kode server side di atas kita melakukan pengecekan apabila field title kosong maka akan
dikembalikan pesan kesalahan dalam format JSON.
Loading Form With Data
Form yang menampilkan data biasanya digunakan untuk mengubah data. Data diambil dari mana
saja, baik itu data dinamis dari database atau dari variable dan literal tertentu. Untuk menampilkn
data dari literal dapat kita liat pada contoh berikut.
movie_form.getForm().findField('title').setValue('Dumb & Dumber');

19

berikut adalah contoh untuk membaca data dari database


<?php
// connection to database goes here
$result = mysql_query('SELECT * FROM movies WHERE id = '.$_
REQUEST['id']);
if (mysql_num_rows($result) > 0) {
$obj = mysql_fetch_object($result);
Echo '{success: true, data:'.json_encode($obj).'}';
}else{
Echo '{success: false}';
}
?>
Kode ini akan menghasilkan data dalam format JSON kurang lebih seperti berikut ini
{
success: true,
data:{
"id":"1",
"title":"Office Space",
"director":"Mike Judge",
"released":"1999-02-19",
"genre":"1",
"tagline":"Work Sucks",
"coverthumb":"84m.jpg",
"price":"19.95",
"available":"1"
}
}
Untuk di tampilkan dalam form kita butuh mentriggernya dengan memanggil method load
movie_form.getForm().load({
url:'movie.php',
params:{
id: 1
}
});

20

Menu, Toolbar dan Button


Class yang digunakan untuk kebutuhan ini adalah Ext.menu.Menu, Ext.Toolbar, Ext.Button,
Ext.SplitButton, Ext.CycleButton dan Ext.ButtonGroup.
new Ext.menu.Menu({
renderTo: document.body,
width: 150,
floating: false,
items: menuItem
});
Untuk Popup menu perlu konfigurasi tambahan yaitu kita menentukan dimana menu tersebut akan
ditampilkan. Untuk hal ini kita tambahkan contextmenu listener untuk mendeteksi dimana mouse diklik
(right click).
var contextMenu = new Ext.menu.Menu({
items: menuItem
});
Ext.getDoc().on({
contextmenu: function(eventObj) {
contextMenu.showAt(eventObj.getXY());
},
stopEvent: true
});
Menu Item
Variable menuItems pada contoh diatas merupakan referensi ke sebuah array. Ini merupakan list dari
komponen dan config object sama seperti pada pembuatan FormPanel. MenuItem class memiliki config
option sebagai berikut
a.
b.
c.
d.
e.

Icon: URL untuk image pada menu


IconCls: CSS class name untuk mengatur style dari icon
Text: Teks yang ditampilkan pada menu
Handler: fungsi yang akan dipanggil saat menu di klik
Menu: menu object, atau menu config object yang merepresentasikan sub menu.

var menuAction = function(){


Ext.Msg.alert('Message','Menu Click');
}
var menuItem = [
{
text : 'Menu Option 1',
iconCls: 'flag-green',
handler: menuAction
},
{
text: 'Menu Option 2',
iconCls: 'flag-green',

21

menu: {
plain: true,
items: {
xtype: 'form',
border: false,
bodyStyle: 'background:transparent;padding:5px',
labelWidth: 70,
width: 300,
defaults: {
anchor: '100%'
},
items: [{
xtype: 'combo',
editable: false,
fieldLabel: 'Select',
triggerAction: 'all',
store: [ [0, 'One or...'], [1 ,'The
other']],
value: 0,
getListParent: function() {
return this.el.up('div.x-menu');
}
}, {
xtype: 'textfield',
fieldLabel: 'Title'
}],
fbar: [{
text: 'Submit'
}]
}
}
}];
Ext.onReady(function(){
/*var contextMenu = new Ext.menu.Menu({
items: menuItem
});
Ext.getDoc().on({
contextmenu: function(eventObj) {
contextMenu.showAt(eventObj.getXY());
},
stopEvent: true
});*/
new Ext.menu.Menu({
renderTo: document.body,
width: 150,
floating: false,
items: menuItem
});
});

22

Toolbar
Ext.onReady(function(){
new Ext.Toolbar({
renderTo: Ext.getBody(),
items: [{
xtype: 'button',
text: 'Button'
},{
xtype: 'button',
text: 'Menu Button',
menu: [{
text: 'Better'
},{
text: 'Good'
},{
text: 'Best'
}]
},{
xtype: 'splitbutton',
text: 'Split Button',
menu: [{
text: 'Item One'
},{
text: 'Item Two'
},{
text: 'Item Three'
}]
}, {
xtype: 'cycle',
showText: true,
minWidth: 100,
prependText: 'Quality: ',
items: [{
text: 'High',
checked: true
}, {
text: 'Medium'
23

}, {
text: 'Low'
}]
}, {
text: 'Horizontal',
toggleGroup: 'orientation-selector'
}, {
text: 'Vertical',
toggleGroup: 'orientation-selector'
}]
});
});

Basic Button
{
xtype: 'button',
text: 'Button',
handler: functionReference
}

Button dengan Menu


{
xtype: 'button',
text: 'Button',
menu: [{
text: 'Better'
},{
text: 'Good'
},{
text: 'Best'
}]
}

24

Toolbar pada Panel


Toolbar dapat digunakan pada semua Class yang merupakan turunan dari Class Panel, seperti GridPanel,
TreePanel dan Window
new Ext.Window({
title: 'Help',
width: 300,
height: 300,
renderTo: document.body,
closeAction: 'hide',
layout: 'fit',
tbar: [{
text: 'Close',
handler: function(){
winhelp.hide();
}
},{
text: 'Disable',
handler: function(t){
t.disable();
}
}]
});
Menampilkan Data dalam Grid
Grid merupakan salah satu komponen yang sangat penting. Grid biasanya digunakan untuk
menampilkan daftar data yang banyak. ExtJS memiliki widget Grid yang fleksibel.
var Movie = Ext.data.Record.create([
'id',
'coverthumb',
'title',
'director',
'runtime',
{name: 'released', type: 'date', dateFormat: 'Y-m-d'},
'genre',
'tagline',
{name: 'price', type: 'float'},
{name: 'available', type: 'bool'}
]);
var movieData = [
[
1,
"Office Space",
25

"Mike Judge",
89,
"1999-02-19",
1,
"Work Sucks",
"19.95",
1
],[
3,
"Super Troopers",
"Jay Chandrasekhar",
100,
"2002-02-15",
1,
"Altered State Police",
"14.95",
1
]
//...more rows of data removed for readability...//
];
var store = new Ext.data.Store({
data: movieData, ,
reader: new Ext.data.ArrayReader({idIndex: 0}, Movie)
});

26

Layout
new Ext.Panel({
renderTo: document.body,
title: "I arranged two boxes horizontally using 'hbox' layout!",
height: 400,
width: 600,
layout: {
type: 'hbox',
align: 'stretch',
padding: 5
},
items: [{
xtype: 'box',
flex: 1,
style: 'border: 1px solid #8DB2E3',
margins: '0 3 0 0',
html: 'Left box'
}, {
xtype: 'box',
flex: 1,
style: 'border: 1px solid #8DB2E3',
margins: '0 0 0 2',
html: 'Right box'
}],
style: 'padding:10px'
});

27

Window dan Dialog


Ext.Msg.alert('Hey!', 'Something happened.');

var data = prompt('Tell me something');


Ext.Msg.prompt('Hey!', 'Tell me something', function(btn, text){
if (btn == 'ok'){
var data = text;
}
}, this, false, '');

Confirmation Dialog
Ext.Msg.confirm('Hey!', 'Is this ok?', function(btn, text){
if (btn == 'yes'){
// go ahead and do more stuff
} else {
// abort, abort!
}
});

28

Window
Kita dapat membuat window seperti kode berikut ini
var w = new Ext.Window({height:100, width: 200});
w.show();

Kita juga dapat menggunakan HTML untuk mendefinisikan Window


var w = new Ext.Window({
height: 150, width: 200,
title: 'A Window',
html: '<h1>Oh</h1><p>HI THERE EVERYONE</p>'
});
w.show();

Dalam Window juga bisa kita atur layoutnya


var w = new Ext.Window({
layout: 'form',
items:[
{ xtype: 'textfield', fieldLabel: 'First Name'},
new Ext.form.TextField({fieldLabel: 'Surname'})
]
});
w.show();

29

Window Konfigurasi
var w = new Ext.Window({
height:50,
width: 100,
closable: false,
draggable: false,
resizable: false
});
w.show();

30

Anda mungkin juga menyukai