PDA

View Full Version : How to display name/value pairs in Ext.grid.Panel using Ext.data.Store



Aubin Mahé
2 Nov 2013, 3:18 AM
Here is the store :
Ext.define( 'LFinanceCRM.store.Prospect', {
extend : 'Ext.data.Store',
buffered : false,
autoLoad : true,
remoteFilter : true,
storeId : 'prospect-store',
proxy : {
type : 'ajax',
url : 'services/getProspect.php',
filterParam : undefined,
limitParam : undefined,
startParam : undefined,
pageParam : undefined,
idParam : 'id',
reader : {
type : 'json',
root : 'prospect'
}
},
fields : [
{ name : 'id' },
{ name : 'value' }
],
constructor : function(){
this.callParent( arguments );
console.log( 'new ' + this.self.getName());
}
});

Here is the JSON received from PHP:
{prospect:[
{id:'aaa',value:'vvvv'},
{id:'bbb',value:'vvvv'},
...
{id:'yyy',value:'vvvv'},
{id:'zzz',value:'vvvv'},
}]

Here is the view:
Ext.define( 'LFinanceCRM.view.RawDataView', {
extend : 'Ext.grid.Panel',
requires :[],
alias : 'widget.raw-data-view',
autoScroll : true,
title : 'Données brutes',
columnLines : true,
viewConfig : { stripeRows : true },
store : Ext.data.StoreManager.lookup( 'prospect-store' ),
columns : [{
text : 'Nom',
dataIndex : 'name',
sortable : false,
width : '29%'
},{
text : 'Valeur',
dataIndex : 'value',
sortable : true,
width : '70%'
}],
constructor : function() {
this.callParent( arguments );
console.log('new ' + this.self.getName());
}
});

Nothing is displayed yet!

My question is : how can I transform the data from store to feed the view with them?

existdissolve
2 Nov 2013, 4:52 AM
JavaScript is case-sensitive, so unless you have a typo in the code you've posted, you need to make sure that the "root" of your Ext.data.reader.Reader is the same as what you return in your JSON. Currently the root is "prospect" but the response shows "Prospect".

Aubin Mahé
2 Nov 2013, 6:28 AM
It's a typo in my question, not in actual JSON transferred as shown by following PHP code:

<?php
include_once 'db.php';

header( "Content-type: application/json; charset=utf-8" );

$id = @mysql_real_escape_string($_GET['id']);
$link = db_open();
$query = "SELECT name, value FROM Pairs WHERE id = '$id'";
$result = @mysql_query( $query, $link );
$pairs = array();
if( $result ) {
while( $row = mysql_fetch_assoc( $result )) {
$item = Array();
$item['id' ] = $row['name' ];
$item['value'] = $row['value'];
$pairs[] = $item;
}
}
$response = array( 'prospect' => $pairs );
print json_encode( $response );
@mysql_free_result( $result );
@mysql_close( $link );
?>

Aubin Mahé
3 Nov 2013, 9:26 AM
The first mistake is relative to name mapping : the pair is {'id', 'value'} and NOT {'name', value'}
The second is relative to the store id : even if storeId : 'prospect-store' is declared into the store, its identifier becomes the name of its class because it's instantiated by a controller (see documentation for a full description of this bug).

The corrected view is :
Ext.define( 'LFinanceCRM.view.RawDataView', {
extend : 'Ext.grid.Panel',
alias : 'widget.raw-data-view',
autoScroll : true,
title : 'Données brutes',
columnLines : true,
viewConfig : { stripeRows : true },
store : 'Prospect',
columns : [{
text : 'Nom',
dataIndex : 'id',
sortable : false,
width : '29%'
},{
text : 'Valeur',
dataIndex : 'value',
sortable : true,
width : '70%'
}],
constructor : function() {
this.callParent( arguments );
console.log('new ' + this.self.getName());
}
});

And it works!