2012-08-04 69 views
0

您好我需要在網格中顯示數據,使用servlet並將數據傳遞給POST中的servlet,服務器發送回extjs有效的Json,但gridd保持空,這是我的代碼:使用json和servlet填充網格extjs4問題

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 
}],  


}); 
}); 

,這是由servlet產生的JSON:

{ 
    "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" 
     } 
    ] 
} 

我新的ExtJS的,所以我不知道我做錯了,你能指出我的錯誤?提前致謝。

回答

1

您代理的讀者數據根定義爲selections

reader: 
    { 
     type: 'json', 
     root: 'selections', 
     successProperty: 'success' 
    }, 

而你的JSON沒有這樣的節點,它有results代替。

更改根目錄爲results它應該工作。