如何在sencha touch中创建图像按钮？

我想在Sencha touch 2应用程序中创建图像按钮。为此我定义了一个按钮的cls属性并添加到app.css文件中。但背景是不显示的按钮..如何在sencha touch中创建图像按钮？

这里是我的index.html级

<!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>

这里是我的按钮代码：

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

并且我增加的部份线的应用.css文件：

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

我不知道我是否在做coreect，因为我是这个平台的新手。请帮助..

来源

2012-07-05 Arindam Mukherjee

您是否已将“！important”添加到该属性中？ – 2012-07-05 14:01:30

但是，当我点击按钮，我想给它的焦点或改变背景..我可以做到这一点？ – 2012-07-05 14:10:24

只是一个简单的JavaScript问题，你可以谷歌它;） – 2012-07-05 14:14:25

我能够解决这个问题。问题在于图像的路径。

来源

2012-07-05 14:17:18

我相信的决议是一个CSS文件中指定的'url（）'必须是相对于CSS文件，而不是使用CSS的HTML页面。 – StuartLC 2013-01-25 12:02:56

我不知道，但你可以试试这个：

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

或

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

如果所有其他失败，你可以使用HTML属性

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

还有很多可用的图标<sencha_dir> \ resources \ themes \ images \ defa ULT \ PICTOS \您可以在您的.scss（SASS）与

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

文件，然后你可以在煎茶使用它像：

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

来源

2012-07-05 14:07:12 smoke4fun

如何在sencha touch中创建图像按钮？

回答

相关问题