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