PDA

View Full Version : [CLOSED] FontFamily style in ComboBox



softmachine2011
May 31, 2012, 3:39 PM
Hi,

We are trying to build a ComboBox for a font family selection. Is it possible to show each item in the combo with their own font-family style?

More or less, something like this:


<ext:ComboBox runat="server" Width="120" Editable="false" ColSpan="5">
<Items>
<ext:ListItem Text="Arial" />
<ext:ListItem Text="Courier New" />
<ext:ListItem Text="Verdana" />
</Items>
<SelectedItems>
<ext:ListItem Index="0" />
</SelectedItems>
<Listeners>
<AfterRender Handler="item.getEl().dom.style.fontFamily = this.value;" />
<Change Handler="changeFontFamily(this.value);" />
</Listeners>
</ext:ComboBox>

Thanks in advance.

Daniil
May 31, 2012, 8:20 PM
Hi,

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.NET v2 Example</title>

<script type="text/javascript">
var onChange = function (combo, newValue, oldValue) {
combo.inputEl.applyStyles({
"font-family": newValue
});
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:ComboBox runat="server">
<Items>
<ext:ListItem Text="Arial" />
<ext:ListItem Text="Tahoma" />
<ext:ListItem Text="Times New Roman" />
</Items>
<ListConfig runat="server">
<ItemTpl runat="server">
<Html>
<div style="font-family:{field1};">{field1}</div>
</Html>
</ItemTpl>
</ListConfig>
<Listeners>
<Change Fn="onChange" />
</Listeners>
</ext:ComboBox>
</form>
</body>
</html>

softmachine2011
Jun 01, 2012, 8:11 AM
Thanks,

It works well unless the first time, when "combo.inputEl" is undefined. I will check for it in my code.

Daniil
Jun 01, 2012, 10:04 AM
Please replace

<script type="text/javascript">
var onChange = function (combo, newValue, oldValue) {
combo.inputEl.applyStyles({
"font-family": newValue
});
};
</script>

with

<script type="text/javascript">
var onChange = function (combo, newValue, oldValue) {
if (combo.inputEl) {
setFont(combo, newValue);
} else {
combo.on("afterrender", function () {
setFont(combo, newValue);
});
}
};

var setFont = function (combo, font) {
combo.inputEl.applyStyles({
"font-family": font
});
};
</script>

softmachine2011
Jun 01, 2012, 10:19 AM
Perfect.

Thank you very much, again.