1. #1
    Sencha User
    Join Date
    Apr 2012
    Location
    Mother Russia
    Posts
    13
    Vote Rating
    0
    Cypher-kun is on a distinguished road

      0  

    Default Answered: Theming. Trouble with inline styles.

    Answered: Theming. Trouble with inline styles.


    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?

  2. That's odd, maybe that's a Navigationbar behavior.
    Here are a couple of things you might want to check;
    • Is this still happening when converting the navigationbar to a toolbar?
    • Are you using a packaged or dev version?
    • Is there a controller which adjusts sizes?
    All in all, your programmers have much influence on your styling and for problems like these it helps to do some pair programming.

  3. #2
    Sencha Premium Member Martin1982's Avatar
    Join Date
    Aug 2011
    Location
    The Netherlands
    Posts
    109
    Answers
    4
    Vote Rating
    0
    Martin1982 is on a distinguished road

      0  

    Default


    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:
    PHP Code:
    config: {
      
    items: [
        { 
    xtype'button'text'btn text'width300 },
        { 
    xtype'button'text'Second button'width175 }
      ]

    In this example the width is in pixels
    Allround web developer, conference organiser and speaker.

  4. #3
    Sencha User
    Join Date
    Apr 2012
    Location
    Mother Russia
    Posts
    13
    Vote Rating
    0
    Cypher-kun is on a distinguished road

      0  

    Default


    Quote Originally Posted by Martin1982 View Post
    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:
    PHP Code:
    config: {
      
    items: [
        { 
    xtype'button'text'btn text'width300 },
        { 
    xtype'button'text'Second button'width175 }
      ]

    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.

  5. #4
    Sencha User
    Join Date
    Apr 2012
    Location
    Mother Russia
    Posts
    13
    Vote Rating
    0
    Cypher-kun is on a distinguished road

      0  

  6. #5
    Sencha Premium Member Martin1982's Avatar
    Join Date
    Aug 2011
    Location
    The Netherlands
    Posts
    109
    Answers
    4
    Vote Rating
    0
    Martin1982 is on a distinguished road

      0  

    Default


    Did that other thread help you out? If so, please mark this thread as answered.
    Allround web developer, conference organiser and speaker.

  7. #6
    Sencha User
    Join Date
    Apr 2012
    Location
    Mother Russia
    Posts
    13
    Vote Rating
    0
    Cypher-kun is on a distinguished road

      0  

    Default


    Quote Originally Posted by Martin1982 View Post
    Did that other thread help you out?
    no

  8. #7
    Sencha Premium Member Martin1982's Avatar
    Join Date
    Aug 2011
    Location
    The Netherlands
    Posts
    109
    Answers
    4
    Vote Rating
    0
    Martin1982 is on a distinguished road

      0  

    Default


    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)?
    Allround web developer, conference organiser and speaker.

  9. #8
    Sencha User
    Join Date
    Apr 2012
    Location
    Mother Russia
    Posts
    13
    Vote Rating
    0
    Cypher-kun is on a distinguished road

      0  

    Default


    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:
    Code:
    backButton  : {
            align  : 'left',
            ui     : 'back',
            hidden : true,
            width  : 50
        }
    But nothing happens.


    MAIN.JS
    Code:
    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);
        }
    });

  10. #9
    Sencha Premium Member Martin1982's Avatar
    Join Date
    Aug 2011
    Location
    The Netherlands
    Posts
    109
    Answers
    4
    Vote Rating
    0
    Martin1982 is on a distinguished road

      0  

    Default


    if you change de width from 50 to something like 150, what style-attribute is being rendered on the button?
    Allround web developer, conference organiser and speaker.

  11. #10
    Sencha User
    Join Date
    Apr 2012
    Location
    Mother Russia
    Posts
    13
    Vote Rating
    0
    Cypher-kun is on a distinguished road

      0  

    Default


    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

Thread Participants: 1

Tags for this Thread