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
效果图: