Assalamu’ alaikum wr wb
Jumpa kembali dengan mbahsomo, sebelumnya saya ucapkan “Mohon Maaf Lahir Dan Batin”
Ok Dah Seperti bisanya langsung pada permasalahan, pada ExtJs 4 banyak sekali terdapat perubahan pada beberapa object komponen yang di gunakan, terutama pada cara load, object atau create,
misal kalo dulu kita biasa menggunakan misal :
var win = new Ext.Window({});
pada ExtJs 4 di sarankan untuk menggunakan
var win = Ext.create();
dengan sara kita harus import dulu object yang ada, ini hampir mirip dengan penggunakan pada java aplikasi.
Beberapa tools yang dibutuhkan
ExtJs 4 => http://www.senca.com/
Editor terserah mau menggunakan Apa [saya menggunakan netbeans].
Kopikan hasil download ExtJs4 kamu di home:
xampp windows = c:/xampp/htdocs/
xampp linux = /opt/lampp/htdocs/
apache linux = /var/www/
dan juga tergantung instalasi anda advanced instalasi.
Buat proect baru di home apachenya misal latihanextjs, kemudian buat sebuah file index.html
tulis script di bawah ini:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Latihan Crud</title>
<link rel=”stylesheet” type=”text/css” href=”http://latihan.lokal.com/ext-4.0.0/resources/css/ext-all.css” />
<script type=”text/javascript” src=”http://latihan.lokal.com/ext-4.0.0/bootstrap.js”></script>
<script type=”text/javascript”>
//Untuk import object yang akan di butuhkan
Ext.require([
‘Ext.grid.*’]);
Ext.onReady(function() {
Ext.QuickTips.init();
//Membuat data store
//Dengan memanfaatkan ajax proxy
var storeGrid = Ext.create(‘Ext.data.Store’,{
model: ‘treeMenu’
,proxy: {
type: ‘ajax’
,url : ‘<?php echo base_url() . ‘ambildata.php’ ?>’
,noCache : false
,params : Ext.encode({
start : 0
,limit : 20
})
,actionMethods : ‘POST’
,reader: {
type: ‘json’
,root: ‘response’
,totalProperty: ‘jumlah’
,idProperty: ‘MN_ID’
}
}
,autoLoad: true
,sorters: [{
property : ‘MN_ID’,
direction : ‘ASC’
}]
});
//Membuat grid
var grid = Ext.create(‘Ext.grid.Panel’, {
store: storeGrid
,columns: [
{ header: ‘NAMA’,width: 200,sortable: true,dataIndex: ‘MN_NAME’}
,{ header: ‘LINK’,width: 100,sortable: true,dataIndex: ‘MN_LINK’}
,{ header: ‘PARENT’,width: 100,sortable: true,dataIndex: ‘MN_PARENT’}
,{ header: ‘GROUP’,width: 100,sortable: true,dataIndex: ‘MN_GRP’}
,{ header: ‘URUTAN’,width: 100,sortable: true,dataIndex: ‘MN_SORT’}
,{ header: ‘STATUS’,width: 100,sortable: true,dataIndex: ‘MN_STATUS’}
,{ header: ‘ICON’,width: 100,sortable: true,dataIndex: ‘MN_ICON’}
,{ header: ‘TYPE’,width: 100,sortable: true,dataIndex: ‘MN_TYPE’}
]
,height: 350
,selModel : smGrid
,width: 600
,title: ‘GRID’
,renderTo: ‘grid’
,viewConfig: {
stripeRows: true
}
,bbar: new Ext.PagingToolbar({
pageSize : 20
,store : storeGrid
,displayInfo: true
,displayMsg : ‘Data yang ada {0} – {1} Dari {2}’
,emptyMsg : “Tidak ada data”
})
});
});
</script>
</head>
<body>
<div id=”grid”></id>
</body>
</html>
Keterangan : pada script di atas sudah terlihat beberapa perbedaanya kan monggo di lanjut untuk script phpnya
script ambildata.php
$host = “localhost”;
$userdb = “root”;
$passdb = “toor”;
$dbname = “db_cart”;
$conn = mysql_connect($host,$userdb,$passdb) or die (‘Belum terkoneksi mysql’);
mysql_select_db($dbname,$conn) or die ($dbname.’ Tidak ditemukan di mysql’);
$query=”SELECT * FROM tb_tree_menu”;
$hasil=mysql_query($query);
$query1=”SELECT count(*) as jml FROM tb_tree_menu”;
$hasil1=mysql_query($query1);
if ($hasil) {
$data=mysql_fetch_array($hasil);
$data1=mysql_fetch_array($hasil1);
$arr_value = array(
‘response’ => $data
, ‘jumlah’ => $data1[0][‘jml’]
);
echo json_encode($arr_value);
}
Ok selamat mencoba nanti akan dilanjut pada BAB Selanjutnya
Wassalamu’ alaikum wr wb