Results 1 to 4 of 4

Thread: Error: values.values is undefined

  1. #1
    Sencha User
    Join Date
    Jul 2012
    Location
    France
    Posts
    159
    Answers
    2

    Default Answered: Error: values.values is undefined

    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 :
    PHP Code:
    Ext.define('EXC.view.viewCenter', {
        
    extend'Ext.view.View',
        
    alias'widget.viewCenter',

        
    borderfalse,
        
    deferInitialRefreshfalse,
        
    autoScrolltrue,
        
    multiSelecttrue,
        
    itemSelector'div.file',
        
    store'UserFiles',
        
    tplExt.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', {
                    
    duration550,
                    
    idProperty'fil_id'
                
    })
            ]
    }); 
    A panel view:
    PHP Code:
    Ext.define('EXC.view.panelCenter', {
        
    extend'Ext.panel.Panel',
        
    alias'widget.panelCenter',

        
    bodyStyle: { background'#3399cc' },
        
    borderfalse,
        
    layout'fit'
    }) 
    And when the 'UserFiles' is filled, I added the viewCentre to the panelCenter in the controller :

    PHP Code:
        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 !

  2. Try to fix your code as below:
    Code:
    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'
            })
        ]
    });

  3. #2
    Sencha User sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,335
    Answers
    124

    Default

    Hi Elfayer,
    I think there may be the problem of tpl with data mapping. As you write in you tpl -
    Code:
    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:
    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...)
    Last edited by sword-it; 13 Sep 2012 at 12:04 AM. Reason: setting code formatting
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  4. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347

    Default

    Try to fix your code as below:
    Code:
    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'
            })
        ]
    });

  5. #4
    Sencha User
    Join Date
    Jul 2012
    Location
    France
    Posts
    159
    Answers
    2

    Default

    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 :
    PHP Code:
    idProperty'fil_id',
        
    fields: [
        { 
    name'fil_id'type'int' },
        { 
    name'fil_label'type'string' },
        { 
    name'fil_icon'type'string' }
        ] 
    Attached Images Attached Images

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •