Нет выхода при интеграции ExtJS с Grails - PullRequest
Новая
       2

Нет выхода при интеграции ExtJS с Grails

1 голос
/ 15 октября 2010

Я нахожусь в процессе интеграции extJS с Grails.

Ниже приведен список действий в моей музыке. TunController.

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           
}

Мой код в tune-grid.js 

/*
 * Ext JS Library 2.0 Beta 1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * licensing@extjs.com
 *
 * 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 Ответ

1 голос
/ 15 октября 2010

Хорошо, я получил ваш код, но есть несколько проблем:

Вам нужно одно действие для рендеринга 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 (ваш файл назывался tune-grid.js, но ваш GSP ищет test-grid.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>

ура

Lee

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...