Group button change text color

[asifu9]

Hi,

I have group of button with toggle functionality, and now i want to change the button text color. need your help on this. below is the code.

  Ext.define('GroupButton', {
        extend: 'Ext.button.Button',
        alias: 'widget.groupbutton',
        toggleGroup: 'defaultGroup',
        initComponent: function(){
            var me = this;
            me.callParent(arguments);
        },
        toggleHandler: function(button, state){
            var me = this;
            if(!(me.pressed || Ext.ButtonToggleManager.getPressed(me.toggleGroup))){
                me.toggle(true, true);
            }
        }
    });




 items: [        
       {  // xtype: 'panel' implied by default
           ui: 'qhosui',
        title: ' ',
        region:'west',
        xtype: 'panel',
        margins: '0 0 0 0',        
        width: 200,
        collapsible: false,  
        id: 'report-container',        
        defaults: {
        xtype: 'toolbar',        
        labelAlign: 'top',
        bodypadding: 20
        },
        layout: {
        type: 'vbox'
        },
         items: [
        {
            xtype: 'groupbutton',                     
            width: 195,           
            height: 32,              
            text: 'Driver Violations',            
            itemId: 'btnViolationReport',    
            textAlign: 'left'          
        },
        {
            xtype: 'groupbutton',
            width: 195,           
            height: 32,                       
            text: 'Personal Conveyance',
            itemId: 'btnConveyanceReport',
            textAlign: 'left'
           
        },
        .
        .
],
    renderTo: Ext.getBody()    
});

Also i tried to use customized 'cls' in both places but no joy. Need help on this.

Thanks,
Asif

[mitchellsimoens]

You should give the button cls and use CSS to style the text. Inspect the DOM to see what elements and classes you can use.