2010-12-14 42 views
1

Je n'arrive pas à rendre mon dojo EnhancedGrid modifiable. Actuellement, je peux double-cliquer sur les cellules de la grille et je peux changer la valeur, mais au moment où j'appuie de nouveau sur Entrée ou essaye de quitter les cellules (ie enregistrer la nouvelle valeur dans la grille) "erreur dans mon firebug.Problème modifiable Dojo EnhancedGrid

Ci-dessous mon code source:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
    <style type="text/css"> 
     body, html { font-family:helvetica,arial,sans-serif; font-size:90%; } 
    </style> 
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css" /> 
    <style type="text/css"> 
     @import "http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojox/grid/resources/Grid.css"; 
     @import "http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojox/grid/resources/claroGrid.css"; 
     .dojoxGrid table { margin: 0; } 
    </style> 
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" djConfig="parseOnLoad: true"> 
    </script> 

    <script type="text/javascript"> 
     dojo.require("dojox.grid.EnhancedGrid"); 
     dojo.require("dojo.data.ItemFileWriteStore"); 
     dojo.require("dojox.grid.cells._base"); 

     dojo.addOnLoad(function() { 

      var layoutabc = 
      [[ 
       { 
        field: "title", 
        name: "TitleofMovie", 
        width: "300px", 
        editable: true 
       }, 
       { 
        field: "year", 
        name: "Year", 
        width: "200px", 
        editable: true 
       }, 
       { 
        field: "producer", 
        name: "Producer", 
        width: "auto", 
        editable: true, 
        type: dojox.grid.cells.Cell 
       } 
      ]]; 


      var mystore = new dojo.data.ItemFileWriteStore({ 
       url: "movies.json" 
      }); 

      // create a new grid: 
      var grid = new dojox.grid.EnhancedGrid(
       { 
        query: {}, 
        store: mystore, 
        structure: layoutabc 
       }, 
       document.createElement("div") 
      ); 
      dojo.byId("gridDiv").appendChild(grid.domNode); 

      grid.startup(); 
     }); 
    </script> 
</head> 

<body class="claro"> 
    <div id="gridDiv" style="width: 800px; height: 400px;"> 
    </div> 
</body> 

Et ceci est le contenu de mon movies.json (le contenu des données est bizarre, je sais):

{ 
    items: 
    [ 
     { 
      title: "Africa", 
      year: "continent", 
      producer: "Katia Lund" 
     }, 
     { 
      title: "Kenya", 
      year: "country", 
      producer: "Christine Jeffs" 
     }, 
     { 
      title: "Mombasa", 
      year: "city", 
      producer: "Ridley Scott" 
     } 
    ] 
} 
+0

Informations supplémentaires: Si j'ai changé pour utiliser DataGrid au lieu de EnhancedGrid, alors le tout fonctionne ... – Hery

+0

comment vous avez résolu? J'ai plugin mis à "{nestedSorting: true}" et ajouter à mon code (dans le but d'ajouter) cette partie var gPlugins = "{nestedSorting: true}"; grid.plugins = gPlugins; mais rien ne change; lorsque je rafraîchis la table, n'ajoutez pas la ligne. –

+0

@francesco: J'ai transmis l'attribut 'plugins' dans le constructeur de EnhancedGrid lui-même. Bien que je doute que cela fasse une différence, vous devriez l'essayer. Si cela ne résout pas votre problème, vous devriez poser une nouvelle question car cette question a été posée il y a quelque temps et la version de dojo que vous avez utilisée peut être différente maintenant. – Hery

Répondre

1

Problème résolu. Il s'avère que j'ai besoin de définir l'attribut "plugins" pour l'objet EnhancedGrid même si c'est juste un objet vide. Une fois que cela est défini, cela fonctionne correctement.

0

Je pense que le problème est que votre magasin ne contient aucun identifiant, donc quand la grille essaye d'écrire dans le magasin, il n'a aucun moyen de savoir à quelle entrée il devrait écrire.

Je commencerais en éditant la réponse pour movies.json, peut-être comme ceci:

{ 
    identifier:"id", 
    items: 
    [ 
     { 
      id:1 
      title: "Africa", 
      year: "continent", 
      producer: "Katia Lund" 
     }, 
     { 
      id:2 
      title: "Kenya", 
      year: "country", 
      producer: "Christine Jeffs" 
     }, 
     { 
      id:3 
      title: "Mombasa", 
      year: "city", 
      producer: "Ridley Scott" 
     } 
    ] 
} 

Notez que vous ne devez pas inclure le champ id dans la liste de mise en page, il sera accessible au grille quand même. En outre, comme l'indique l'identificateur, il doit s'agir d'une valeur unique pour chaque élément du magasin, sinon il échouera à s'initialiser.

+0

Essayé cela, il ne fonctionne toujours pas :( Essayé d'ajouter l'étiquette ainsi, ne fonctionne pas aussi bien :( – Hery