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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi