dojo & snippets

Dies ist das Archiv des ehemaligen Forums zum Thema Groovy, Grails, Griffon und Bean Scripting Framework, welches unter groovy-forum.de existierte. Die neue Adresse des Groovy-Forums ist: http://codekicker.de/fragen/themen/groovy.

dojo & snippets

jaquesgelee - 17.08.2008 10:49

Servus Community,

ich habe mal ein kleines Problem welches mich einfach nicht los lässt. Vielleicht habt ihr ja eine Idee wie man es in den Griff bekommt.
Ich arbeite sehr viel mit AJAX und snippets (_xxx.gsp)
In meiner Application werden eigentlich immer nur verschiedene Bereiche neu geladen und nie die ganze Seite. Da TopMenu wird nur einmal am Anfang geladen.
Das klappt bisher auch echt gut.
Nun würde ich sehr gerne ein Grid von DOJO verwenden und habe ein wenig damit herum experimentiert.
Folgende Seite habe ich als *.gsp erstellt

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[www.w3.org];
<html>
<head>
        <title>Test dojox.Grid Basic</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
        <style type="text/css">
        @import "[o.aolcdn.com];;
        @import "[o.aolcdn.com];;
        @import "[o.aolcdn.com];
                body {
                        font-size: 0.9em;
                        font-family: Geneva, Arial, Helvetica, sans-serif;
                }
                .heading {
                        font-weight: bold;
                        padding-bottom: 0.25em;
                }
                               
                #grid {
                        border: 1px solid #333;
                        width: 35em;
                        height: 30em;
                }
        </style>
        <script type="text/javascript" src="[o.aolcdn.com];
                djConfig="isDebug:false, parseOnLoad: true"></script>
        <script type="text/javascript">
            dojo.require("dojo.data.ItemFileReadStore");
                dojo.require("dojox.grid.Grid");
                dojo.require("dojox.grid._data.model");
                dojo.require("dojo.parser");
       
                // a grid view is a group of columns. 
                var view1 = {
                        cells: [[
                                {name: 'ID', field: "id"},
                         
                          ],
                         
                        ]
                };
                // a grid layout is an array of views.
                var layout = [ view1 ];
</script>
</head>
<body class="tundra">
<div class="heading">Our First Grid</div>
        <div dojoType="dojo.data.ItemFileReadStore"
                jsId="jsonStore" url="<g:createLink action="dojoData"></g:createLink>"
        </div>
        <div dojoType="dojox.grid.data.DojoData" jsId="model"
                rowsPerPage="20" store="jsonStore" query="{ id: '*' }">
        </div>
        <div id="grid" dojoType="dojox.Grid" model="model" structure="layout"></div>
</body>
</html>

aufgerufen wird diese durch folgende Action:

    def dojo = {		
    }

Der dojo.data.ItemFileReadStore bekommt bei Aufruf der Seite seine Daten von folgender Action

def dojoData = {
    		def saulen = Saeule.list();
    		render saulen as JSON
    }

Dieses Konstrukt funktioniert auch wunderbar.

Nun möchte ich das ganze als Snippet verwirklichen...

Dazu habe ich folgendes Snippet gebaut
_dojo.gsp

<div dojoType="dojo.data.ItemFileReadStore" jsId="jsonStore" url="
	<g:createLink action="dojoData"></g:createLink>
	"
</div>
<div dojoType="dojox.grid.data.DojoData" jsId="model" rowsPerPage="20"
	store="jsonStore" query="{ id: '*' }">
</div>
<div id="grid" dojoType="dojox.Grid" model="model" structure="layout"></div>

Folgende Action übernimmt das rendern

    def dojoDatasnippet = {
    		render(template:"dojo")
    }

Die Daten bekommt das dojo.data.ItemFileReadStore aus der gleichen Action wie im vorherigen Beispiel.

Die notwendigen Bibliotheken habe ich in dem main.gsp hinterlegt in der das Snippet geladen wird.
ich poste sie einfach noch einmal.

