How to change the size of the BadgeText in sencha touch

Question

i Have tried of badgeCls, but it doesnt affect the badgetext, the badge text is shown along side in my button

Answer 1

Adding the class in javascript is not enough, you must also add CSS rules. You're more or less expected to use SASS with Sencha Cmd, but you can go with raw CSS to get a grip on the concepts...

Example fiddle

Javascript:

Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.Viewport.add({
            xtype: 'container',
            padding: 10,
            defaultType: 'button',
            items: [{
                text: "Button",
                badgeText: "Foo",
                badgeCls: 'x-badge big-text'
            },{
                text: "Button",
                badgeText: "Foo",
                badgeCls: 'x-badge big-badge'
            }]
        });
    }
});

CSS:

.x-badge.big-text {
    font-size: 20px;
}

.x-badge.big-badge {
    width: 60px;
    height: 30px;
}