Newsgroup: it.comp.lang.javascript
Titolo: GridPanel in Ext Js

Salve a tutti, sto sperimentando da poco il framework Ext e spero possiate 
aiutarmi a risolvere un piccolo problema:
Ho un formPanel che viene inviato ad una pagina .php la quale genera un 
responso in Json del tipo:
{ success: true, data: 
[{"ID_UTN":"1","NOME_UTN":"pippo","PWD_UTN":"pippo","EMAIL_UTN":
pi...@freemail.it
}]};
questo responso viene gestito correttamente dal formPanel in questione 
tramite l'oggetto action.result.
Il problema consiste nel fatto che non riesco ad inserire i dati contenuti 
nel responso all'interno di un GridPanel.
Ho provato in questo modo (quando invio il formPanel vado a prelevare il 
responso tramite l'evento success del formPanel stesso):
success: function(form, action)
{
    //L'oggetto action.result è correttamente creato
    //The Store
    var store = new Ext.data.JsonStore
    ({
        reader : new Ext.data.JsonReader({ root: "data", id: ID_UTN"  }, 
action.result),
        fields: ["NOME_UTN", "EMAIL_UTN"]
     });
     //The Grid
    var grid = new Ext.grid.GridPanel
    ({
        title: "Risultato ricerca",
        renderTo: "MyDiv",
        store: store,
        columns:
        [
            { header: "Nome utente", width: 75, sortable: true, dataIndex: 
"NOME_UTN" },
            { header: "E-mail", width: 75, sortable: true, dataIndex: 
"EMAIL_UTN" }
        ]
    });
}
Il GridPanel viene creato senza errori ma non viene effettuato il bind dei 
dati nè sono visibili le intestazioni di colonna.
Ho proprio sbagliato approccio nel caricare i dati oppure ho tralasciato 
qualcosa?
Grazie.

Ciao.
Innanzi tutto mancano le virgolette iniziali in id: ID_UTN" nel 
costruttore del JsonReader e nel valore del campo EMAIL_UTN dell'oggetto 
JSON restituito.
L'errore comunque è nel JsonReader che come secondo parametro vuole un 
oggetto di tipo Record, inoltre JsonStore ha già integrato il JsonReader 
quindi non vedo l'utilità di ricrearlo.
Prova così:
var store = new Ext.data.JsonStore({
   fields: ["NOME_UTN", "EMAIL_UTN"],
   root: "data",
   data: action.result
});
Dovrebbe funzionare.
Ciao.

"wire" <ti.edartaidem@eriw> ha scritto nel messaggio 
news:T6Bkk.9820$0N....@tornado.fastwebnet.it...

Sì hai ragione ho rilevato subito quell'errore, il problema è che io creo 
prima gli oggetti store, pagingToolbar e GridPanel e solo successivamente, 
ovvero al'invio del form, eseguo il bind del responso json all'oggetto 
store. Non posso quindi impostare il parametro data del store subito...
Funziona tutto tranne il paging, infatti il grid viene popolato 
correttamente ma non vengono suddivise le pagine.
Questo è il codice di tutta la pagina:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html xmlns="
http://www.w3.org/1999/xhtml
">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>
<script type="text/javascript" language="javascript">
 Ext.onReady(function()
 {
  //The store
  var store = new Ext.data.JsonStore
  ({
   fields: ["ID_UTN", "NOME_UTN", "EMAIL_UTN"],
   baseParams: { start: 0, limit: 25 } //Ho provato qui ad inserire i limiti 
di pagina ma niente!!
  });
  //The paging toolbar
  var paging = new Ext.PagingToolbar
  ({
   pageSize: 25,
   store: store,
   displayInfo: true,
   displayMsg: "Record {0} - {1} di {2}",
   emptyMsg: "Nessun risultato"
  });
  paging.beforePageText = "Pagina";
  paging.afterPageText = "di {0}";
  paging.firstText = "Prima pagina";
  paging.lastText  = "Ultima pagina";
  paging.prevText   = "Pagina precedente";
  paging.nextText  = "Prossima pagina";
     //The Grid
  var grid = new Ext.grid.GridPanel
  ({
   bodyStyle: "text-align:left",
   collapsed: true,
   height: 370,
   viewConfig: { forceFit: true },
   store: store,
   columns:
   [
    new Ext.grid.RowNumberer(),
    { header: "Id utente", sortable: true, dataIndex: "ID_UTN", hidden: 
true },
    { header: "Nome utente", sortable: true, dataIndex: "NOME_UTN" },
    { header: "E-mail", sortable: true, dataIndex: "EMAIL_UTN" }
   ],
   selModel: new Ext.grid.RowSelectionModel
   ({
    singleSelect: true,
    listeners:
    {
     rowselect: function(sm, row, rec)
     {
      //alert(rec.get("ID_UTN"));
      loadTab("Modifica utente ("+rec.get("NOME_UTN")+")", 
"tab_utenti_sch_"+rec.get("ID_UTN"), 
"utenti_mod.html?idUtn="+rec.get("ID_UTN"));
     }
    }
   }),
   bbar: paging
  });
  //The form
  var form = new Ext.FormPanel
  ({
   id: "form",
         frame: true,
   labelAlign : "top",
   bodyStyle: "text-align:left",
         items:
   [
    {
              layout: "column",
              items:
     [
      {
                   columnWidth:.5,
                   layout: "form",
       defaults: { anchor:"100%" },
       bodyStyle: "padding:3px",
                   items:
       [
        {
                        xtype: "textfield",
                        fieldLabel: "Nome utente",
         name: "txtNomeUtn"
                    }
       ]
               },
      {
                   columnWidth:.5,
                   layout: "form",
       defaults: { anchor:"100%" },
       bodyStyle: "padding:3px",
                   items:
       [
        {
                        xtype: "textfield",
                        fieldLabel: "E-mail utente",
         name: "txtEmailUtn"
                    }
       ]
               }
     ]
          }
   ],
   buttons:
   [
    {
     text: "Cerca",
     handler: function()
     {
      Ext.getCmp("form").getForm().submit
      ({
       url: "utenti.php?cmd=sch",
       waitMsg: "Ricerca in corso...",
       waitTitle: "Attendere...",
       success: function(form, action)
       {
        //Qui eseguo il bind ma carica tutti i dati senza impaginare
        //Tra l'altro nel paging sono descritti correttamente i numeri di 
pagina, tipo pagina 1 di 3 ??!!
        store.loadData(action.result.data);
        grid.expand(false);
       }
      });
     }
    },
    {
     text: "Cancella",
     type: "reset",
     handler: function()
     {
      Ext.getCmp("form").getForm().reset();
     }
    }
   ]
  });
  //The main panel
   var panel = new Ext.Panel
   ({
   renderTo: "div_utenti_sch",
   title: "Cerca utente",
   frame: true,
   width: 550,
   items: [ form, grid ]
  });
 });
</script>
</head>
<body>
 <div id="div_utenti_sch"></div>
</body>
</html>