View Full Version : trying to display a grid with dynamic data from db

31 Mar 2014, 4:17 AM
Hello experts
am new to sencha ext js and am in process of learning it ,
but am stuck in this code can't figure out what is wrong with it.
I want to fetch data using MYSQL but i get an empty grid .
Below is my code

$query = "SELECT city_id,city_name FROM `cities`";
$result = mysql_query($query);
if(mysql_num_rows($result)!== 0){
while($rec = mysql_fetch_array($result)){
$arr[$i]['city_id'] = $rec['city_id'];
$arr[$i]['city_name'] = $rec['city_name'];
$myData = array('myCityes' => $arr);
echo json_encode($myData);

and this is my js code


var citiesDataStore = new Ext.data.Store({
id: 'citiesDataStore',
proxy: new Ext.data.HttpProxy({
url : 'get_cities.php'
reader: new Ext.data.JsonReader({
// we tell the datastore where to get his data from
root: 'myCityes',
id: 'city_id',
[{name: 'city_id', type: 'int', mapping: 'city_id'},
{name: 'name', type: 'string', string: 'city_name'}
sortInfo:{field: 'city_id', direction: "ASC"},


// fill the grid

var grid1 = Ext.create('Ext.grid.Panel', {
store: citiesDataStore,
columns: [
{text: "id", dataIndex: 'id'},
{text: "name", dataIndex: 'name'}
columnLines: true,
enableLocking: true,
width: 600,
height: 300,

plugins: [{
ptype: 'rowexpander',
rowBodyTpl : new Ext.XTemplate(
'<p><b>Company:</b> {company}</p>',
'<p><b>Change:</b> {change:this.formatChange}</p><br>',
'<p><b>Summary:</b> {desc}</p>',
formatChange: function(v){
var color = v >= 0 ? 'green' : 'red';
return '<span style="color: ' + color + ';">' + Ext.util.Format.usMoney(v) + '</span>';
collapsible: true,
animCollapse: false,
title: 'Expander Rows in a Collapsible Grid with lockable columns',
iconCls: 'icon-grid',
margin: '0 0 20 0',
renderTo: Ext.getBody()

please if anyone can help me I need to fix this fast

Scott Mildenberger
31 Mar 2014, 10:01 AM
Is the data getting into the store? The name of the first item in the grid doesn't match the item in the store - id vs. city_id. You might have to tell us more about what you have checked and what parts are or are not working.

31 Mar 2014, 10:49 AM
Thank you for your reply Scott Mildenberger
no , there is no data into the store I use citiesDataStore.getCount() to check that ,I got zero
my guess is there is something wrong in the Ext.data.HttpProxy

1 Apr 2014, 1:33 AM
Hi, check these first:
is the data transferred correctly to your browser? (in chrome u can check this in the network tab)
is the reader you specified in the proxy matches the json structure?