How to apply PressedCls css for Custom Component in DataView

[mpasumarthi]

Hi,

I am trying to create a custom dataitem in my dataview (i.e i render the list using useComponents: true). The problem i am having is that, I am not able to set the pressed class (css) state to it. Can some one please help me out on this.

Below is my Custom list Code:


Ext.define('CustomComponent.view.SwarmView', { extend: 'Ext.dataview.DataView', fullscreen: true, xtype: 'swarmview', config: { baseCls: 'categories-list', store: { autoLoad: true, fields: ['name', 'age', 'src'], data: [ { name: 'Jamie Avins', age: 100, src: 'about.png' }, { name: 'Rob Dougan', age: 21, src: 'add.png' }, { name: 'Tommy Maintz', age: 24, src: 'add2.png' }, { name: 'Jacky Nguyen', age: 24, src: 'arrow_down_blue.png' }, { name: 'Ed Spencer', age: 26, src: 'arrow_down_green.png' } ] }, useComponents: true, defaultType: 'swarmitem' } }); Ext.define('CustomComponent.view.SwarmView.SwarmItem', { extend: 'Ext.dataview.component.DataItem', requires: ['CustomComponent.view.Swarm'], xtype: 'swarmitem', config: { swarm: true, baseCls: 'categories-list-item', dataMap: { getSwarm: { setMerchantName: 'name', setMerchantLogo: 'src' } } }, applySwarm: function (config) { return Ext.factory(config, 'CustomComponent.view.Swarm', this.getSwarm()); }, updateSwarm: function (newSwarm, oldSwarm) { if (oldSwarm) { this.remove(oldSwarm); } if (newSwarm) { this.add(newSwarm); } }});

Below is my component code:



Ext.define('CustomComponent.view.Swarm', { extend: 'Ext.Panel', xtype: 'swarm', config: { me: this, layout: 'hbox', balseCls: 'categories-list', merchantLogo: '', merchantName: '', defaults: { margin: '2px' }, items: [ { xtype: 'img', alias: 'merchantlogo', cls: 'image', src: '', height: 24, width: 24 }, { xtype: 'label', cls: 'name', alias: 'merchantname', html: '' } ] }, updateMerchantName: function (newName, oldName) { if (newName != '') { console.log('Updating merchant html with ' + newName); this.down('label[alias=merchantname]').setHtml("<b>" + newName + "</b>"); } }, updateMerchantLogo: function (newImage, oldImage) { if (newImage != '') { console.log('Updating merchant logo with ' + newImage); this.down('image[alias=merchantlogo]').setSrc("resources/images/" + newImage); } }, });

Below is my css which i am applying:


.categories-list { text-align: center; .categories-list-container { width: auto; margin: 0 auto; } .categories-list-item { background: rgba(38, 38, 38, .5); border: 1px solid rgba(67, 67, 67, .5); height: 180px; width: 95%; -webkit-transition: background .2s ease-in, border-color .2s ease-in; body.x-phone & { margin: 0 5px; margin-top: 5px; padding: 5px; &:first-child { margin-top: 0; } } body:not(.x-phone) & { display: inline-block; padding: 5px 5px; } .x-landscape & { margin: 5px; } .x-portrait & { margin: 5px; } } .x-item-pressed { background: rgba(0, 53, 41, .7); border-color: rgba(0, 53, 41, .8); }}

I am also adding an image how this will look like:
38274

[mitchellsimoens]

Formatting in your code didn't come across, can't really read your code to help.

[mpasumarthi]

Mitchel,

Since i am new to the forums i have no idea how to post a formatted code. I just copied the code into the code tag and posted.

Any have i am posting the code again.

Below is my Custom list Code:



Ext.define('CustomComponent.view.SwarmView', {
extend: 'Ext.dataview.DataView',
fullscreen: true,
xtype: 'swarmview',
config: {
baseCls: 'categories-list',
store: {
autoLoad: true,
fields: ['name', 'age', 'src'],
data: [
{ name: 'Jamie Avins', age: 100, src: 'about.png' },
{ name: 'Rob Dougan', age: 21, src: 'add.png' },
{ name: 'Tommy Maintz', age: 24, src: 'add2.png' },
{ name: 'Jacky Nguyen', age: 24, src: 'arrow_down_blue.png' },
{ name: 'Ed Spencer', age: 26, src: 'arrow_down_green.png' }
]
},
useComponents: true,
defaultType: 'swarmitem'
}
});


Below is my custom list item code:


Ext.define('CustomComponent.view.SwarmView.SwarmItem', {
extend: 'Ext.dataview.component.DataItem',
requires: ['CustomComponent.view.Swarm'],
xtype: 'swarmitem',
config: {
swarm: true,
baseCls: 'categories-list-item',
dataMap: {
getSwarm: {
setMerchantName: 'name',
setMerchantLogo: 'src'
}
}
},
applySwarm: function (config) {
return Ext.factory(config, 'CustomComponent.view.Swarm', this.getSwarm());
},
updateSwarm: function (newSwarm, oldSwarm) {
if (oldSwarm) {
this.remove(oldSwarm);
}
if (newSwarm) {
this.add(newSwarm);
}
}
});


Below is my CSS code:


.categories-list {
.categories-list-container {
width: auto;
margin: 0 auto;
}
.categories-list-item {
background: rgba(38, 38, 38, .5);
border: 1px solid rgba(67, 67, 67, .5);
height: 180px;
width: 95%;
-webkit-transition: background .2s ease-in, border-color .2s ease-in;
body.x-phone & {
margin: 0 5px;
margin-top: 5px;
padding: 5px;
&:first-child {
margin-top: 0;
}
}
body:not(.x-phone) & {
display: inline-block;
padding: 5px 5px;
}
.x-landscape & {
margin: 5px;
}
.x-portrait & {
margin: 5px;
}
.x-item-pressed {
background: rgba(0, 53, 41, .7);
border-color: rgba(0, 53, 41, .8);
}
}

[mpasumarthi]

Hi,

Any help on this from sencha team is appreciated.

[mitchellsimoens]

So when you select a row, the pressedCls class should be applied on that <div> but there is no default styling for DataView so you would need to specify your own styles for that pressedCls class