1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    18
    Vote Rating
    -1
    mpasumarthi is an unknown quantity at this point

      0  

    Default How to apply PressedCls css for Custom Component in DataView

    How to apply PressedCls css for Custom Component in DataView


    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:
    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:

    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:
    Code:
    .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
    Regards,
    Manoj

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,620
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Formatting in your code didn't come across, can't really read your code to help.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Feb 2011
    Posts
    18
    Vote Rating
    -1
    mpasumarthi is an unknown quantity at this point

      0  

    Default


    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:


    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:
    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:
    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);    
     }
    }
    Regards,
    Manoj

  4. #4
    Sencha User
    Join Date
    Feb 2011
    Posts
    18
    Vote Rating
    -1
    mpasumarthi is an unknown quantity at this point

      0  

    Default


    Hi,

    Any help on this from sencha team is appreciated.
    Regards,
    Manoj

  5. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,620
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1