sencha touch 2.2.1 自定义彩色图标按钮(button+ico)
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)的更多相关文章
- sencha touch/Ext Js 6 + 自定义扩展的用法
app.js中加入以下代码 //指定ux起调目录 Ext.Loader.setPath({ 'ux': 'app/ux' }); 在app目录中创建一个ux文件夹 假如我们使用这个扩展,扩展地址:ht ...
- 【WPF】自定义形状的按钮Button
需求:做一个如下图所示的多边形按钮. <!-- 特殊形状的按钮 --> <Grid> <Polygon Points="0,0 140,0 190,42 140 ...
- 跟我一起玩转Sencha Touch 移动 WebApp 开发(一)
1.目录 移动框架简介,为什么选择Sencha Touch? 环境搭建 创建项目框架,框架文件简介 创建简单Tabpanel案例 自定义图标的方式 WebApp产品测试和发布 HTML5离线缓存 发布 ...
- 跟我一起玩转Sencha Touch 移动 WebApp 开发1
跟我一起玩转Sencha Touch 移动 WebApp 开发(一) 1.目录 移动框架简介,为什么选择Sencha Touch? 环境搭建 创建项目框架,框架文件简介 创建简单Tabpanel案例 ...
- Sencha Touch开发完整流程快速讲解
1.目录 移动框架简介,为什么选择Sencha Touch? 环境搭建 创建项目框架,框架文件简介 创建简单Tabpanel案例 自定义图标的方式 WebApp产品测试和发布 HTML5离线缓存 发布 ...
- sencha touch的开源插件和例子
写了好久的sencha touch,没想到换工作竟然一年多没有搞了.因为项目的缘故收集了好多的组件,由于懒惰,没有整理,现在想想有点后悔了,再加上如果就这样丢弃,感觉有些遗憾,今天整理了一下放在git ...
- Sencha Touch 2.2.1 Custom Icon 自定义图标
ST2.2版本竟然又改变了sass中自定义图标的添加方式,在2.2以前采用的是这种base64的方式,详见:http://www.cnblogs.com/qidian10/archive/2012/1 ...
- sencha touch 扩展篇之使用sass自定义主题样式 (下)通过css修改官方组件样式以及自定义图标
上一讲我们讲解了如何使用官方的api来修改主题样式,这讲我们继续讲解sass的样式修改, 编译官方自带的主题包 在生成的项目以及官方sdk的目录下,自带了一些主题sass包,我们也可以通过修改sas ...
- sench touch 自定义小图标(转)
自定义图标的方法 Sencha touch自带图标有限,有时需要自己添加图标.下面介绍自定义图标的方法: 首先需要生成图标字体.有许多网站提供在线生成图标字体的功能,比如IcoMoon,通过这个网站, ...
随机推荐
- 查看Ubuntu的版本和系统版本
命令行语句:lsb_release -a 命令行语句:uname -a
- 【Intel AF 2.1 学习笔记一】AF程序结构
Intel App Framework(原jqMobi)是用来开发hybrid app的开源免费框架,被intel收编之后发布了最新的2.1版本,最近正在学习.af的所谓程序结构,就是AF网页的架构, ...
- 【WP8】自定义控件
1.测量和安排布局:MeasureOverride, ArrangeOverride //测量(传入控件的可用大小) protected override Size MeasureOverride(S ...
- 用好这6个APP,学英语SO EASY!
http://www.jianshu.com/p/30a27af18340
- Android学习笔记——保存文件(Saving Files)
本人邮箱:JohnTsai.Work@gmail.com,欢迎交流讨论. 欢迎转载,转载请注明网址:http://www.cnblogs.com/J ...
- SQL2005数据库置疑处理
2005中遇到置疑.丢失日志时按照网上常见的MSSQL2000修复方法来做, 结果发现行不通,甚至连一步都做不下去.其实,在MSSQL2005在处理置疑问题的思 路与MSSQL2000是一致的,但具体 ...
- Unity UGUI 的RectTransform参数的设置
1.改变RectTransform的top GetComponent<RectTransform>().offsetMax = new Vector2(GetComponent<Re ...
- 基于.NET平台常用的框架
分布式缓存框架: Microsoft Velocity:微软自家分布式缓存服务框架. Memcahed:一套分布式的高速缓存系统,目前被许多网站使用以提升网站的访问速度. Redis:是一个高性能的K ...
- 解决PHP中文乱码问题
1.指定链接字符串编码: $mysql_server_name="localhost"; //数据库服务器名称 $mysql_username="root"; ...
- MTK 精简ROM
PhaseBeam.apk--------------------------------------动态壁纸光之韵律(可删) Phone.apk--------------------------- ...