CODEWITHSUNDEEP
extjssencha-touchtoolbarsencha-architect
GenieWanted
GenieWanted

Reputation: 4513

Reduce the height of a titlebar - Sencha

I have a container with a few different items stacked in. I also would like to have two title bars inside the container BUT with height reduced to 10 points. I have tried to reduce the size using setHeight() with a lesser number but I can't seem to achieve that. Am I missing something obvious?

Is there a way I can reduce the height of a toolbar/titlebar in Sencha Touch? Help!

UPDATE: Here is the code I use for a toolbar...

Ext.define('MyApp.view.CookingSteps', {
    extend: 'Ext.Container',
    alias: 'widget.CookingSteps',

    config: {
        height: '',
        html: '',
        id: 'CookingSteps',
        itemId: 'CookingSteps',
        style: '',
        layout: {
            type: 'vbox'
        },
        items: [
            {
                xtype: 'toolbar',
                docked: 'top',
                height: 50,
                html: '<b><center>AdBanner Goes Here',
                style: 'background: gray;',
                styleHtmlContent: true
            },
            {
                xtype: 'container'
            },
            {
                xtype: 'fieldset',
                title: '',
                items: [
                    {
                        xtype: 'textfield',
                        label: '',
                        placeHolder: 'Username'
                    },
                    {
                        xtype: 'textfield',
                        label: '',
                        placeHolder: 'Passphrase'
                    }
                ]
            },
            {
                xtype: 'toolbar',
                docked: 'top',
                height: 20,
                minHeight: '20',
                title: 'Login'
            },
            {
                xtype: 'container',
                items: [
                    {
                        xtype: 'button',
                        centered: true,
                        ui: 'confirm',
                        width: 283,
                        text: 'Go Ahead :)'
                    }
                ]
            }
        ]
    }

});

I want the toolbar with title 'Login' with a reduce height.. Any help would be greatly appreciated. Thank you in advance. :)

Upvotes: 0

Views: 2475

Answers (1)

Igor Glotov
Igor Glotov

Reputation: 36

If you need to adjust toolbar size use minHeight option with units in toolbar config. Here is a toolbar example with a 2x of current font size height.

    {
        xtype: 'toolbar',
        docked: 'top',
        minHeight: '2em',
    }

Upvotes: 2

Related Questions