PDA

View Full Version : JsonView problem with Json string



ntulip
24 Sep 2007, 9:04 AM
This is a repost from the bugs forum. Can a moderator remove the old posting from:
http://extjs.com/forum/showthread.php?t=13545

I get a weird behaviour from the JsonView component and I am not sure if it's a bug or something which I am doing wrong.

Considering the following two string:



Non working string:
{"totalCount": 1,
"data":
{"ConfigId":"2","URL":"viewimage.aspx?imageid=43","imgtype":"application/octet-stream","imgsize":"3 KB","imgname":"symbol.gif","ImageID":"43"}
}

Working string:
{"totalCount": 2,
"data":
[
{"ConfigId":"1","URL":"viewimage.aspx?imageid=12","imgtype":"application/octet-stream","imgsize":"67 bytes","imgname":"ajax_window1_trc.gif","ImageID":"12"},
{"ConfigId":"1","URL":"viewimage.aspx?imageid=13","imgtype":"application/octet-stream","imgsize":"7 KB","imgname":"client_manager.jpg","ImageID":"13"}
]
}



1) When the load request brings back the Non-working String, no data is shown in the view, just the empty text property value.
2) When the load request brings back the Working String, the images are shown in the json view.

The differences is that with the Non Working String only 1 record is brought back and the other ones contains 2 records.
Also the Working String contains the [] wrappers.

My question is this: Should it not load the record regardless of the 2 [] array identifying brackets ? Is this functionality expected by design?

tgo
24 Sep 2007, 11:26 AM
Well, you certainly found it by yourself: the second one is the correct one and an array is indeed expected.

But it is not a jsonview problem, have a look in the API doc for Ext.data.JsonReader (which underlies your view). It states:



This would consume a JSON file like this:

{ 'results': 2, 'rows': [
{ 'id': 1, 'name': 'Bill', occupation: 'Gardener' },
{ 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' } ]
}


So, even if you only have one row, you must make it an array.

HTH
Thierry

ntulip
24 Sep 2007, 12:05 PM
Thanks for the reply.
Nick


Well, you certainly found it by yourself: the second one is the correct one and an array is indeed expected.

But it is not a jsonview problem, have a look in the API doc for Ext.data.JsonReader (which underlies your view). It states:



This would consume a JSON file like this:

{ 'results': 2, 'rows': [
{ 'id': 1, 'name': 'Bill', occupation: 'Gardener' },
{ 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' } ]
}


So, even if you only have one row, you must make it an array.

HTH
Thierry

redgrey
8 Oct 2007, 2:31 AM
this puny jsonview is driving me nuts... maybe someone can explain, why my view can't read the json data properly? would appreciatea any hints

file "index.php" contains

<?php

$ext_path = '../..';
$app_path = '.';

print "
<html>
<head>
<title>Document Title</title>
<link rel='stylesheet' type='text/css' href='$ext_path/resources/css/ext-all.css'>
<link rel='stylesheet' type='text/css' href='$ext_path/resources/css/ytheme-vista.css'>
<style>
h1 {
font-size:18px;
color:#083772;
}
.border {
border:1px solid #000000;
}
.thumb-wrap {
border:1px solid #1F3E75;
padding:10px 10px;
background:#DFECFB;
text-align:left;
}
</style>
<script type='text/javascript' src='$ext_path/adapter/yui/yui-utilities.js'></script>
<script type='text/javascript' src='$ext_path/adapter/yui/ext-yui-adapter.js'></script>
<script type='text/javascript' src='$ext_path/ext-all-debug.js'></script>
<script type='text/javascript' src='$app_path/app.js'></script>
</head>
<body>
<div id='main_div'>
<h1 id='main_html_h1'>ContentPanel & JsonView test</h1>
<input type='button' id='btn1' value='clear' />
<input type='button' id='btn2' value='set data' />
<input type='button' id='btn3' value='refresh' />
</div>
</body>
</html>
";

?>

file "app.js" contains


// declare globals
var myMain;
var myBtn;



// main singelton
var main = function(){
return{

init : function(){
console.log('main.init()...');
// set globals
myMain = Ext.get('main_div');
btn1 = Ext.get('btn1');
btn2 = Ext.get('btn2');
btn3 = Ext.get('btn3');

// prepare div
var view_panel_el = Ext.DomHelper.append(myMain,'<div id="view_panel_div" class="border"></div>', true);

// create panel
var view_panel = new Ext.ContentPanel('view_panel_div'
,{title:'(treatment) History', fitToFrame:true, autoScroll:false}
,'<div id="view_panel_content_div"></div>'
);
console.log('panel created');

// create templet
var tpl = new Ext.Template(
'<div class="thumb-wrap" id="{0}">' +
'<img src="./img/ico_studyplan_18.gif" ><span> lbl = {1}</span>' +
'</div>'
);
tpl.compile();
console.log('template compiled');
//tpl.append('view_panel_content_div',{a:1,b:'Studyplan 1'});

// create view #### HINT #### views don't auto create their divs, the target has to exist alreaydy !!!
// also views aoly accept element objects or direct id strings !!!
// anything wrong with view creation ?
//var myView = new Ext.JsonView(view_panel.el ,tpl,
var myView = new Ext.JsonView('view_panel_content_div' ,tpl, {
jsonRoot: 'rows'
//,singleSelect: true
//,emptyText : '<div style="padding:10px;">No previous treatment stored</div>'
});
console.log('view created');

// register events
myView.on('loadexception', function(){ alert('loadexception');}, this, true);
myView.on('click',
function(view, index, node, evt){ alert('CLICK nodeDate: '+view.getNodeData(node)); },
this, true);
myView.on('dblclick', function(){ alert('DOPPELCLICK');}, this, true);
//myView.on('beforeselect',
// function(view){ return view.getCount() > 0; // returning false cancels the selection
//});
console.log('evewnts registered');

/*myView.prepareData = function(data){
data.id = data.a;
data.label = data.b;
//lookup[data.name] = data; // ???
return data;
};
console.log('prepareData set');*/

// create some test data (what's the trick of proper json? )
/*var dataObj = { // already tested
totalCount:3,
rows:[
[1,'label 1'],
[2,'label 2'],
[3,'label 3']
]
};
var testData = Ext.encode(dataObj);*/

var testData = "{rows:[[1,'label 1'],[2,'label 2'],[3,'label 3']]}";
console.log('testData = '+testData);
//var encodedData = Ext.encode(testData); // that as well
//console.log('encodedData = '+encodedData);


// -------------------------
btn1.on('click', function(){
myView.jsonData = null;
console.log('myView.jsonData = '+myView.jsonData);
myView.refresh();
console.log('myView refreshed');
} );
btn2.on('click', function(){
myView.jsonData = testData;
console.log('myView.jsonData = '+myView.jsonData);
} );
btn3.on('click', function(){
myView.refresh();
console.log('myView refreshed');
} );
}

}
}();


// INIT //////////////////////
Ext.onReady(
function(){ main.init() }
);
//window.onload = main.init;
//////////////////////////////


both files 2 go inside [yourExtPath/examples/anyFolder/.]

cheers

redgrey
22 Oct 2007, 4:46 AM
no ideas anyone?