用json和servlet extjs4问题填充网格

时间:2012-08-04 16:29:46

标签: json servlets post extjs4

嗨我需要在网格中显示数据,使用servlet并在POST中将数据传递给servlet,服务器向extjs发送一个有效的Json,但gridd保持为空,这是我的代码:

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 个答案:

答案 0 :(得分:1)

您的代理的读者将数据根定义为selections

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

虽然你的json没有这样的节点,但它改为results

将根目录更改为results,它应该可以正常工作。