1. #1
    Sencha User
    Join Date
    Jun 2013
    Posts
    8
    Vote Rating
    0
    darkmortem is on a distinguished road

      0  

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

    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,135
    Answers
    129
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      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
    darkmortem is on a distinguished road

      0  

    Default


    you don´t 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.

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar