PDA

View Full Version : ComboBox DisplayTpl shows HTML code



mjhaston
14 Dec 2012, 9:08 PM
I've got a ComboBox that I'm trying to format with CSS. The getInnerTpl of the box works just fine, but I can't get the DisplayTpl to match. When I try to use the same HTML it displays all of the HTML code and doesn't render a nice result.

I've got it working for now with the DisplayTpl below, but I'd really like the getInnerTpl and DisplayTpl to be the same.





#left {
position: absolute;
left: 10px;
top: 0px;
width: 200px;
}
#center {
margin-left: 200px;
margin-right: 150px;
}
#right {
position: absolute;
right: 10px;
top: 0px;
width: 200px;
}







// ComboBox with a custom item template
var searchBox = Ext.create('Ext.form.field.ComboBox', {
name : 'searchBox',
ref : '../searchBox',
id : 'searchBox',
valueField : 'value',
width : 600,
store : objectStore,
queryMode : 'remote',
emptyText : 'Start typing the object to search',
fieldStyle : 'text-transform:uppercase',
listConfig : {
getInnerTpl : function() {
return '<div class="x-combo-list-item"><div id="left">Object:&nbsp;<b>{object}</b></div><div id="center">Library:&nbsp;<b>{library}</b></div><div id="right">Type:&nbsp;<b>{type}</b>&nbsp;({attribute})</div></div>';
}
},
displayTpl: '<tpl for=".">' +
'Object: {object} Library: {library} Type: {type} ({attribute})' +
'</tpl>'
}
});



Attached are the combo box drop down and then what the user sees after their selection.

skirtle
14 Dec 2012, 10:59 PM
ComboBox uses a text input to display the selected value. It's not possible to include HTML tags in a text input.

If you don't need the user to be able to type in a value then there are other options. e.g. You could hide the text input and put a div in its place. Or maybe use a button with a menu styled to look like a combobox? Neither option is trivial to implement.

By the way, you really shouldn't be using element ids like that. Use classes instead.

mjhaston
15 Dec 2012, 6:57 AM
What you mean by using class instead? Sorry, I'm just moving to 4 from 3.4 and I still haven't really learned ExtJS properly. I really want to take a class to learn it from the ground up!

Thanks for your great explanation.

skirtle
15 Dec 2012, 4:16 PM
I just meant use CSS classes rather than element ids for your CSS selectors.