Pas de sortie lors de l'intégration de ExtJS avec Grails

Ci-dessous est ma liste d'action dans ma musique.TuneController.

def list = { 
    def tuneInstanceList = new ArrayList<Tune>() 
    def tune= new Tune(); 
    tune.playerId = "ASDF"; 
    tune.playerPrice= "100"; 
    tuneInstanceList.add(tune);      
    def listResult = [ total: tuneInstanceList.size(), items: tuneInstanceList] 
    render listResult as JSON   
}

Mon code tune-grid.js

/* 
* Ext JS Library 2.0 Beta 1 
* Copyright(c) 2006-2007, Ext JS, LLC. 
* [email protected] 
* 
* http://extjs.com/license 
*/ 

Ext.onReady(function(){ 

    // create the Data Store 
    var ds = new Ext.data.Store({ 
     autoLoad: true, 
     proxy: new Ext.data.HttpProxy({ 
     url: 'http://localhost:8080/music'}), 
     reader: new Ext.data.JsonReader({ 
     results: 'total', 
     root:'items', 
     id:'id' 
     }, 
     [ 
       {name: 'playerId' }, 
       {name: 'playerPrice'}    
      ] 
     ) 
    }); 

    var cm = new Ext.grid.ColumnModel([ 
     {header: "Player Id", width: 120, dataIndex: playerId }, 
     {header: "Player Price", width: 180, dataIndex: 'playerPrice'} 
    ]); 
    cm.defaultSortable = true; 

    // create the grid 
    var grid = new Ext.grid.GridPanel({ 
     ds: ds, 
     cm: cm, 
     renderTo:'grid-example', 
     width:540, 
     height:200 
    }); 
});

list.gsp:

<%@ page import="music.Tune"%> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <meta name="layout" content="test" /> 
     <g:set var="entityName" value="${message(code: 'song.label', default: 'Song')}" /> 
     <title><g:message code="default.list.label" args="[entityName]" /></title> 
      <g:javascript library="tune-grid"/> 
    </head> 
    <body> 

     <div class="body"> 
     <!--<g:javascript library="examples"/>--> 
     <!-- EXAMPLES --> 

     <div id="grid-example"></div> 


     </div> 

    </body> 
</html>

Lorsque l'action est appelée, je reçois le dessous comme sortie. Il semble que le contrôle ne parvient pas à la liste.gsp du tout.

{"total":1,"items":[{"class":"music.Tune","playerId":"ASDF", playerPrice":"100","playerDep":null}]}

Pourriez-vous me dire ce que je fais mal ici?

Merci!

Source

2010-10-15 MAlex

Ok, je suis votre code va, mais il y a quelques problèmes:

Vous avez besoin d'une action pour rendre le GSP, un autre pour rendre le JSON par exemple

def list = { 

    } 

    def listData = { 
    def tuneInstanceList = new ArrayList<Tune>() 
    def tune = new Tune(); 
    tune.playerId = "ASDF"; 
    tune.playerPrice = "100"; 
    tuneInstanceList.add(tune); 
    def listResult = [total: tuneInstanceList.size(), items: tuneInstanceList] 
    render listResult as JSON 
    }

puis dans la configuration de votre réseau:

var ds = new Ext.data.Store({ 
     autoLoad: true, 
     proxy: new Ext.data.HttpProxy({ 
      url: 'http://localhost:8080/music/tune/listData'}), 
<snip>

il y a aussi une faute de frappe dans votre importation de JS (votre fichier a été appelé tune-grid.js mais votre GSP recherche-grille de test. . js

Je devais aussi corriger la configuration de votre colonne (vous devez mettre playerId guillemets):

var cm = new Ext.grid.ColumnModel([ 
     {header: "Player Id", width: 120, dataIndex: 'playerId' }, 
     {header: "Player Price", width: 180, dataIndex: 'playerPrice'} 
    ]);

Enfin, j'avais pour obtenir les fichiers ExtJS et les ressources au bon endroit et les a inclus:

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  
    <g:javascript src="adapter/ext/ext-base.js"/> 
    <g:javascript src="ext-all.js"/> 
    <g:javascript src="test-grid.js"/> 
    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" /> 
</head>

acclamations

Lee

Source

2010-10-15 06:53:45 leebutts

corrigé que .... stupide me .... édité QN aussi ... ... Bt encore je suis au même endroit ... Pensées? – MAlex

Mis à jour ma réponse ... – leebutts

Amazin .... Cela a fonctionné Lee .... Merci beaucoup pour l'aide – MAlex

Pas de sortie lors de l'intégration de ExtJS avec Grails

Répondre

Questions connexes