Home > DeveloperSection > Forums > How to change font color and size of "Titlebar" in Sencha Touch?
Aaron Douglas
Aaron Douglas

Total Post:20

Points:140
Posted on    June-10-2013 8:45 AM

 Sencha Touch Sencha Touch 
Ratings:


 1 Reply(s)
 4225  View(s)
Rate this:
Hi Expert,

I'm try to change font color and size of Titlebar in Sencha Touch. How to do this?
Please help!
Thanks in advance.


Arun Singh

Total Post:68

Points:476
Posted on    August-06-2013 2:19 AM

Hi Mr. Douglas,
Sencha Touch provides a rich property (property name - cls) to change font color, font-size etc. You can simply create your CSS class and just add with control property CLS it will made changes in control. 

You can simply drag and drop titlebar from toolbox to view inspector if you are using Sencha Architect but if are not using Sencha Architect then you can simply add the following line of code in your application:3

  Ext.create('Ext.Panel', {
            fullscreen: true,
            styleHtmlContent: true,
            items: [{
                xtype: 'titlebar',
                docked: 'top',
                title: 'Panel title',
                items: [{
                    xtype: 'button',
                    align: 'left',
      cls: 'your_custom_css_class_forTitleBar',
                    iconCls: 'arrow_left',
                    iconMask: true,
                    ui: 'plain',
                    handler: function () {
                        Ext.Msg.alert('You clicked the left button');
                    } // handler
                }, {
                    xtype: 'button',
                    align: 'right',
    cls: 'your_custom_css_class_forbutton',
                    iconCls: 'arrow_right',
                    iconMask: true,
                    ui: 'plain',
                    handler: function () {
                        Ext.Msg.alert('You clicked the right button');
                    } // handler
                }] // items
            }, {
                html: 'This is the body of the panel'
            }] // items
        }); // create()

Mark as answer if this solution will resolve your problem. Thanks!!

Modified On Aug-06-2013 02:21:20 AM

Don't want to miss updates? Please click the below button!

Follow MindStick