Mulailah saya download extjs dan sedikit memodifikasi dan membaca tutorialnya. Pada dasarnya format ExtJs adalah aray jadi semua penulisan javascript yang digunakan berbentuk array yang tersetruktur.kalo kita lihat pelisan kodingnya pasti merasa pusing, sama saya pusing. Untuk memberi solisi agar kita tidak pusing ada beberapa hal yang saya lakukan.
Karena saya terbiasa menggunakan program dengan klik dan drag maka saya juga merasa sangat kesulitan sekali, berawal dari itu saya berusaha mencari solusi nah akhirnya ketemu juga ExtGuiBuilder yang menurut saya sangat membantu dalam proses pembuatan program ExtJs ini.
Langkah – langkah pembuatan program sederhana ini adalah sebagai berikut :
- Jalankan apache dan mysql.
- Buat folder baru di htdocs misal dengan nama latihanextjs.
- Kopikan library extjs (resources, adapter, ext-all.js ) ke folder js
- Buat database baru di mysql dengan nama extjs dan buat sekalian table nya dengan si sebagai berikut :
/*Buat table baru*/
CREATE TABLE `tblkaryawan` ( `nopeg` char(10) NOT NULL, `nama` varchar(30) default NULL, `alamat` varchar(50) default NULL, `keterangan` varchar(50) default NULL, PRIMARY KEY (`nopeg`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1; — – Dumping data for table `tblkaryawan`
– isi data ke tblkaryawan
INSERT INTO `tblkaryawan` (`nopeg`, `nama`, `alamat`, `keterangan`) VALUES
(’2008.08.01′, ‘SUGIK PUJA KUSUMA’, ‘SURABAYA’, ‘OK DEH’),
(’2008.08.02′, ‘ANGGA PUJA KUSUMA’, ‘SURABAYA’, ‘OK DEH’), (’2008.08.03′, ‘POYEN PUJA KUSUMA’, ‘SURABAYA’, ‘OK DEH’), (’2008.08.04′, ‘ANDI PUJA KUSUMA’, ‘SURABAYA’, ‘OK DEH’), (’2008.08.05′, ‘EKO PUJA KUSUMA’, ‘SURABAYA’, ‘OK DEH’), (’2008.08.06′, ‘HADI PUJA KUSUMA’, ‘SURABAYA’, ‘OK DEH’), (’2008.08.07′, ‘SUGENG PUJA KUSUMA’, ‘SURABAYA’, ‘OK DEH’), (’2008.08.08′, ‘ALI PUJA KUSUMA’, ‘SURABAYA’, ‘OK DEH’), (’2008.08.09′, ‘P-IJO PUJA KUSUMA’, ‘SURABAYA’, ‘OK DEH’), (’2008.08.10′, ‘AHMAD PUJA KUSUMA’, ‘SURABAYA’, ‘OK DEH’), (’2008.08.11′, ‘BUDI PUJA KUSUMA’, ‘SURABAYA’, ‘OK DEH’), (’2008.08.12′, ‘JULIA PUJA KUSUMA’, ‘SURABAYA’, ‘OK DEH’), (’2008.08.13′, ‘GUNTUR PUJA KUSUMA’, ‘SURABAYA’, ‘OK DEH’), (’2008.08.14′, ‘YUDI PUJA KUSUMA’, ‘SURABAYA’, ‘OK DEH’), (’2008.08.15′, ‘RAHMAN PUJA KUSUMA’, ‘SURABAYA’, ‘OK DEH’); - Buat juga sebuah file index.html, index.php dan index.jsp
kopikan koding dibawah ini ke index.html
<html>
<head>
<title>Latihan ExtJs</title>
<link rel=�stylesheet� type=�text/css� href=�js/resources/css/ext-all.css� />
<script type=�text/javascript� src=�js/adapter/ext/ext-base.js�></script>
<script type=�text/javascript� src=�js/ext-all.js�></script>
<script type=�text/javascript� src=�index.js�></script>
</head>
<body>
</body>
</html>
kopikan koding dibawah ini ke index.php
<?php
mysql_pconnect(�localhost�, �root�, �java�) or die(�Could not connect�);
mysql_select_db(�extjs�) or die(�Could not select database�);
$rs = mysql_query(�SELECT * FROM tblkaryawan�);
$arr = array();
while($obj = mysql_fetch_object($rs)) {
$arr[] = $obj;
}
echo json_encode($arr);
?>
kopikan koding dibawah ini ke index.js
// JavaScript Document
//var rectmp,store,grid, thn;
//var tmptitip=�0014�;
Ext.onReady(function(){
Ext.QuickTips.init();
//������������������
// create the Data Store
store = new Ext.data.JsonStore({
url:�index.php�,
id: �nopeg�,
//totalProperty: �total�,
//root: �nopeg�,
fields: [
{name:�nopeg�},
{name:�nama�},
{name:�alamat�},
{name:�keterangan�}
],
//sortInfo: {field: �company�, direction: �ASC�},
remoteSort: true
});
//store.setDefaultSort(�kodebarang�, �desc�);
//Membuat text untuk pencarian data
grid = new Ext.grid.GridPanel({
store: store,
loadMask: true,
columns: [new Ext.grid.RowNumberer() ,
{header: �NOPEG�, width: 70, dataIndex: �nopeg�, sortable: true},
{header: �NAMA�, width: 150, dataIndex: �nama�, sortable: true},
{header: �ALAMAT�, width: 100, dataIndex: �alamat�, sortable: true},
{header: �KETERANGAN�, width: 70, dataIndex: �keterangan�, sortable: true}
],
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm, row, rec) {
rectmp=rec;
Ext.getCmp(�frm_add�).getForm().loadRecord(rec);
}
}
}),
viewConfig: {
forceFit:false //auto width
},
baseCls: �x-plain�,
region: �center�
});
store.load();
var win = new Ext.Window({
closable: false,
draggable: true,
height: 400,
layout: �border�,
minHeight:400,
minWidth: 430,
plain: false,
resizable: false,
closable:true,
maximizable:true,
minimizable:true,
items: [
grid
],
title: �Daftar Karyawan�,
width: 430
});
win.show();
}); - Sampai disini semua telah selesai n anda tinggal memanggil dengan mengetik http://localhost/ latihanextjs
Tidak ada komentar:
Posting Komentar