1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    16
    Vote Rating
    0
    asifu9 is on a distinguished road

      0  

    Default Group button change text color

    Group button change text color


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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,207
    Vote Rating
    858
    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

      1  

    Default


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