Merhaba
Php ile veri kaynağıdan çektiğimiz verikümesini json formatına çevirerek ext gridpanel nesnesi üzerinde gösterimini görücez.
Getdata.php
<?php
class DB {
function GetDatasetAsJSON() {
$servername = ‘?’;
$username = '?';
$password = '?';
$connectionID = mssql_connect($servername, $username, $password);
mssql_select_db("?");
$result = mssql_query("select * from Categories");
$rows = array();
while ($row = mssql_fetch_assoc($result)) {
$rows[] = $row;
}
mssql_close($connectionID);
return json_encode($rows);
}
}
$db = new DB();
print '{
"category":' . $db->GetDatasetAsJSON() . '}';
unset($db);
?>
Categories.js
Ext.onReady(function(){
// Store nesnesi veri saklamak için kullanılır.
// Sunucu(server-side) dan çekilen verinin istemci(client-side)
// tarafındaki halidir diyebiliriz özetle.
// verinin en son değişen hali store üzerinde tutulur.
// Farz-ı misal :)
// Aşağıdaki gridi bu categoryStore nesnesine bağladığınızda
// grid veya başka bir nesnede olabilir,grid üzerindeki veri de yaptığınız
// her değişiklik(ekleme,silme,değiştirme) store nesnesine yansıtılır.
// url : json veya xml formatındaki veri kaynağının adresi atanabilir
var categoryStore = Ext.create('Ext.data.JsonStore', {
fields: [
{
name: 'CategoryID'
},
{
name: 'CategoryName'
}],
autoLoad: true,
proxy: {
type: 'ajax',
url: 'getdata.php',
reader: {
type: 'json',
root: 'category'
}
}
});
//Gridpanel nesnesi oluşturuyoruz.
//Gridpanelde göstereceğimiz veri kaynağını store özelliği ile belirtiyoruz.
//renderTo özelliği gridi nereden gösterecek onu belirtiyoruz.
var gridPanel=Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: categoryStore,
width: 400,
height: 200,
title: 'Categories',
columns: [
{
text: 'No',
width: 50,
dataIndex: 'CategoryID'
},
{
text: 'Kategori Adı',
width: 150,
dataIndex: 'CategoryName'
}
]
});
//instance üzerinden nesnenin üyelerine erişim
gridPanel.setTitle('Kategoriler');
});
index.php
<!DOCTYPE html>
<html>
<head>
<title>extJS Php json veri Okuma</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="../extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="../extjs/ext-all.js" type="text/javascript"></script>
<script src="Categories.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
Demo : http://yazilimarge.com/ext/jsonreadsample/
Kaynak Kod
Kaynaklar :
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Store
http://docs.sencha.com/ext-js/4-0/#!/guide/grid
İsmail Kocacan (Yazılımcı Bozuntusu)
ismailkocacan at gmail com