1. #1
    Touch Premium Member
    Join Date
    Nov 2010
    Posts
    19
    Vote Rating
    0
    jeffbvox is on a distinguished road

      0  

    Default Unanswered: Adding cls to back button does not style the left <

    Unanswered: Adding cls to back button does not style the left <


    Hello Sencha Folks! I'm trying to figure out an issue that I'm having with styling a toolbar back button: I am trying to style a back button using a css class to set the background-image to a linear gradient using an embedded style in the html doc. The left side of the button does not receive the background though.

    Here is code to illustrate my problem:

    HTML Code:
    <!doctype html><html><head>    <meta name="viewport" content="target-densitydpi=160, width=320, initial-scale=1.0" />    <meta name="apple-mobile-web-app-capable" content="yes" />    <title>Test</title>    <link rel="stylesheet" href="sencha-touch.css" type="text/css">    <script type="text/javascript" src="sencha-touch.js"></script>    <script type="text/javascript" src="app.js"></script>    <style type="text/css">        .spinAppButton {            background-image: -webkit-linear-gradient(#BADEF7,#3a5e77)!important;        }
            .spinAppButtonDown {            background-image: -webkit-linear-gradient(#3a5e77,#BADEF7)!important;        }    </style></head><body>
    </body></html>
    app.js:

    Code:
    Ext.regApplication({
        defaultTarget   : "viewport",
        name            : "testapp",
        useHistory      : true,
    
    
        launch: function() {
            console.log("launch");
            this.viewport = new testapp.views.ViewportClass({
                application: this
            });
            Ext.dispatch({controller: "testcontroller", action: "displayView"});
    
    
        }
    });
    
    
    Ext.regController("testcontroller", {
    
    
        displayView: function() {
            testapp.views.toolbarTest = this.render({xtype: "toolbarView"});
            this.application.viewport.setActiveItem(testapp.views.toolbarTest);
        }
    
    
    });
    
    
    testapp.views.ToolbarView = Ext.extend(Ext.Panel, {
        layout: {
            type: "vbox",
            pack: "center",
            align: "center"
        },
        dockedItems: [
            {
                xtype: "toolbar",
                dock: "top",
                title: "< is not styled!",
                items: [
                    {
                        text: "Back",
                        ui: "back",
                        //componentCls: "spinAppButton",
                        cls: "spinAppButton",
                        pressedCls: "spinAppButtonDown"
                    }
                ]
            }
        ],
    
    
        initComponent: function() {
            testapp.views.ToolbarView.superclass.initComponent.apply(this, arguments);
        }
    });
    
    
    Ext.reg('toolbarView', testapp.views.ToolbarView);
    
    
    testapp.views.ViewportClass = Ext.extend(Ext.Panel, {
        layout:
            {
                type: 'card',
                pack: 'center',
                align: 'center'
            },
        fullscreen          : true,
        cardSwitchAnimation : 'slide',
        cls                 : "homeBackground",
        initComponent: function() {
            testapp.views.ViewportClass.superclass.initComponent.apply(this, arguments);
        }
    });
    Anyone have any ideas? I need to use an embedded stylesheet for this due to other limitations I have.

    Thanks!

  2. #2
    Sencha User alessandronunes's Avatar
    Join Date
    Jul 2012
    Location
    Salvador/BA
    Posts
    11
    Vote Rating
    0
    alessandronunes is on a distinguished road

      0  

    Default


    On the card:

    Code:
    config: {            
            defaultBackButtonText: '',
            navigationBar: {
                backButton: {
                    iconCls: 'back',
                    ui: 'plain'
                }
            }
    }
    On the CSS:

    Code:
    //Back
    .x-button-icon.back {
        background-image: url(../../resources/images/bt_seta.png);
        background-repeat: no-repeat;
    }

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..."