PDA

View Full Version : error messages about .. Xtemplate dataview with 'hasMany - belongsTo' model



namodev05
22 Sep 2011, 6:32 AM
Hello everyone,
(excuse my english.. i am not using english as my mother tongue..)

Xtemplate with associated model problem(ExtJS4.0.2a).i've spent about 5 hrs with this.. but i cannot even catch what's wrong with this..


here's my Model definitions :



Ext.define('MyDataModel',{
extend:'Ext.data.Model',

fields:[
{name:'itemGroup', type:'string'}
],

hasMany:[
{name:'itemData', model:'ItemModel'}
]
});

Ext.define('ItemModel',{
extend:'Ext.data.Model',
fields:[
{name:'text', type:'string'},
{name:'name', type:'string'},
{name:'url', type:'string', defaultValue:''},
{name:'cls', type:'string'},
{name:'iconCls', type:'string'}
],

belongsTo:'MyDataModel'

});



and main js is like this:


Ext.onReady(function(){


var pnl = Ext.create('Ext.Panel',{
renderTo:Ext.getBody(),
title:'panel title',
width:400,
height:200,

items:[{
xtype:'dataview',
store:Ext.create('Ext.data.Store',{
model: 'MyDataModel',
autoLoad:true,
proxy: {
type: 'ajax',
url:'/application/WebBuilder/resources/images/test/get-images.php',
reader: {
type: 'json',
root: 'items'
}
},

}),
tpl: [
'<tpl for=".">',
'<span class="x-grouptitle">{itemGroup}</span>',
'<div class="x-clear"></div>',
'<tpl for="itemData">',
'<div class="thumb-wrap" id="{[Ext.id()]}-{name}">',
'<div class="thumb"><img height="30" src="{url}" title="{name}"></div>',
'<span >{name}</span></div>',
'</tpl>',
'<div class="x-clear"></div>',
'</tpl>',
'<div class="x-clear"></div>'

],
trackOver: true,
overItemCls: 'x-item-over',
itemSelector: 'div.thumb-wrap',
emptyText: 'No images to display'
}]
});

console.log(pnl.down('dataview').store);
});



..with actual json data is like .. :


