View Full Version : Ext.List view Ext.Data.Store from non-array based JSON

24 Jun 2011, 1:45 AM
Hi All,
I've been having trouble formatting data into an Ext.List using TPL tempting. I'd like to use the following JSON data to render the list:

var items = {
"f192": {
"name": "Apples",
"f193": {
"name": "Oranges",

however the following console error occurs when I connect this 'items' data to my Ext.Data.Store:

Uncaught TypeError: Function.prototype.apply: Arguments list has wrong type
(anonymous function)licences.js:38
senchaTouchDebug.js:22536Uncaught DataView requires tpl, store and itemSelector configurations to be defined.

It works fine with JSON of the type:

var items = [
{"id": "f192", "name": "apples"},
{"id": "f193", "name": "oranges"}

We don't want an array of JSON however - we would like to be able to index our items by their ID and add a whole bunch of other useful attributes to the object along with the name.

If we can get this to work, how would we register our model? How would the data be referenced in the itemTPL?
We can get the index with {#}, how about data under the index?

Is this something which is possible, or does TPL have to be presented with an array to iterate over?

If not possible, could we register a callback function for each row, which manually retrieves the data and returns HTML for each row rather than using an itemTPL XTemplate?

Thanks for any help! :)

24 Jun 2011, 2:16 AM
use a store to convert items.

24 Jun 2011, 3:28 AM
Thanks for the reply! I was looking at the API docs of Ext.Data.Store
but couldn't see a method which allows me to take data from non-array based JSON?

To clarify - I have an Ext.Data.Store wired to this 'var items' but it throws a console error when connected..

4 Jul 2011, 6:42 AM
*Bump* - any advice on this one?
Can I use a filter to extract the array data? I'm really just at a loss as to how to iterate over the array of items by index! Thanks! :)

6 Jul 2011, 12:10 AM
Based on the json you provided i have tried something like this, i'm not sure if this solves your problem. Just have a look.

onReady : function() {

Ext.regModel('menuItem', {
fields: [
{name: 'name', type: 'string'},
{name: 'id', type: 'string'},
{name: 'cost', type: 'string'}

var menuItemstore = new Ext.data.Store({
model: 'menuItem',
proxy: {
type: 'ajax',
url: 'test.json',
reader: {
type: 'json',
root: function(json) {
var newobjArr = [];
var newobj = {};
newobj.id = key;
newobj[itemkey] = value[itemkey];

return newobjArr;
autoLoad: true

new Ext.List({
fullscreen : true,
store : menuItemstore,
itemTpl: '<div ><strong>{name}---</strong> {cost}-----{id}</div>',




6 Jul 2011, 5:29 AM
That worked a treat, excellent. Thanks a lot :-)