PDA

View Full Version : Nested Json item selection.



tomalex0
1 Mar 2011, 9:48 PM
Hi,

I think most of them have seen an example of nested loading in KitchenSink under Data

dataview will be something like this




{
xtype: 'dataview',

/*
* The XTemplate allows us to easily render the data from our User model, as well as
* iterating over each User's Orders and OrderItems:
*/
tpl: [
'<tpl for=".">',
'<div class="user">',
'<h3>{name}\'s orders:</h3>',
'<tpl for="orders">',
'<div class="order" style="padding-left: 20px;">',
'Order: {id} ({status})',
'<ul>',
'<tpl for="orderItems">',
'<li>{quantity} x {name}</li>',
'</tpl>',
'</ul>',
'</div>',
'</tpl>',
'</div>',
'</tpl>'
],
//itemSelector: 'div.user', this was before
itemSelector: 'div.order', //changed item selector to oder
styleHtmlContent: true,

store: new Ext.data.Store({
model: 'User',
autoLoad: false
})
}


I have changed the item selector to apply x-item-selected class on div with class order. Item selection was working for every items except the last one..
It was showing some error like.

Uncaught TypeError: Cannot read property 'id' of undefined sencha-touch-debug.js:1390

Is there i'm missing ? How could i fix this.

6 Mar 2011, 7:24 AM
I would put a conditional breakpoint in that area so you can see the call stack and analyze. The error is in the mixed collection code.

ssk_hari
8 Apr 2011, 1:31 AM
Am trying to run the Nested Loading example of KITCHEN SINK as a stand-alone page .. I have HTML file which calls the below nestedLoading.js file.... But, when i try to run, it simply shows a blank screen. Could not see any errors in the console also. Can anyone help me where I am going wrong ... The JS file is as follows.


Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
/*
* In this example, we set up 3 models - User, Order and OrderItem. Each User hasMany Orders,
* and each Order hasMany OrderItems. First let's define those models:
*/
Ext.regModel('User', {
fields: ['id', 'name'],

hasMany: {model: 'Order', name: 'orders'},

proxy: {
type: 'ajax',
url : 'userData.json'
}
});

Ext.regModel('Order', {
fields: ['id', 'status'],

hasMany: {model: 'OrderItem', name: 'orderItems'}
});

Ext.regModel('OrderItem', {
fields: ['id', 'quantity', 'price', 'name']
});

/*
* This panel sets up a DataView, which defines an XTemplate used to render our data. We also set up
* the toolbar with the "Load Nested Data" button here
*/



//var disp = new Ext.Panel({
nestedLoading = new Ext.Panel({
layout: 'fit',
scroll: 'vertical',
dockedItems: [
{
dock: 'top',
xtype: 'toolbar',
items: [
{
text: 'Load Nested Data',
handler: function() {
var panel = nestedLoading,
dataview = nestedLoading.items.first(),
store = dataview.store;

store.load();
}
}

]
}
],

items: [
{
xtype: 'dataview',

/*
* The XTemplate allows us to easily render the data from our User model, as well as
* iterating over each User's Orders and OrderItems:
*/
tpl: [
'<tpl for=".">',
'<div class="user">',
'<h3>{name}\'s orders:</h3>',
'<tpl for="orders">',
'<div class="order" style="padding-left: 20px;">',
'Order: {id} ({status})',
'<ul>',
'<tpl for="orderItems">',
'<li>{quantity} x {name}</li>',
'</tpl>',
'</ul>',
'</div>',
'</tpl>',
'</div>',
'</tpl>'
],

itemSelector: 'div.user',
styleHtmlContent: true,

store: new Ext.data.Store({
model: 'User',
autoLoad: false
})
}
]
});


}
});

brink
6 Sep 2011, 4:40 PM
I ran into this as well, and going through breakpoints i think I know what's going on.

In my case I have something like Author -> Books, so something like a list that is organized by author, with the goal being the books are clickable.

When one taps an item, it goes through the chain and grabs the store for that item, then tries to get the record at the index of item. The problem is getAt(index) is going by the author level, rather than the books level.

So in your example what's probably happening is it's sending the correct index for the order, but trying to select against the index for the list of users.


Hi,

I think most of them have seen an example of nested loading in KitchenSink under Data

dataview will be something like this




{
xtype: 'dataview',

/*
* The XTemplate allows us to easily render the data from our User model, as well as
* iterating over each User's Orders and OrderItems:
*/
tpl: [
'<tpl for=".">',
'<div class="user">',
'<h3>{name}\'s orders:</h3>',
'<tpl for="orders">',
'<div class="order" style="padding-left: 20px;">',
'Order: {id} ({status})',
'<ul>',
'<tpl for="orderItems">',
'<li>{quantity} x {name}</li>',
'</tpl>',
'</ul>',
'</div>',
'</tpl>',
'</div>',
'</tpl>'
],
//itemSelector: 'div.user', this was before
itemSelector: 'div.order', //changed item selector to oder
styleHtmlContent: true,

store: new Ext.data.Store({
model: 'User',
autoLoad: false
})
}


I have changed the item selector to apply x-item-selected class on div with class order. Item selection was working for every items except the last one..
It was showing some error like.

Uncaught TypeError: Cannot read property 'id' of undefined sencha-touch-debug.js:1390

Is there i'm missing ? How could i fix this.