PDA

View Full Version : Error: values.values is undefined



Elfayer
12 Sep 2012, 11:28 PM
Hi,

I get that error while launching my program. I didn't find anything in internet about it...

I'm trying to do something like the demo : http://docs.sencha.com/ext-js/4-1/#!/example/view/animated-dataview.html

So I have a view :

Ext.define('EXC.view.viewCenter', {
extend: 'Ext.view.View',
alias: 'widget.viewCenter',

border: false,
deferInitialRefresh: false,
autoScroll: true,
multiSelect: true,
itemSelector: 'div.file',
store: 'UserFiles',
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="file">',
(!Ext.isIE6 ? '<img src="{[values.fil_icon]}" />' :
'<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'{[values.fil_icon]}\',sizingMethod=\'scale\')"></div>'),
'<strong><font color = white>{values.fil_label}</font></strong>',
'</div>',
'</tpl>'
),
plugins: [
Ext.create('Ext.ux.DataView.Animated', {
duration: 550,
idProperty: 'fil_id'
})
]
});

A panel view:

Ext.define('EXC.view.panelCenter', {
extend: 'Ext.panel.Panel',
alias: 'widget.panelCenter',

bodyStyle: { background: '#3399cc' },
border: false,
layout: 'fit'
})

And when the 'UserFiles' is filled, I added the viewCentre to the panelCenter in the controller :


displayFiles: function () {
var me = this;
var panel = Ext.ComponentQuery.query('panelCenter')[0];
var store = me.getUserFilesStore();

Ext.each(me.userFiles(), function (item) {
var icon;
me.getFilesStore().each(function (item2) {
if (item2.data.fil_id == item.fil_id) {
me.getFileTypesStore().each(function (item3) {
if (item3.data.ftp_id == item2.data.ftp_id) {
var model = Ext.create('EXC.model.UserFile');

model.set('fil_id', [item2.data.fil_id]);
model.set('fil_label', [item2.data.fil_label]);
model.set('fil_icon', [item3.data.ftp_icon]);
store.add(model);
}
})
}
})
})
var view = Ext.create('EXC.view.viewCenter');
panel.add(view);
}

I don't understand the error. Can someone help?

Thanks in advance !

sword-it
13 Sep 2012, 12:02 AM
Hi Elfayer,
I think there may be the problem of tpl with data mapping. As you write in you tpl -


tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="file">',
(!Ext.isIE6 ? '<img src="{[values.fil_icon]}" />' :
'<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'{[values.fil_icon]}\',sizingMethod=\'scale\')"></div>'),
'<strong><font color = white>{values.fil_label}</font></strong>',
'</div>',
'</tpl>'
),

This means the you data will like-
data = [
{ values: {fil_icon: 'XXX', fil_Label: 'YYY'} },
{ values: {fil_icon: 'xxx', fil_Label: 'yyy'} }
];
But I think your data is in below format -
data = [
{ fil_icon: 'XXX', fil_Label: 'YYY'},
{ fil_icon: 'xxx', fil_Label: 'yyy'}
];
So you just need to make little change in your tpl. Review the following code:


tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="file">',
(!Ext.isIE6 ? '<img src="{[fil_icon]}" />' :
'<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'{[fil_icon]}\',sizingMethod=\'scale\')"></div>'),
'<strong><font color = white>{fil_label}</font></strong>',
'</div>',
'</tpl>'
),

(no need to write values.fil_label, values.fil_icon etc...)

vietits
13 Sep 2012, 12:04 AM
Try to fix your code as below:


Ext.define('EXC.view.viewCenter', {
extend: 'Ext.view.View',
alias: 'widget.viewCenter',


border: false,
deferInitialRefresh: false,
autoScroll: true,
multiSelect: true,
itemSelector: 'div.file',
store: 'UserFiles',
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="file">',
(!Ext.isIE6 ? '<img src="{fil_icon}" />' :
'<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'{fil_icon}\',sizingMethod=\'scale\')"></div>'),
'<strong><font color = white>{fil_label}</font></strong>',
'</div>',
'</tpl>'
),
plugins: [
Ext.create('Ext.ux.DataView.Animated', {
duration: 550,
idProperty: 'fil_id'
})
]
});

Elfayer
13 Sep 2012, 12:11 AM
Thank you both ! =)
That was that. Now I have something on my screen, but that doesn't look like the demo at all ... :s

And that's not draggable... Did I miss something?

The UserFiles store is like below :

idProperty: 'fil_id',
fields: [
{ name: 'fil_id', type: 'int' },
{ name: 'fil_label', type: 'string' },
{ name: 'fil_icon', type: 'string' }
]