sencha touch 2.2.1 自定义彩色图标按钮(button+ico)

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

新加ico样式lower

 1 .x-button .x-button-icon.lower:before {

 2     position:absolute;

 3     top:0;

 4     right:0;

 5     bottom:0;

 6     left:0;

 7     text-align:center;

 8     font-family:"Pictos";

 9     content:"_";

10 }

以在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即可