How to display name/value pairs into a Ext.grid.Panel from a Ext.data.Store

Question

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 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 );
?>

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());
   }
});

I use the MVC pattern supported by Sencha app build tool, here is the controller:

Ext.define( 'LFinanceCRM.controller.Main', {
   extend    : 'Ext.app.Controller',
   id        : 'theController',
   onNonLuesSelectionChanged : function( panel, selected, eOpts ) {
      console.log('onNonLuesSelectionChanged: ' + selected[0].data.id );
      this.getStore('Prospect').load({
         id       : selected[0].data.id,
         callback : function( records, operation, success ) {
            var pairs = [];
            for( var i = 0; i < records.length; ++i ) {
               pairs.push( records[i].data );
            }
            Ext.ComponentQuery.query('client-view')[0].getForm().setValues( pairs );
            Ext.ComponentQuery.query('immo-view'  )[0].getForm().setValues( pairs );
        }
      });
   },
   onSavePairs : function() {
      console.log('onSavePairs');
   },
   ...
   onMail : function() {
      console.log('onMail');
   },
   ...
   stores : ['Prospect'],
   constructor : function(){
      this.callParent( arguments );
      console.log( 'new ' + this.self.getName());
      this.control({
         '#ProspectsTableNonLues'  : { selectionchange : this.onNonLuesSelectionChanged },
         ...
         '#savePairsButton'        : { click           : this.onSavePairs               },
         ...
         '#mail'                   : { click           : this.onMail                    },
});
   }
});

Nothing is displayed yet!

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

Answer 1

To avoid double request to the server and some other reasons, I prefer share the instance of the store betweens several views.

As pointed out by Prasad K, a mistake between name and id must be corrected.

As pointed in the documentation of Sencha Extjs4.2.2, when a store is instantiated by a controller, its id is the name of its class, even an id is set (bug?).

So the code becomes:

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!

Answer 2

Your LFinanceCRM.view.RawDataView config is not properly defined.

You should create an instance of Store to assign to the grid panel -

store       : Ext.data.StoreManager.lookup( 'prospect-store' ),

should be changed to

store       : Ext.create("LFinanceCRM.store.Prospect"),

Also in columns config, dataIndex should be "id" for the first column instead of "name"

        {
            text      : 'Nom',
            dataIndex : 'name',
            sortable  : false,
            width     : 200
        }

should be changed to

        {
            text      : 'Nom',
            dataIndex : 'id',
            sortable  : false,
            width     : 200
        }

Replace your LFinanceCRM.view.RawDataView code with this -

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       : Ext.create("LFinanceCRM.store.Prospect"),
        columns     : [{
            text      : 'Nom',
            dataIndex : 'id',
            sortable  : false,
            width     : 200
        },{
            text      : 'Valeur',
            dataIndex : 'value',
            sortable  : true,
            width     : 200
        }],
        constructor : function() {
            this.callParent( arguments );
            console.log('new ' + this.self.getName());
        }
    });