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:0;
    right:0;
    bottom:0;
    left:0;
    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:0;
    -webkit-border-radius:0;
    border-radius:0;
    padding:0;
    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:1;
}
.btwo {
    -webkit-box-flex:2;
}
.bthree {
    -webkit-box-flex:3;
}
/*#endregion*/

效果：

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