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