Results 1 to 3 of 3

Thread: Add a random color to the button disclosure in the div... in a LIST VIEW

  1. #1
    Sencha User
    Join Date
    Jun 2013
    Posts
    8
    Vote Rating
    0
      0  

    Default Unanswered: Add a random color to the button disclosure in the div... in a LIST VIEW

    Dont work, what is the ubication specific to the line
    Ext.select('div.x-list-disclosure').setStyle('background-color', 'red');
    in the next code

    Code:
    Ext.define('Sencha.view.JournalReportLista', {
        extend: 'Ext.List',
        xtype: 'journalreportlista',
        cls: 'marcos',
        requires: ['Sencha.store.JournalReports'],
        
        config: {
            title: 'Journal Report',
           // grouped: true,
            itemTpl: '<div class="jump-response" style="text-align:right; color:{color}" > {titulo} {edicionJournal} {color} </div>',
             
            store: 'JournalReports',
            onItemDisclosure: true
            
            
        }
          
    }); 
    
    Ext.select('div.x-list-disclosure').setStyle('background-color', 'red');
     
    
    //});
    my.css

    Code:
    
    .x-list .x-list-disclosure {
      position: relative;
      overflow: visible;
      border: 0;
      -webkit-border-radius: 32px;
      -moz-border-radius: 32px;
      -ms-border-radius: 32px;
      -o-border-radius: 32px;
      border-radius: 32px;
      background-image: none;
      background-color: #1C057D;
     /* background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0398ff), color-stop(3%, #007ad0), color-stop(100%, #005c9d));
      background-image: -webkit-linear-gradient(top, #0398ff, #007ad0 3%, #005c9d);
      background-image: -moz-linear-gradient(top, #0398ff, #007ad0 3%, #005c9d);
      background-image: -o-linear-gradient(top, #0398ff, #007ad0 3%, #005c9d);
      background-image: linear-gradient(top, #0398ff, #007ad0 3%, #005c9d);*/
      width: 32px;
      height: 32px;
      margin: 7px 7px 0 0;
      opacity: 0.5;
    }
    any ideias?

  2. #2
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    100
      0  

    Default

    The disclosure button is not really a button, but an icon from the font-family with a style applied to its background.

    Instead of overriding the css, you should create your own css class and apply it to each list-item.

    Maybe this will work:
    Code:
    Ext.define('Sencha.view.JournalReportLista', {
        extend: 'Ext.List',
        xtype: 'journalreportlista',
        cls: 'marcos',
        requires: ['Sencha.store.JournalReports'],
        
        config: {
            title: 'Journal Report',
           // grouped: true,
            itemTpl: '<div class="jump-response" style="text-align:right; color:{color}" > {titulo} {edicionJournal} {color} </div>',
            itemCls: 'my-list-item', 
            store: 'JournalReports',
            onItemDisclosure: true      
        }
    });
    CSS (you can create a custom.css file and place it in the resources/css folder - make sure to add the path to the app.json as well)
    Code:
    .my-list-item .x-list-disclosure {
        background-image: none;
        background-color: #f00;
    }
    I created a demo to show how it should work: http://new.senchafiddle.com/#/U77lP/

    You can also check out how to to remove the arrow icon if you want to change the disclosure icon.

  3. #3
    Sencha User
    Join Date
    Jun 2013
    Posts
    8
    Vote Rating
    0
      0  

    Default

    you dont understand i want change the color of the Disclosure item css... with this

    Ext.select('div.x-list-disclosure').setStyle('background-color', 'red');





    Quote Originally Posted by jerome76 View Post
    The disclosure button is not really a button, but an icon from the font-family with a style applied to its background.

    Instead of overriding the css, you should create your own css class and apply it to each list-item.

    Maybe this will work:
    Code:
    Ext.define('Sencha.view.JournalReportLista', {
        extend: 'Ext.List',
        xtype: 'journalreportlista',
        cls: 'marcos',
        requires: ['Sencha.store.JournalReports'],
        
        config: {
            title: 'Journal Report',
           // grouped: true,
            itemTpl: '<div class="jump-response" style="text-align:right; color:{color}" > {titulo} {edicionJournal} {color} </div>',
            itemCls: 'my-list-item', 
            store: 'JournalReports',
            onItemDisclosure: true      
        }
    });
    CSS (you can create a custom.css file and place it in the resources/css folder - make sure to add the path to the app.json as well)
    Code:
    .my-list-item .x-list-disclosure {
        background-image: none;
        background-color: #f00;
    }
    I created a demo to show how it should work: http://new.senchafiddle.com/#/U77lP/

    You can also check out how to to remove the arrow icon if you want to change the disclosure icon.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •