2010-10-15 48 views
1

我正在将extJS与Grails集成。将ExtJS与Grails集成时没有输出

下面是我的music.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   
} 

我在调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> 

当动作被调用时,我得到了下面的输出。看起来控制器根本不会到达list.gsp。

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

你能告诉我我在做什么错吗?

谢谢!

回答

1

好吧,我把你的代码去,但有几个问题:

你需要一个动作渲染GSP,另一个呈现JSON例如

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 
    } 

,然后在网格设置:

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

也有在你的JS导入一个错字(你的文件被称为调grid.js但你的GSP正在寻找测试网。 。JS

我也不得不解决您的列设置(你需要把playerId引号):

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

最后,我有得到在正确的地方ExtJS的文件和资源,其中包括:

<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> 

欢呼

+0

修正了....我傻....编辑QN太... ... Bt仍然在同一个地方......想法? – MAlex 2010-10-15 07:12:33

+0

更新了我的答案... – leebutts 2010-10-15 07:15:40

+0

Amazin ....这工作李....非常感谢帮助 – MAlex 2010-10-15 07:57:45