CODEWITHSUNDEEP
androidbuttonsencha-touchsencha-touch-2
Arindam Mukherjee
Arindam Mukherjee

Reputation: 2285

How to create a image button in sencha touch?

I want to create image buttons in Sencha touch 2 application. For that i define a cls properties for button and added in app.css file. But the background is not showing for the buttons..

Here is my index.html class

    <!DOCTYPE html>
<!-- Auto Generated with Sencha Architect -->
<!-- Modifications to this file will be overwritten. -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Teritree</title>
    <script type="text/javascript" id="phonegap" src="cordova-1.8.1.js"></script>
    <script src="sencha-touch-all.js" type="text/javascript"></script> 
    <link rel="stylesheet" type="text/css" href="app.css"/>
    <script type="text/javascript" src="app/app.js"></script>
     <script>
        Ext.Loader.setConfig({ disableCaching: false });
        Ext.Ajax.setDisableCaching(false);    
    </script>
    <script type="text/javascript">
        if (!Ext.browser.is.WebKit) {
            alert("The current browser is unsupported.\n\nSupported browsers:\n" +
                "Google Chrome\n" +
                "Apple Safari\n" +
                "Mobile Safari (iOS)\n" +
                "Android Browser\n" +
                "BlackBerry Browser"
            );
        }
    </script>
</head>
<body></body>
</html>

Here is my button code:

xtype: 'button',
                            docked: 'left',
                            cls: 'wishlogbtn',
                            height: 200,
                            margin: 50,
                            width: 150

And i added ths line in the app.css file:

  .wishlogbtn
{
    background-image: url('../wishlog.png');
}

I dont know whether i am doing coreect or not as i am new to this platform. Please help..

Upvotes: 0

Views: 8075

Answers (2)

Arindam Mukherjee
Arindam Mukherjee

Reputation: 2285

i am able to resolve it. The problem is with path of the image.

Upvotes: 0

Tine M.
Tine M.

Reputation: 444

I'm not sure but you can try this:

.wishlogbtn
{
    background-image: url('../wishlog.png') !important;
}

or 

.wishlogbtn
    {
-webkit-mask-image: url('../wishlog.png');
background: white;/*or smthing*/
}

If all other fails, you can just use html property 

xtype:'button',
html:'<img src="..."/>'

There is also a lot of available icons in <sencha_dir>\resources\themes\images\default\pictos\ that you can include in your .scss (SASS) file with 

@include pictos-iconmask('user');/*replace "user" with any name of .png file in that folder"*/

and then you can use it like that in sencha:

xtype: 'button',
iconMask: true,
iconCls: 'user' /* use the same name as in .scss*/

Upvotes: 1

Related Questions