Theming. Trouble with inline styles.

[Cypher-kun]

Hello.
I have too much troubles in theming.

For now I only need to fix the width of BACK-button.
I can't do it using CSS because width of this button is set in inline-styles like:
http://img864.imageshack.us/img864/4717/toolbar2.png
And the width of the other elements such as the title is set in a similar way:
http://img338.imageshack.us/img338/4481/toolbaru.png

With the increase in the font size, everything starts to crash.
Who sets these inline styles? Some script? Can I delete it?

[Martin1982]

It is set when the components are being created because they are calculated.
If you want to set a fixed width you can do that in the component (button) configuration like this:

config: {
  items: [
    { xtype: 'button', text: 'btn text', width: 300 },
    { xtype: 'button', text: 'Second button', width: 175 }
  ]
} 

In this example the width is in pixels

[Cypher-kun]

It is set when the components are being created because they are calculated.
If you want to set a fixed width you can do that in the component (button) configuration like this:

config: {
  items: [
    { xtype: 'button', text: 'btn text', width: 300 },
    { xtype: 'button', text: 'Second button', width: 175 }
  ]
} 

In this example the width is in pixels

Looks like solution but where do I put this code to set the width of standard BACK-button? After all, it is automatically created.

In the other case I think that a some JS-script is running here, which calculates the width of the toolbar elements such as BACK-button or TITLE. Changing some styles like font-size calculations goes incorrect.

[Cypher-kun]

I found a discussion of the problem:
http://www.sencha.com/forum/showthread.php?197851-How-can-I-fix-a-backbutton-width-in-Navigation-View

[Martin1982]

Did that other thread help you out? If so, please mark this thread as answered.

[Cypher-kun]

Did that other thread help you out?

no

[Martin1982]

Could you please post the code where the bar containing the button is defined (probably one of this files in your view-directory if you follow the MVC pattern)?

[Cypher-kun]

I only do the front-end. Views are writing by my programmers. I think that you are interested in MAIN.JS. But there is nothing unusual. After all, the BACK-button is generated automatically by standart.

I'm trying to set the width of the BACK-button, as was suggested in the next topic by link in previeus post:

backButton  : {
        align  : 'left',
        ui     : 'back',
        hidden : true,
        width  : 50
    }

But nothing happens.


MAIN.JS

Ext.define("CheInvest.view.Main", {
    extend: 'Ext.navigation.View',
    requires: ['CheInvest.view.Home'],
    alias: 'navigationview',
    id: 'navView',
    
    
    config: {
        defaultBackButtonText: 'Назад',    
        scrollable: false,
        navigationBar: {
            id: 'navBar',
            docked: 'top',
            backButton  : {
                align  : 'left',
                ui     : 'back',
                hidden : true,
                width  : 50
            },
            items: [
            {
                xtype: 'button',
                text: 'Выход',
                align: 'right',
                itemId: 'logoutButton'
            }
            ]
        },
        
        items: [
        {
            xtype: 'homepanel',
            title: 'Челябинвестбанк'
        }
        ],
        
        listeners: [
        {
            fn: 'onLogoutButtonTap',
            event: 'tap',
            delegate: '#logoutButton'
        }
        ]
    },
        
    onLogoutButtonTap: function(button, e, options) {
        var store = Ext.create('Ext.data.Store', {
            model: "CheInvest.model.User"
        });

        store.load();
        store.removeAll();
        store.sync();
        
        button.up('navigationview').pop(5);
    }
});

[Martin1982]

if you change de width from 50 to something like 150, what style-attribute is being rendered on the button?

[Cypher-kun]

Width that I set in MAIN.JS, did not appear on the page. Width of the BACK-button (TITLE too) depending on the width of the window and set in inline-style, as in the screenshot:
http://img864.imageshack.us/img864/4717/toolbar2.png