{
"items":[{
"itemGroup":"1.family image",
"itemData":[
{"name":"dance_fever.jpg","size":2067,"lastmod":1.308061404e+12,"url":"\/application\/WebBuilder\/resources\/images\/test\/images\/dance_fever.jpg"},
{"name":"gangster_zack.jpg","size":2115,"lastmod":1.308061404e+12,"url":"\/application\/WebBuilder\/resources\/images\/test\/images\/gangster_zack.jpg"},
{"name":"kids_hug.jpg","size":2477,"lastmod":1.308061404e+12,"url":"\/application\/WebBuilder\/resources\/images\/test\/images\/kids_hug.jpg"},
{"name":"kids_hug2.jpg","size":2476,"lastmod":1.308061404e+12,"url":"\/application\/WebBuilder\/resources\/images\/test\/images\/kids_hug2.jpg"},
{"name":"sara_pink.jpg","size":2154,"lastmod":1.308061404e+12,"url":"\/application\/WebBuilder\/resources\/images\/test\/images\/sara_pink.jpg"},
{"name":"sara_pumpkin.jpg","size":2588,"lastmod":1.308061404e+12,"url":"\/application\/WebBuilder\/resources\/images\/test\/images\/sara_pumpkin.jpg"},
{"name":"sara_smile.jpg","size":2410,"lastmod":1.308061404e+12,"url":"\/application\/WebBuilder\/resources\/images\/test\/images\/sara_smile.jpg"},
{"name":"up_to_something.jpg","size":2120,"lastmod":1.308061404e+12,"url":"\/application\/WebBuilder\/resources\/images\/test\/images\/up_to_something.jpg"},
{"name":"zack.jpg","size":2901,"lastmod":1.308061404e+12,"url":"\/application\/WebBuilder\/resources\/images\/test\/images\/zack.jpg"},
{"name":"zacks_grill.jpg","size":2825,"lastmod":1.308061404e+12,"url":"\/application\/WebBuilder\/resources\/images\/test\/images\/zacks_grill.jpg"},
{"name":"zack_dress.jpg","size":2645,"lastmod":1.308061404e+12,"url":"\/application\/WebBuilder\/resources\/images\/test\/images\/zack_dress.jpg"},
{"name":"zack_hat.jpg","size":2323,"lastmod":1.308061404e+12,"url":"\/application\/WebBuilder\/resources\/images\/test\/images\/zack_hat.jpg"},
{"name":"zack_sink.jpg","size":2303,"lastmod":1.308061404e+12,"url":"\/application\/WebBuilder\/resources\/images\/test\/images\/zack_sink.jpg"}
]
},{
"itemGroup":"2.face image",
"itemData":[
{"name":"dance_fever.jpg","size":2067,"lastmod":1.308061404e+12,"url":"\/application\/WebBuilder\/resources\/images\/test\/images\/dance_fever.jpg"},
{"name":"gangster_zack.jpg","size":2115,"lastmod":1.308061404e+12,"url":"\/application\/WebBuilder\/resources\/images\/test\/images\/gangster_zack.jpg"},
{"name":"kids_hug.jpg","size":2477,"lastmod":1.308061404e+12,"url":"\/application\/WebBuilder\/resources\/images\/test\/images\/kids_hug.jpg"},
{"name":"kids_hug2.jpg","size":2476,"lastmod":1.308061404e+12,"url":"\/application\/WebBuilder\/resources\/images\/test\/images\/kids_hug2.jpg"},
{"name":"sara_pink.jpg","size":2154,"lastmod":1.308061404e+12,"url":"\/application\/WebBuilder\/resources\/images\/test\/images\/sara_pink.jpg"},
{"name":"sara_pumpkin.jpg","size":2588,"lastmod":1.308061404e+12,"url":"\/application\/WebBuilder\/resources\/images\/test\/images\/sara_pumpkin.jpg"},
{"name":"sara_smile.jpg","size":2410,"lastmod":1.308061404e+12,"url":"\/application\/WebBuilder\/resources\/images\/test\/images\/sara_smile.jpg"},
{"name":"up_to_something.jpg","size":2120,"lastmod":1.308061404e+12,"url":"\/application\/WebBuilder\/resources\/images\/test\/images\/up_to_something.jpg"},
{"name":"zack.jpg","size":2901,"lastmod":1.308061404e+12,"url":"\/application\/WebBuilder\/resources\/images\/test\/images\/zack.jpg"},
{"name":"zacks_grill.jpg","size":2825,"lastmod":1.308061404e+12,"url":"\/application\/WebBuilder\/resources\/images\/test\/images\/zacks_grill.jpg"},
{"name":"zack_dress.jpg","size":2645,"lastmod":1.308061404e+12,"url":"\/application\/WebBuilder\/resources\/images\/test\/images\/zack_dress.jpg"},
{"name":"zack_hat.jpg","size":2323,"lastmod":1.308061404e+12,"url":"\/application\/WebBuilder\/resources\/images\/test\/images\/zack_hat.jpg"},
{"name":"zack_sink.jpg","size":2303,"lastmod":1.308061404e+12,"url":"\/application\/WebBuilder\/resources\/images\/test\/images\/zack_sink.jpg"}
]
}]
}



and, when i run this code with Chrome14/Windows7, loading mask of panel doesn't dissappears , with error messages like this :


Uncaught TypeError: Cannot read property 'internalId' of undefined
Ext.define.updateIndexes ext-all-debug.js:58747
Ext.define.refresh ext-all-debug.js:58630
Base.callParent ext-all-debug.js:2833
Ext.define.refresh ext-all-debug.js:67581


i've googled and looked into this forum.. but cannot find why this doesn't work..

is there any possible way to make this code work..?


Thanks,

namodev05

twaindev
24 Sep 2011, 2:43 PM
Don't know if the XTemplate will work with associations, but your models are missing id's. Please read the Data Package Guide (http://docs.sencha.com/ext-js/4-0/#!/guide/data) under heading 'Associations' to find out how to do this. Note the id and ..._id fields. These are the links between the models.

HTH

fbchen
24 Sep 2011, 6:43 PM
hi, I test your code, and change something, it works.
1, add 'associationKey' to the 'hasMany' config, like this:


hasMany:[
{name:'itemData', model:'ItemModel', associationKey: 'itemData'}
]
when I remove the 'associationKey', it still works, so I think it doesn't associate with the problem.
2, wrap a 'div' to the 'tpl', like this:


tpl: ['<div class="thumb-wrap-outer">', ...your code here..., '</div>'],
//itemSelector: 'div.thumb-wrap',
itemSelector: 'div.thumb-wrap-outer',

I look into the code in the AbstractView.js file, line 528:
If use 'div.thumb-wrap' as the itemSelector, it will throw a outOfIndex exception:


updateIndexes : function(startIndex, endIndex) {
var ns = this.all.elements,
records = this.store.getRange(); // length is 2
startIndex = startIndex || 0;
endIndex = endIndex || ((endIndex === 0) ? 0 : (ns.length - 1)); // endIndex is 25
for(var i = startIndex; i <= endIndex; i++){
ns[i].viewIndex = i;
ns[i].viewRecordId = records[i].internalId; // out of index here
if (!ns[i].boundView) {
ns[i].boundView = this.id;
}
}
}

Good luck!