PDA

View Full Version : display data from postgres to gridpanel



anhtuan23
13 Sep 2015, 1:23 AM
Hi, I am currently having problems displaying data from postgres to gridpanel, and I do not know what the wrong place and solve the stars. Hope everybody helped, thanks.





Here's the code to connect to the database using my postgres "cn1.php":




<?php
$db = pg_connect("host=localhost port=5432 dbname=admin user=postgres password=admin") or die('could not connect:'.pg_last_error());
$result = pg_query($db, "SELECT * FROM public.user") or die("Data load failed:".pg_last_error());

$rows = array(
'type' => 'ajax',
'field' => array()
);
while($r = pg_fetch_assoc($result))
{
$rows[] = $r;
}
echo json_encode($rows);
?>




and the results of the php file:

{"type":"ajax","field":[],"0":{"id":"1","tendangnhap":"anhtuan ","hoten":"Nguyen Van Anh Tuan ","email":"anhtuan@gmail.com ","matkhau":"123456 ","timkiem":null,"baocao":null,"anhdaidien":"abc "},"1":{"id":"2","tendangnhap":"xuantien ","hoten":"Dang Xuan Tien ","email":"xuantien@gmail.com ","matkhau":"123456 ","timkiem":null,"baocao":"f","anhdaidien":"def "},"2":{"id":"3","tendangnhap":"trantan ","hoten":"Tran Van Tan ","email":"trantan@gmail.com ","matkhau":"12345 ","timkiem":"f","baocao":null,"anhdaidien":"klm "}}

this is my js file:

Ext.onReady(function(){
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'id'},
{name: 'tendangnhap'},
{name: 'hoten'},
{name: 'email'},
{name: 'matkhau'},
{name: 'timkiem'},
{name: 'baocao'},
{name: 'anhdaidien'}

]
});

//create Viewport
Ext.onReady(function(){
Ext.create("Ext.container.Viewport",
{ layout : "border",

items: [
{ width : 200, region : "west", split:true,collapsible: true, title: 'Cc ch?c n?ng qu?n l', items: [] },
{ height : 100, region : "north", items: [] },
{ id : "regCenter", region : "center", items: [grid4] }
]
}
);
});



var store = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url : 'cn1.php',
reader: {
type: 'json'
}
},
reader: {
type : 'json',
model: 'User'
}
});



Ext.QuickTips.init();



var getLocalStore = function() {
return Ext.create('Ext.data.ArrayStore', {
model: 'User',
storeId: 'mydata',
data: Ext.grid.dummyData
});
};

////////////////////////////////////////////////////////////////////////////////////////
// Grid 4
////////////////////////////////////////////////////////////////////////////////////////
var selModel = Ext.create('Ext.selection.CheckboxModel', {
listeners: {
selectionchange: function(sm, selections) {
grid4.down('#removeButton').setDisabled(selections.length == 0);
}
}
});
//checkbox colum

var grid4 = Ext.create('Ext.grid.Panel', {
id:'button-grid',
store: getLocalStore(),

columns: [
{text: "id", flex: 1, sortable: true, dataIndex: 'id'},
{text: "Tn ??ng nh?p", flex: 1, sortable: true, dataIndex: 'tendangnhap'},
{text: "H? tn", flex: 1, sortable: true, dataIndex: 'hoten'},
{text: "Email", flex: 1, sortable: true, dataIndex: 'email'},
{text: "M?t kh?u", flex: 1, sortable: true, dataIndex: 'matkhau'},
{text: "Tm ki?m", flex: 1,xtype: 'checkcolumn', dataIndex: 'timkiem'},
{text: "Bo co", flex: 1, xtype: 'checkcolumn', dataIndex: 'baocao'},
{text: "?nh ??i di?n", flex: 1, sortable: true, dataIndex: 'anhdaidien'}


],
columnLines: true,
selModel: selModel,

// inline buttons
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
layout: {
pack: 'center'
},
items: [{
minWidth: 80,
text: 'L?u d? li?u'
},{
minWidth: 80,
text: 'H?y b?'
}]
}, {
xtype: 'toolbar',
items: [{
text:'Thm ng??i dng',
tooltip:'Add a new row',
iconCls:'add'
}, '-', {
text:'Ch?nh s?a thng tin ng??i dng',
tooltip:'Set options',
iconCls:'option'
},'-',{
itemId: 'removeButton',
text:'Xa ng??i dng',
tooltip:'Remove the selected item',
iconCls:'remove',
disabled: true
}]
}],

width: 1080,
height: 520,
frame: true,
title: 'D? li?u ng??i dng',
iconCls: 'icon-grid',
renderTo: Ext.getBody()
});
});

ssamayoa
14 Sep 2015, 9:10 AM
You must format the JSON as ExtJS expects which is something like:



{
"success": true,
"data": [
{ "field": value...},
...
]
}


In the reader config you must set rootProperty which in the example above would be "data".

Regards.