sencha touch 2.2.1 这个版本使用了新的按钮模式,不过他只提供了少部分的按钮样式。我们可以加一些自定义的ico样式

新加ico样式lower

 .x-button .x-button-icon.lower:before {
position:absolute;
top:;
right:;
bottom:;
left:;
text-align:center;
font-family:"Pictos";
content:"_";
}

以在list中使用示例

Ext.define('app.view.eatery.List', {
alternateClassName: 'eateryList',
extend: 'Ext.List',
xtype: 'eateryList',
config: {
cls: 'list',
itemTpl: new Ext.XTemplate(
'<div class="bh">',
'<div class="img" style="background-image: url({imageurl});"></div>',
'<div class="bone content"><div>{name}</div><div>{price}</div></div>',
'<div class="bv imgBtn">',
'<div class="x-button-normal x-button x-iconalign-center x-layout-box-item x-stretched btn"><span class="x-button-icon x-shown lower" doit="showWeibo"></span></div>',
'1',
'<div class="x-button-normal x-button x-iconalign-center x-layout-box-item x-stretched btn"><span class="x-button-icon x-shown add" doit="showWeibo"></span></div>',
'</div>',
'</div>'),
store: 'cartes',
selectedCls: '',
pressedCls: ''
}
});

css

.list .btn样式中color:Yellow;决定ico颜色

/*#region 展示列表 */

.list .img {
width:2.5em;
height:2.5em;
background-size:100%;
}
.list .content {
margin-left:0.5em;
}
.list .imgBtn {
text-align:center;
}
.list .btn {
width:2em;
font-size:0.6em;
-moz-border-radius:;
-webkit-border-radius:;
border-radius:;
padding:;
color:Yellow;
margin:0 auto;
}
/*#endregion*/
/*#region 盒模型 */ .bh {
display:-webkit-box;
-webkit-box-orient:horizontal;
}
.bv {
display:-webkit-box;
-webkit-box-orient:vertical;
}
.bone {
-webkit-box-flex:;
}
.btwo {
-webkit-box-flex:;
}
.bthree {
-webkit-box-flex:;
}
/*#endregion*/

效果:

如果使用button控件,直接指定iconCls为lower即可

sencha touch 2.2.1 自定义彩色图标按钮(button+ico)的更多相关文章

  1. sencha touch/Ext Js 6 + 自定义扩展的用法

    app.js中加入以下代码 //指定ux起调目录 Ext.Loader.setPath({ 'ux': 'app/ux' }); 在app目录中创建一个ux文件夹 假如我们使用这个扩展,扩展地址:ht ...

  2. 【WPF】自定义形状的按钮Button

    需求:做一个如下图所示的多边形按钮. <!-- 特殊形状的按钮 --> <Grid> <Polygon Points="0,0 140,0 190,42 140 ...

  3. 跟我一起玩转Sencha Touch 移动 WebApp 开发(一)

    1.目录 移动框架简介,为什么选择Sencha Touch? 环境搭建 创建项目框架,框架文件简介 创建简单Tabpanel案例 自定义图标的方式 WebApp产品测试和发布 HTML5离线缓存 发布 ...

  4. 跟我一起玩转Sencha Touch 移动 WebApp 开发1

    跟我一起玩转Sencha Touch 移动 WebApp 开发(一) 1.目录 移动框架简介,为什么选择Sencha Touch? 环境搭建 创建项目框架,框架文件简介 创建简单Tabpanel案例 ...

  5. Sencha Touch开发完整流程快速讲解

    1.目录 移动框架简介,为什么选择Sencha Touch? 环境搭建 创建项目框架,框架文件简介 创建简单Tabpanel案例 自定义图标的方式 WebApp产品测试和发布 HTML5离线缓存 发布 ...

  6. sencha touch的开源插件和例子

    写了好久的sencha touch,没想到换工作竟然一年多没有搞了.因为项目的缘故收集了好多的组件,由于懒惰,没有整理,现在想想有点后悔了,再加上如果就这样丢弃,感觉有些遗憾,今天整理了一下放在git ...

  7. Sencha Touch 2.2.1 Custom Icon 自定义图标

    ST2.2版本竟然又改变了sass中自定义图标的添加方式,在2.2以前采用的是这种base64的方式,详见:http://www.cnblogs.com/qidian10/archive/2012/1 ...

  8. sencha touch 扩展篇之使用sass自定义主题样式 (下)通过css修改官方组件样式以及自定义图标

    上一讲我们讲解了如何使用官方的api来修改主题样式,这讲我们继续讲解sass的样式修改, 编译官方自带的主题包  在生成的项目以及官方sdk的目录下,自带了一些主题sass包,我们也可以通过修改sas ...

  9. sench touch 自定义小图标(转)

    自定义图标的方法 Sencha touch自带图标有限,有时需要自己添加图标.下面介绍自定义图标的方法: 首先需要生成图标字体.有许多网站提供在线生成图标字体的功能,比如IcoMoon,通过这个网站, ...

随机推荐

  1. 查看Ubuntu的版本和系统版本

    命令行语句:lsb_release -a 命令行语句:uname -a

  2. 【Intel AF 2.1 学习笔记一】AF程序结构

    Intel App Framework(原jqMobi)是用来开发hybrid app的开源免费框架,被intel收编之后发布了最新的2.1版本,最近正在学习.af的所谓程序结构,就是AF网页的架构, ...

  3. 【WP8】自定义控件

    1.测量和安排布局:MeasureOverride, ArrangeOverride //测量(传入控件的可用大小) protected override Size MeasureOverride(S ...

  4. 用好这6个APP,学英语SO EASY!

      http://www.jianshu.com/p/30a27af18340  

  5. Android学习笔记——保存文件(Saving Files)

              本人邮箱:JohnTsai.Work@gmail.com,欢迎交流讨论.                 欢迎转载,转载请注明网址:http://www.cnblogs.com/J ...

  6. SQL2005数据库置疑处理

    2005中遇到置疑.丢失日志时按照网上常见的MSSQL2000修复方法来做, 结果发现行不通,甚至连一步都做不下去.其实,在MSSQL2005在处理置疑问题的思 路与MSSQL2000是一致的,但具体 ...

  7. Unity UGUI 的RectTransform参数的设置

    1.改变RectTransform的top GetComponent<RectTransform>().offsetMax = new Vector2(GetComponent<Re ...

  8. 基于.NET平台常用的框架

    分布式缓存框架: Microsoft Velocity:微软自家分布式缓存服务框架. Memcahed:一套分布式的高速缓存系统,目前被许多网站使用以提升网站的访问速度. Redis:是一个高性能的K ...

  9. 解决PHP中文乱码问题

    1.指定链接字符串编码: $mysql_server_name="localhost"; //数据库服务器名称 $mysql_username="root"; ...

  10. MTK 精简ROM

    PhaseBeam.apk--------------------------------------动态壁纸光之韵律(可删) Phone.apk--------------------------- ...