Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

forum

home / developersection / forums / how to change font color and size of "titlebar" in sencha touch?
Ask Question

How to change font color and size of "Titlebar" in Sencha Touch?

Aaron Douglas 6405 10 Jun 2013
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.
sencha touch sencha touch
Updated 06 Aug 2013
Aaron Douglas
Aaron Douglas

Other

Message

1 Answers

Anonymous User
Anonymous User 06 Aug 2013
Report Abuse
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!!
MindStick Training