PDA

View Full Version : Simple Data View - JSON



Wakebrad
4 Oct 2010, 10:51 AM
This is my first day to work with extjs or Sencha Touch but have experience with various other JS frameworks. My goal with this first test is to simply load a series of images with the URL pulled from a json file. After looking at about 10 different ways of doing this in the demos and APIs, this is what I have come up with:


Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
// Set up a model to use in our Store
Ext.regModel('dicomImageModel', {
fields: [
{name: 'dicom-image', type: 'string'}
]
});

var myStore = new Ext.data.Store({
model: 'dicomImageModel',
proxy: {
type: 'ajax',
url : '/static-images.json',
reader: {
type: 'json',
root: 'results'
}
},
autoLoad: true
});

var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap"><img src="{dicom-image}" width:"256" height:"256"></div>',
'</tpl>',
'<div class="x-clear"></div>'
);

var panel = new Ext.Panel({
id:'images-view',
frame:true,
width:300,
height:500,
autoHeight:true,
collapsible:false,
layout:'fit',
title:'Simple DataView',

items: new Ext.DataView({
store: myStore,
tpl: tpl,
autoHeight:true,
multiSelect: true,
overClass:'x-view-over',
itemSelector:'div.thumb-wrap',
emptyText: 'No images to display'
})
});
panel.render(Ext.getBody());
}
});Note that in firebug, it properly executes the GET and the response I see a properly formated json object starting with:

{"results":[{"dicom-image":"http://localhost:8080/dicom-images/IM-0002-0001.jpg"},...Yet nothing is displayed on the page.

I don't understand the concepts between Ext.Setup, onRead, etc yet and what pieces of code need to fit where. I don't know if this is a simple fix or if I am horribly misunderstanding something but any help would be appreciated. I've been beating my head against the wall for a few hours now. When looking at the APIs, they make sense, but I don't know how to tie them together.

In case you need the HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DICOM</title>

<!-- Sencha Touch CSS -->
<link rel="stylesheet" href="resources/css/ext-touch.css" type="text/css">

<!-- Sencha Touch JS -->
<script type="text/javascript" src="ext-touch-debug.js"></script>

<!-- Application JS -->
<script type="text/javascript" src="dicom.js"></script>

</head>
<body></body>
</html>

evant
4 Oct 2010, 4:41 PM
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){
// Set up a model to use in our Store
Ext.regModel('dicomImageModel', {
fields: [{
name: 'dicom-image',
type: 'string'
}]
});

var myStore = new Ext.data.Store({
model: 'dicomImageModel',
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json',
root: 'results'
}
},
autoLoad: true
});

var tpl = new Ext.XTemplate('<tpl for=".">', '<div class="thumb-wrap"><img src="{dicom-image}" width:"256" height:"256"></div>', '</tpl>', '<div class="x-clear"></div>');

var panel = new Ext.Panel({
id: 'images-view',
fullscreen: true,
layout: 'fit',

items: [new Ext.DataView({
store: myStore,
tpl: tpl,
itemSelector: 'div.thumb-wrap'
})]
});
}
});