Sencha Touch 1.1 nested list associations - json

Question

I have the following problem, I can not fetch the data from the sublist, I am doing wrong?
my code:
//file lstCabDet.txt
{"root":[
{
"NumeroPedido":"0000000001",
"CodigoCliente":"100000",
"NombreCliente":"hskjdnd",
"NIF":"43065236",
"Detalle":[{
"DocumentoVenta":"0000000001",
"Posicion":"000010",
"CodigoMaterial":"000000000010000002",
"Material":"Prueba material 1"}]},
{
"NumeroPedido":"0000000002",
"CodigoCliente":"100000",
"NombreCliente":"hskdsnb",
"NIF":"43065236",
"Detalle":[{
"DocumentoVenta":"0000000002",
"Posicion":"000010",
"CodigoMaterial":"000000000010000002",
"Material":"Prueba material 1"}]
}]}
//Model
Ext.regModel('listaDocumentosModel', {
fields: [
{name: 'NumeroPedido', type: 'string'},
{name: 'CodigoCliente', type: 'string'},
{name: 'NombreCliente', type: 'string'},
{name: 'NIF', type: 'string'}
],
associations:[
{type: 'hasMany',
model: 'listaDocumentoDetalleModel', name: 'listaDocumentoDetalleModel'}
]
});
Ext.regModel('listaDocumentoDetalleModel',
{
fields:[
{name: 'DocumentoVenta', type: 'string'},
{name: 'Posicion', type: 'string'},
{name: 'CodigoMaterial', type: 'string'},
{name: 'Material', type: 'string'}
],
associations:[
{type: 'belongsTo', model: 'listaDocumentosModel'}
]
});
//Store
var listaDocumentosStore = new Ext.data.Store (
{
autoLoad: true,
model: 'listaDocumentosModel',
proxy:
{
id: 'listaDoc',
type: 'rest',
url: 'data/lstCabDet.txt',
reader:
{
type: 'json',
root : 'root'
}
}
});
//View Detail
var disDetDoc =
'<div>'+
'<div>'+
'<div>{NumeroPedido}</div>'+
'<div>{Posicion}</div>'+
'<div>{CodigoMaterial}</div>'+
'<div>{Material}</div>'
'</div>'+
'</div>';
detalleDocumento = Ext.extend(Ext.Panel,
{
layout: 'card',
initComponent: function()
{
this.dockedItems = [
{
xtype: 'toolbar',
dock: 'top',
title: 'Detalle documento',
items: [
{
ui: 'back',
text: 'Volver',
scope: this,
handler: function()
{
this.ownerCt.setActiveItem(this.prevCard,
{
type: 'slide',
reverse: true,
scope: this,
after: function()
{
this.destroy();
}
});
}
}]
}];
this.detalleDocPanel = new Ext.Panel(
{
layout: 'fit',
items: [
{
scroll: 'vertical',
data: this.record.data,
tpl: disDetDoc
}]
});
this.items = this.detalleDocPanel;
detalleDocumento.superclass.initComponent.call(this);
}
});
Ext.reg('detalleDocumento', detalleDocumento);
//View Master
var listDoc =
'<div class="materialItem">'+
'<div class="list-codigo">'+
'{NumeroPedido}'+
'{CodigoCliente}'+
'{NIF}'+
'{NombreCliente}'+
'</div>'
'</div>';
var lblRef = [{
xtype: 'fieldset',
defaults:
{
labelAlign: 'left',
labelWidth: '30%'
},
items: [
{
xtype: 'textfield',
label: 'Referencia',
useClearIcon: true
}]
}];
var buttonVolver = [{
ui: 'back',
text: 'Volver',
handler: function()
{
window.open("consultaDoc.html","_self");
}
},
{
xtype: 'spacer'
}
]
var dockedItems = [{
xtype: 'toolbar',
title: 'Lista de documentos',
dock: 'top',
ui: 'dark',
items: buttonVolver
}]
listaDocumentoView = Ext.extend(Ext.Panel,
{
fullscreen: true,
layout: 'card',
initComponent: function()
{
this.lDoc = new Ext.List({
id: 'listaDoc',
grouped: false,
itemTpl: listDoc,
loadingText: false,
store: listaDocumentosStore
});
this.lDoc.on('selectionchange', this.onSelect, this);
this.listaDocumentosPanel = new Ext.Panel(
{
layout: 'fit',
dockedItems: dockedItems,
items: this.lDoc,
listeners:
{
activate:
{
fn: function()
{
this.lDoc.getSelectionModel().deselectAll();
Ext.repaint();
},
scope: this
}
}
});
this.items = this.listaDocumentosPanel;
listaDocumentoView.superclass.initComponent.call(this);
},
onSelect: function(selectionmodel, records)
{
if (records[0] !== undefined)
{
var detalleDocCard = new detalleDocumento(
{
prevCard: this.listaDocumentosPanel,
record: records[0]
});
this.setActiveItem(detalleDocCard, 'slide');
}
}
});
Ext.reg('listaDocumentoView', listaDocumentoView);

Answer 1

I`m dealing with the same issue. Maybe this help you to get closer to a solution:
In Accessing nested objects in JSON feed - Sencha Touch answer:
Ext.regModel('MODEL', {
fields: [{name:'position', mapping:'NIF.postion'}]
});

Answer 2

Change your model to
Ext.regModel('listaDocumentosModel', {
fields: [
{name: 'NumeroPedido', type: 'string'},
{name: 'CodigoCliente', type: 'string'},
{name: 'NombreCliente', type: 'string'},
{name: 'NIF', type: 'string'}
],
hasMany:[
{ model: 'listaDocumentoDetalleModel', name: 'listaDocumentoDetalleModel', , associationKey: 'listaDocumentoDetalleModel'}
]});
and remove this line from sub-model
associations:[
{type: 'belongsTo', model: 'listaDocumentosModel'}
]
This modifications solve my same problem, hope this helps to you