populating grid with json and servlet extjs4 issue - json

Question

Hi I need to display data in a grid, using a servlet and passing data to the servlet in POST, the server send back to extjs a valid Json but the gridd remain empty, this is my code:
Ext.onReady(function() {
//Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);
//added model inside onready
Ext.define('PvInfo', {
extend: 'Ext.data.Model',
fields: ['potenziale','fax','cliente','titolare','pv_id','mail','sito','cod_mmas', 'ragione_sociale', 'indirizzo', 'cap','comune','provincia','telefono','codice_fiscale']
});
//separated store into unique var for guaranteeRange
var store = Ext.create('Ext.data.Store', {
pageSize: 50,
model: 'PvInfo',
autoLoad: true,
listeners :
{
load : function(store)
{
Ext.getCmp('numRow').setText("Numero Anagrafiche: "+store.getCount());
console.debug("store");
console.debug(store);
}
},
proxy: {
idProperty: 'pv_id',
type: 'ajax',
url: 'http://localhost:8080/MyFirstServlet/GreetingServlet',
reader:
{
type: 'json',
root: 'selections',
successProperty: 'success'
},
actionMethods: {
create: 'POST', read: 'POST', update: 'POST', destroy: 'POST'
},
extraParams: {selections:selection_string, task: 'pv_list'}
}
});
console.debug(store);
//funzione per recuperare i parametri get
//create the grid
var grid = Ext.create('Ext.grid.Panel', {
// height: 450,
// width: 700,
layout:'fit',
title: 'Elenco Anagrafiche ',
store: store,
emptyText:'nessun record presente',
columns: [
{dataIndex:'pv_id',
flex:1.1,
text:"id",
hidden:true
},
{
dataIndex: 'cod_mmas',
flex: 1,
text: 'codice MMAS'
},
{
dataIndex:'potenziale',
flex: 1.5,
text:'potenziale mmas'
},
{
dataIndex: 'ragione_sociale',
flex: 2.5,
text: 'Ragione Sociale'
}, {
dataIndex: 'indirizzo',
flex: 3,
text: 'Indirizzo'
}, {
dataIndex: 'cap',
flex: 1.3,
text: 'Cap'
},{
dataIndex: 'comune',
flex:1.3,
text: 'Comune'
},{
dataIndex:'provincia',
flex:1.1,
text:'Provincia'
},{
dataIndex:'telefono',
flex:1.1,
text:'Telefono'
},{
dataIndex:'codice_fiscale',
flex:1.1,
text: 'Codice Fiscale/Partita IVA'
},
{
dataIndex:'titolare',
flex:1,
text:'Titolare',
hidden:true
},
{
dataIndex:'fax',
flex:1,
text:'Fax',
hidden:true
},
{
dataIndex:'cliente',
flex:0.3,
text:'cliente',
hidden:true
}
//'codice mmas', 'ragione sociale', 'indirizzo', 'cap','comune','provincia','telefono','cf/piva'
],
// toolbar
tbar: {
items: [{
xtype: 'label',
x:100,
id:'numRow',
text: 'Numero Anagrafiche:'
}
]
}
,
listeners:
{
itemdblclick: function(dv, record, item, index, e)
{ console.log(record);
//alert('working'+record.data.pv_id);
menuContext.showAt(e.xy);
},
itemclick: function(view, record, item, index, e, options)
{
menuContext.showAt(e.xy);
}
},
renderTo: Ext.getBody()
});
menuContext = new Ext.menu.Menu({
items: [{
id: 'do-something',
text: 'Visualizza anagrafica',
handler: function()
{
var selection = grid.getView().getSelectionModel().getSelection()[0];
console.log("selection.data");
console.debug(selection.data);
var f= Ext.create('Ext.form.Panel',
{
frame: true,
width: 640,
bodyPadding: 5,
//renderTo: 'form-example',
fieldDefaults:
{
labelAlign: 'left',
labelWidth: 90,
anchor: '100%'
},
items:
[
{
xtype: 'hiddenfield', //1
name: 'id',
},
{
xtype: 'displayfield', //2
name: 'codice_mmas',
fieldLabel: 'Codice MMAS',
value: selection.data.cod_mmas
},
{
xtype: 'textfield', //3
name: 'cod_cliente',
fieldLabel: 'Codice Cliente',
},
{
xtype: 'textfield', //4
name: 'ragione_sociale',
fieldLabel: 'Ragione Sociale',
value:selection.data.ragione_sociale
},
{
xtype: 'textfield', //5
name: 'titolare',
fieldLabel: 'Titolare',
value: selection.data.titolare
},
{
xtype: 'textfield', //8
name: 'codice_fiscale',
fieldLabel: 'Cod. Fis./P. IVA',
value: selection.data.codice_fiscale
},
{xtype:'textfield',
name:'potenziale_mmas',
fieldLabel:"Potenziale MMAS",
value: selection.data.potenziale
},
{
xtype: 'checkboxfield', //11
name: 'cliente',
fieldLabel: 'cliente',
//boxLabel: 'box label'
value: selection.data.cliente
},
{
xtype:'textfield',
name:'indirizzo',
fieldLabel:'indirizzo',
value:selection.data.indirizzo},
{xtype:'textfield',
name:'mail',
fieldLabel:'mail',
value:selection.data.mail
},
{
xtype: 'textfield', //12
name: 'provincia',
fieldLabel: 'Provincia',
value:selection.data.provincia
},
{
xtype: 'textfield', //13
name: 'comune',
fieldLabel: 'comune',
value: selection.data.comune
},
{
xtype: 'textfield', //14
fieldLabel: 'cap',
name:'cap',
value:selection.data.cap
},
{
xtype:'textfield',
fieldLabel:'telefono',
name:'telefono',
value: selection.data.telefono
},
{
xtype: 'textfield', //15
fieldLabel: 'fax',
name:'fax',
value:selection.data.fax
},
{
xtype:'textfield',
fieldLabel:'sito',
name:'sito',
value:selection.data.sito
}
]
});
var w = new Ext.Window(
{
height: 470, width: 650,
title:"scheda Anagrafica di "+selection.data.ragione_sociale,
items:[f]
});
w.show();
w.center();
}//end function di handler
}],
});
});
this is the json produced by the servlet:
{
"results":[
{
"potenziale":"59",
"cap":"11100",
"indirizzo":"x",
"pv_id":"35",
"telefono":"x",
"provincia":"AO",
"ragione_sociale":"x",
"cod_mmas":"35",
"cliente":"0",
"titolare":"x",
"comune":"AOSTA"
},
{
"potenziale":"26",
"cap":"11100",
"indirizzo":"x",
"pv_id":"50",
"telefono":"016532590",
"provincia":"AO",
"ragione_sociale":"x",
"cod_mmas":"50",
"cliente":"0",
"titolare":"x",
"comune":"AOSTA"
},
{
"potenziale":"68.75",
"cap":"11100",
"indirizzo":"x",
"pv_id":"56",
"telefono":"x",
"provincia":"AO",
"ragione_sociale":"x",
"cod_mmas":"56",
"codice_fiscale":"x",
"cliente":"0",
"titolare":"x",
"comune":"AOSTA"
},
{
"potenziale":"39",
"cap":"11100",
"indirizzo":"x68",
"pv_id":"63",
"telefono":"x",
"provincia":"AO",
"ragione_sociale":"xSRL",
"cod_mmas":"63",
"cliente":"0",
"titolare":"x",
"comune":"AOSTA"
},
{
"potenziale":"26",
"cap":"11027",
"indirizzo":"x",
"pv_id":"68",
"telefono":"x",
"provincia":"AO",
"ragione_sociale":"xPATRIZIA",
"cod_mmas":"68",
"cliente":"0",
"titolare":"xPATRIZIA",
"comune":"SAINT VINCENT"
},
{
"potenziale":"42",
"cap":"11013",
"indirizzo":"x 75",
"pv_id":"2819",
"telefono":"x",
"provincia":"AO",
"ragione_sociale":"x",
"cod_mmas":"2819",
"codice_fiscale":"x3",
"cliente":"0",
"titolare":"x",
"comune":"COURMAYEUR"
},
{
"potenziale":"valore non disponibile",
"cap":"11020",
"indirizzo":"LOC.LA PLACE,23",
"pv_id":"3427",
"telefono":"x",
"provincia":"AO",
"ragione_sociale":"x",
"cod_mmas":"3427",
"codice_fiscale":"x",
"cliente":"0",
"comune":"ISSOGNE"
},
{
"potenziale":"valore non disponibile",
"cap":"11026",
"indirizzo":"x2",
"pv_id":"3994",
"telefono":"x",
"provincia":"AO",
"ragione_sociale":"x",
"cod_mmas":"3994",
"codice_fiscale":"x",
"cliente":"0",
"comune":"x"
}
]
}
I am new to extjs so I do not know what I am doing wrong,can you indicate my mistake? thanks in advance.

Answer 1

You proxy's reader defines the data root as selections:
reader:
{
type: 'json',
root: 'selections',
successProperty: 'success'
},
Whereas your json doesn't have such node, it has results instead.
Change the root to results and it should work.