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:
customlist.png

[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