css custome checkbox style in sench list

　    itemTpl : new Ext.XTemplate(
                '<tpl for=".">',
                '<table style="width:100%"><tr>',
                '<td class="reportname" title="reportname">{ReportName}</td>',
                '<td class="categoryname" title="categoryname"> {DisplayName} </td>',
                '<td class="date" title="date">',
                '<tpl if ="DDate">{DDate}',
                '<tpl elseif="MDate">{MDate}',
                '</tpl></td>',
                '<td class="alias" title="alias">{ReportAlias}</td>',
                '<td class="email" title="email">{EMail}</td><td class="status" title="status">',
                '<tpl if ="Status == 0">',
                '<img title="statusimg" src="' + imageDomainUrl
                        + 'resources/images/red.png' + '">',
                '<tpl elseif="Status == 1">',
                '<img title="statusimg" src="' + imageDomainUrl
                        + 'resources/images/orange.png' + '">',
                '<tpl elseif="Status == 2">',
                // '<p class="geneIcon">Generated</p>',
                '<p class="genedate" title="statusdate">{RunDate}<img title="statusimg" src="'
                        + imageDomainUrl + 'resources/images/green.png'
                        + '"></p>',
                '</tpl>',
                '</td>',
                '<td class="check" title="check">',
                '<tpl if ="IncludeInJob">',
                '<input type="checkbox" checked class="reportCheckBox" title="itemCheckBox"/>',
                '<tpl else>',
                '<input type="checkbox" class="reportCheckBox" title="itemCheckBox"/>',
                '</tpl>', '</td>', '</tr></table>', '</tpl>')

 上面是sencha list的itemTpl..............

sench touch list 中嵌入checkbox,自定义其样式，来符合mobile端style

<input type="checkbox" checked class="reportCheckBox"/>

css:

.reportCheckBox {
background: url(../images/check2.png) no-repeat center center;
-webkit-appearance: none;
border: none;
display: inline-block;
font-size: 15px;
padding: 0;
width: 1.65em;
height: 1.65em;
-webkit-border-radius: 0.25em;
vertical-align: middle;
}

input[type=checkbox]:checked {
background: url(../images/check.png) no-repeat center center;
}

这是需要的图片:check2.png  check.png

效果图:

 

转载于:https://www.cnblogs.com/fengjian/archive/2013/04/23/3037971.html