Error: values.values is undefined

[Elfayer]

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/#!...-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]

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]

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]

Thank you both ! =)
That was that. Now I have something on my screen, but that doesn't look like the demo at all ...

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' }
    ]