itemOverCls doesn't seem to be working in data view

[toxkillfraex]

I'm probably missing something stupid again =P

anyway I've been trying to get a dumbed down version of those data view examples but I'm failing to get item over classes working
I turned on track over. So I'm kinda blind on what I'm missing.

I think this is the relevant bit of code on the matter

tpl: [
'<tpl for=".">',
'<div class= "'+ this.customClass+'" id="{id}">',
'<div class="thumb"><img src="{url}" ></div>',
'<span class="thumbtext">{name}</span></div>',
'</tpl>'
],
multiSelect: true,
trackOver: true,
itemOverCls: 'x-item-over',
itemSelector: 'div.'+ this.customClass,
listeners:
{
itemclick:this.test,
itemdblclick:this.testing
}

do I need a mouse over event perhaps?

[toxkillfraex]

I don't know if this is supposed to happen or not, but in an attempt to find the sollution I removed the id from the tpl.

When I run the application then and inspect the elements it starts generating Id's on mouse over O.O;
but as I said I don't know if it's supposed to happen or not. Maybe this explains why I'm having the problem.

[toxkillfraex]

somebody pls?

[skirtle]

It's overItemCls, not itemOverCls.

[toxkillfraex]

It's overItemCls, not itemOverCls.

just changed it to that still not working =/

[skirtle]

Odd, it fixed it for me.

You'll need to provide a complete test case. The code you posted is missing key details like sample data and whatever this is. Please use [CODE] tags when posting code.

[toxkillfraex]

Odd, it fixed it for me.

You'll need to provide a complete test case. The code you posted is missing key details like sample data and whatever this is. Please use [CODE] tags when posting code.

I was wondering already how you guys posted code

the data

Ext.define('App.store.DummyThumbStore', {
    extend: 'Ext.data.Store',
    model: 'App.model.Thumb',
    data  : [
                 {name: 'name', url: 'images/placeholder.png', id:'3' },
                 {name: 'name', url: 'images/placeholder.png', id:'4'},
                 {name: 'name', url: 'images/placeholder.png', id:'1'},
                 {name: 'somethumb', url: 'images/placeholder.png', id:'2'}

            ]
 });

the model

Ext.define('App.model.Thumb', {
    extend: 'Ext.data.Model',
    fields: ['name', 'url', 'id']

});

the full view class

Ext.define('App.view.navigation.Thumbnails', {
    extend: 'Ext.view.View',
    alias: 'widget.thumbnails',
    layout: 'fit',
    //default thumb wrapping div name
    customClass: 'defaultThumb',
    store:'DummyThumbStore',
    
    initComponent: function() 
    {
        var me = this;        
        
        Ext.applyIf(me,
        {
            
            tpl: [
                       '<tpl for=".">',
                         '<div class= "'+ this.customClass+'" id="{id}">', 
                         '<div class="thumb"><img src="{url}" ></div>',
                         '<span class="thumbtext">{name}</span></div>',
                       '</tpl>'
                   ],
            multiSelect: true,
            trackOver: true,
            overItemCls: 'x-item-over',
            itemSelector: 'div.'+ this.customClass,
            //need to move this to controller
            listeners: 
            {
                  itemclick:this.test,
                   itemdblclick:this.testing
            }
        
        });
        
        me.callParent(arguments);
    },
    test: function()
    {
        console.log('single click');
    },
    testing: function(view,record, item)
    {
        console.log('testing 123');
        console.log(item.id);
    }
});

one of the two panels it's in

Ext.define('App.view.navigation.Drawer', 
{
    cls:'drawer',
    extend: 'Ext.panel.Panel',
    alias: 'widget.drawer',
    requires: ['Ext.panel.Panel'],
    initComponent: function() 
    {
        var me = this;
        
        var tabsPanel = Ext.create('Ext.tab.Panel',
        {//define the tabs/panels
            bodyCls: 'panelBody',
            items: [
                {
                    xtype: 'panel',
                    title: 'test1',
                    
                   items:[
                   {
                        xtype:'thumbnails',
                        customClass: 'drawerThumb'
                   }
                   
                   ]
                 
                },
                {
                    xtype: 'panel',
                    title: 'test2'
                },
                {
                    xtype: 'panel',
                    title: 'test3'
                }
            ]
            
        });
        
        Ext.applyIf(me,
        {
            items:[tabsPanel]
        });
        
        me.callParent();
        
        return me;
    }

    
});

the other view it's in

Ext.define('App.view.dock.Dock', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.dock',
    width: 100,
    requires: ['Ext.panel.Panel'],
    initComponent: function()
    {
        var me = this;
        
        var thumbnails = Ext.create('App.view.navigation.Thumbnails',
        {
            customClass: 'dockThumb'
        });
        
        Ext.applyIf(me,
        {
            items:[thumbnails]
        });
        
        me.callParent(arguments);
    }
    
});

could the testing data be causing this?

(I tried the case again without id's still no luck)

[skirtle]

You're using applyIf to copy the config across. That won't copy properties that already exist of the target object. Some of those properties are specified on the superclasses. Try using apply instead, or where possible just move them onto the prototype by putting them in the define config.

[toxkillfraex]

You're using applyIf to copy the config across. That won't copy properties that already exist of the target object. Some of those properties are specified on the superclasses. Try using apply instead, or where possible just move them onto the prototype by putting them in the define config.

it works now thanks a million <33