[CLOSED] FontFamily style in ComboBox

  1. #1

    [CLOSED] FontFamily style in ComboBox

    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.
    Last edited by Daniil; Jun 01, 2012 at 10:22 AM. Reason: [CLOSED]
  2. #2
    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>
    Last edited by Daniil; Jun 01, 2012 at 9:56 AM. Reason: Was missed closing </form> tag
  3. #3
    Thanks,

    It works well unless the first time, when "combo.inputEl" is undefined. I will check for it in my code.
  4. #4
    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>
  5. #5
    Perfect.

    Thank you very much, again.

Similar Threads

  1. Replies: 4
    Last Post: Nov 30, 2011, 5:25 AM
  2. Custom style for selected ComboBox item
    By nextSTEP in forum 1.x Help
    Replies: 1
    Last Post: Sep 20, 2010, 12:18 PM
  3. [CLOSED] Div does not take the style.
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 31, 2010, 11:29 AM
  4. [CLOSED] ComboBox style help
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 12, 2009, 7:52 AM

Tags for this Thread

Posting Permissions