Well, MultiCombo uses its own internal template which is much more complicated.
Here it is:
this.tpl = '<tpl for="."><div class="x-combo-list-item {[this.getItemClass()]}">' +
'<img src="' + Ext.BLANK_IMAGE_URL + '" class="{[this.getImgClass(values)]}" />' +
'<div class="x-mcombo-text">{' + this.displayField + ':htmlEncode}</div></div></tpl>';
Generally, you can set up that template using the MultiCombo's Template property as you've already tried or override the initComponent function.
Example
<script type="text/javascript">
var myInitComponent = function () {
this.editable = false;
if (!this.tpl) {
this.tpl = '<tpl for="."><div class="x-combo-list-item {[this.getItemClass()]}">' +
'<img src="' + Ext.BLANK_IMAGE_URL + '" class="{[this.getImgClass(values)]}" />' +
'<div class="x-mcombo-text">{' + this.displayField + ':htmlEncode}</div></div></tpl>';
this.tpl = new Ext.XTemplate(this.tpl, {
getItemClass : (function () {
if (this.selectionMode === "selection") {
return "x-mcombo-nimg-item";
}
return "x-mcombo-img-item";
}).createDelegate(this),
getImgClass : (function (values) {
if (this.selectionMode === "selection") {
return "";
}
var found = false;
Ext.each(this.checkedRecords, function (record) {
// do not replace == by ===
if (values[this.valueField] == record.get(this.valueField)) {
found = true;
return false;
}
}, this);
return found ? "x-grid3-check-col-on" : "x-grid3-check-col";
}).createDelegate(this, [], true)
});
}
this.checkedRecords = [];
Ext.net.MultiCombo.superclass.initComponent.apply(this, arguments);
if (this.selectionPredefined) {
this.initSelection(this.selectionPredefined);
}
this.on("beforequery", this.onBeforeQuery);
};
</script>
************************
<ext:MultiCombo runat="server">
<CustomConfig>
<ext:ConfigItem Name="initComponent" Value="myInitComponent" Mode="Raw" />
</CustomConfig>
</ext:MultiCombo>