PDA

View Full Version : itemOverCls doesn't seem to be working in data view



toxkillfraex
5 Mar 2012, 2:49 AM
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
5 Mar 2012, 5:03 AM
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
5 Mar 2012, 10:58 AM
somebody pls? :s

skirtle
5 Mar 2012, 8:46 PM
It's overItemCls, not itemOverCls.

toxkillfraex
6 Mar 2012, 12:40 AM
It's overItemCls, not itemOverCls.

just changed it to that still not working =/

skirtle
6 Mar 2012, 12:54 AM
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
6 Mar 2012, 1:07 AM
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
6 Mar 2012, 1:21 AM
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
6 Mar 2012, 1:25 AM
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