<html id="all">
	<head>
		<title>
			<g:layoutTitle default="Grails" />
		</title>
		<link rel="stylesheet"
			href="${createLinkTo(dir:'css',file:'main.css')}" />
		<link rel="stylesheet"
			href="${createLinkTo(dir:'css',file:'dijit.css')}" />
		<link rel="shortcut icon"
			href="${createLinkTo(dir:'images',file:'favicon.ico')}"
			type="image/x-icon" />
			
		<g:javascript library="prototype" />
		<style type="text/css">
        @import "[o.aolcdn.com];;
        @import "[o.aolcdn.com];;
        @import "[o.aolcdn.com];
                body {
                        font-size: 0.9em;
                        font-family: Geneva, Arial, Helvetica, sans-serif;
                }
                .heading {
                        font-weight: bold;
                        padding-bottom: 0.25em;
                }
                               
                #grid {
                        border: 1px solid #333;
                        width: 35em;
                        height: 30em;
                }
        </style>
		<script type="text/javascript"
			src="[o.aolcdn.com];
			djConfig="isDebug:false, parseOnLoad: true">
		</script>
		<script type="text/javascript">
            dojo.require("dojo.data.ItemFileReadStore");
                dojo.require("dojox.grid.Grid");
                dojo.require("dojox.grid._data.model");
                dojo.require("dojo.parser");
       
                // a grid view is a group of columns. 
                var view1 = {
                        cells: [[
                                {name: 'Namespace', field: "namespace"},
                                {name: 'Class', width: "25em", field: "className"}
                          ],
                          [
                                {name: 'Summary', colSpan:"2", field: "summary"}
                          ]
                        ]
                };
                // a grid layout is an array of views.
                var layout = [ view1 ];
		</script>
		<g:layoutHead />
	</head>
	<body>
		<div id="spinner" class="spinner" style="display:none;">
			<img src="${createLinkTo(dir:'images',file:'spinner.gif')}"
				alt="Spinner" />
		</div>
		<div class="logo">
			<img
				src="${createLinkTo(dir:'images',file:'grails_logo.jpg')}"
				alt="Grails" />
		</div>
		<div>
			<g:remoteLink action="dojoDatasnippet" controller="saeule" update="all">Test 1</g:remoteLink>	
		</div>
		<g:layoutBody />
		<div id="content">
		</div>
	</body>
</html>

Problem an der Sache mit dem Snippet ist das es einfach nicht funktionieren will. Ich bekomme immer nur einen leeren Kasten angezeigt in dem eigentlich mein Grid sein sollte. Jetzt kenn ich mich leiedr nicht besonders gut mit javascript aus und stocher die ganze Zeit im Dunkeln. Wahrscheinlich ist es etwas relativ elementares... Meine Vermutung geht dahin... Im Header der main.gsp Seite steht das Model für den Grid

                var view1 = {
                        cells: [[
                                {name: 'Namespace', field: "namespace"},
                                {name: 'Class', width: "25em", field: "className"}
                          ],
                          [
                                {name: 'Summary', colSpan:"2", field: "summary"}
                          ]
                        ]
                };
                // a grid layout is an array of views.
                var layout = [ view1 ];

Da der Header ja nicht mitgeladen wird (nur das div id="content" wird neu geladen) kann meine Grid das layout nicht finden...
Ist allerdings nur eine Vermutung... Ich habe keine Ahnung wie ich das verwirklichen soll...

Bin für Angregungen offen :-)

Stelle deine Groovy-Frage jetzt!

Diese Seite zeigt den Thread "dojo & snippets" der ehemaligen Webseite groovy-forum.de, welche durch einen Serverunfall zerstört wurde. codekicker.de hat viele Konversationen über die beliebte Programmiersprache Groovy und zugehörige Frameworks wie das Grails-Framework retten können.

Hast Du eine Frage zum Thema Groovy, Grails oder allgemein Java? Viele ehemalige groovy-forum.de Mitglieder beantworten dir auf codekicker.de deine Frage! Stelle jetzt eine Frage!

Viele weitere Diskussionen zu Grails und Groovy befinden sich auf der Threadübersicht des alten groovy-forum.de.

Kontakt, Impressum, Lizenz, AGB