Adding cls to back button does not style the left <

**jeffbvox** · 21 Sep 2011 7:14 PM

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!

**alessandronunes** · 14 Dec 2012 6:43 AM

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;
}

Adding cls to back button does not style the left <

Thread Tools

Search Thread

Display

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

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

Tags for this Thread