PDA

View Full Version : extjs grid + json+ webscript



marcuzzo86
11 Aug 2009, 7:04 AM
hi guys i have a question for you.
i'm trying to retrieve data from alfresco via webscript and then put it in a ExtJS grid.
my webscript work fine, these are :
- descriptor file:

<webscript>
<shortname>prova</shortname>
<description>Lists all documents with type: FATTURA ATTIVA</description>
<url>/marco/search</url>
<format default="json">extension</format>
<authentication>user</authentication>
<transaction>required</transaction>
</webscript>- free marker template file:

<#escape x as jsonUtils.encodeJSONString(x)>
{
"total": ${total},
"rows": [
<#list nodes as document>
{"id": "${document.nodeRef}", "name": "${document.name}"}<#if document_has_next>,</#if>
</#list>
]
}
</#escape>-and javascript file:

var type='TYPE:"{http://www.marco.com/model/content/1.0}fatt_a"';
nodes = search.luceneSearch(type);

var start = 0;
var limit = 100;

if (args.start != undefined) {
start = args.start;
}

if (args.limit != undefined) {
limit = args.limit;
}

pagedResults = new Array();
for (i=0; i < nodes.length && i < limit; i++ ) {
var node = nodes[(+start + i)];
if (node != undefined) {
pagedResults.push(node);
}
}

model.nodes = pagedResults;
model.total = nodes.length;how can you see it is a very simple webscript that return a list of document.
the view files are these:

-the javascript file that ask alfresco and then create the grid:


Ext.onReady(function() {
var record = Ext.data.Record.create([ //definisco la forma del record
{id: 'id', name: 'name'},
]);

var myReader = new Ext.data.JsonReader({
totalProperty: "total", // numero righe
root: "rows", // lista dei dati da esporre (label del file json)
idProperty: "id",
successProperty: true,

}, record);

var grid = new Ext.grid.GridPanel({
store: new Ext.data.Store({
// load using HTTP
proxy: new Ext.data.HttpProxy({url: 'http://localhost:8080/alfresco/service/marco/search'}), //effettuo al richiesta
reader: myReader //oggetto JSONreader
}),
columns: [
{header: 'ID', width: 120, sortable: true, dataIndex: 'id'},
{header: 'Name', width: 120, sortable: true, dataIndex: 'name'},
],
viewConfig: {
forceFit: true
},
renderTo: 'content',
title: 'mannaggia de la pulchiacchera!!!!',
width: 500,
height: 500,
frame: true
});

grid.getSelectionModel().selectFirstRow();
});
- and the html:

<html>
<head>
<title>Grid</title>

<!-- Include Ext and app-specific scripts: -->
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all-debug.js"></script>
<script type="text/javascript" src="griglia.js"></script>

<!-- Include Ext stylesheets here: -->
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="griglia.css">
</head>
<body>
<h1>Griglia dinamica</h1>
<div id="content">
</div>

</body>
</html>The html return an empty grid! what is the problem?????? thanks!

tryanDLS
11 Aug 2009, 7:10 AM
What have you debugged? Are you using Firebug? Have you read http://extjs.com/learn/Ext_FAQ_Grid

marcuzzo86
11 Aug 2009, 7:40 AM
yes i'm using firebug. The webscript work, it return the right JSON file with the right structure. The Grid is returned as i want, with the right labels and the right dimensions, but with no data. what can i do?!?

marcuzzo86
15 Aug 2009, 11:42 PM
debugging with firebug it return this (about the json reader object):

myReader
..
constructor
..
Error
prototype
..
lang
...
idProperty-undefined: "Your JsonReader was configured without an "idProperty" Please review your JsonReader configuration and ensure the "idProperty" is set (e.g.: "id"). See the JsonReader docs."
root-Empty: "Data was expected to be returned by the server in the "root" property of the response. Please review your JsonReader configuration to ensure the "root" property matches that returned in the server-response. See JsonReader docs.
root-undefined-config: "Your JsonReader was configured without a "root" property. Please review your JsonReader config and make sure to define the root property. See the JsonReader docs."
root-undefined-response: "Could not locate your "root" property in your server response. Please review your JsonReader config to ensure the config-property "root" matches the property your server- response. See the JsonReader docs."
successProperty-response: "Could not locate your "successProperty" in your server response. Please review your JsonReader config to ensure the config-property "successProperty" matches the property in your server-response. See the JsonReader docs."
.....
......

this is the error found by firebug, but i think that i correctly setup the properties above in my code. Someone can help me?

MasterP
19 Aug 2009, 2:01 AM
i have the same problem, this is what i tried:

A webscript on alfresco that return the following json file:



{
"total": 7,
"rows": [
{"id":"2e30c24e-3f16-4afd-ad89-dc58b5f88f8f", "name": "aaa"},
{"id":"7801d55e-9811-48fc-b3cb-d5f36101050a", "name": "yeh"},
{"id":"7815f475-0b22-4292-b9ff-49eff869eb7d", "name": "pippo"},
{"id":"9b7851a0-4dd2-4b12-894a-c9142c6bc4b0", "name": "piero"},
{"id":"2ffa6339-b479-4e81-be0e-6a2aeedd8048", "name": "yess"},
{"id":"4c40c974-2fe1-4e35-a4f6-4afbbb48b1c9", "name": "yesszzz"},
{"id":"d5e9c255-239f-47cb-bee0-a29dadfb4104", "name": "ys"}
]
}
(it's validated fine on jslint.com)

my js file create a simple grid as following (with a jsonReader):


var myRecord = Ext.data.Record.create([
{name: 'id', name: 'name'},
]);


myReader = new Ext.data.JsonReader({
totalProperty: 'total',
root: 'rows',
idProperty: 'id',
successProperty: function() {
Ext.Msg.alert('Status', 'all right');
},
},myRecord);

myProxy = new Ext.data.HttpProxy({url: 'http://localhost:8080/alfresco/service/myService/service'})


var myStore = new Ext.data.Store({
// load using HTTP
proxy: myProxy,
reader: myReader //oggetto JSONreader

});
myStore.load();

myStore.on({
'load':{
fn: function(store, records, options){
console.info('store load, arguments:', arguments);
console.info('Store count = ', store.getCount());
},
scope:this
},
'loadexception':{
fn: function(obj, options, response, e){
console.info('store loadexception, arguments:', arguments);
console.info('error = ', e);
},
scope:this
}
});

myStore.load();

var myGrid = new Ext.grid.GridPanel({
store: myStore,
columns: [
{header: 'ID', width: 100, dataIndex: 'id'},
{header: 'Name', width: 100,dataIndex: 'name'},
],
viewConfig: {
forceFit: true
},
renderTo: 'my-div',
title: 'Simple Grid',
width: '100%',
height: 300,
frame: true
});Each time that i reload html page that call this js, "myStore.on" load everytime the underlined part of code above (only "loadexception" part).
Besides debugging with firebug i have marcuzzo's same error, like if json retuned is't decoded by jsonReader. thank in advance