[CLOSED] BackGround TextField

  1. #1

    [CLOSED] BackGround TextField

    I am using the following example "https://examples2.ext.net/ # / GridPanel / multihead / Filter /" to run filters.
    I would like to apply a background color
    <ext:TextField ID="FilterAN_EMAIL" runat="server" EnableKeyEvents="true">
                                                                    <Listeners>
                                                                        <KeyUp Handler="applyFilter(this);" Buffer="250" />
                                                                    </Listeners>
                                                                </ext:TextField>
    in when you have some content.
    How?

    ex:
    If the TextField does not contain content, the bottom of the TextField should be left blank.
    If the TextField contain content, the bottom of the TextField should stay in yellow.
    Last edited by Daniil; May 17, 2011 at 1:53 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Please use respective css classes.

    To set/remove css class for TextField please use .addClass() and .removeClass() respectively.
    Last edited by Daniil; May 19, 2011 at 6:06 PM.
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi,

    Please use respective css classes.

    To set/remove css class for TextField please use .addClass() and removeClass() respectively.
    Like this in java script?
  4. #4
    Here you are.

    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 Example</title>
    
        <script type="text/javascript">
            var onKeyUp = function () {
                var v = this.el.dom.value;
                if (!Ext.isEmpty(v)) {
                    this.removeClass("empty");
                    this.addClass("non-empty");
                } else {
                    this.removeClass("non-empty");
                    this.addClass("empty");
                }
            }
        </script>
    
        <style type="text/css">
            .empty {
                background-color: yellow;
                background-image: none;
            }
            .non-empty {
                border-bottom-color: yellow;
                border-bottom-width: 5px;
            }
        </style>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:TextField runat="server" Cls="empty" EnableKeyEvents="true">
            <Listeners>
                <KeyUp Fn="onKeyUp" />
            </Listeners>
        </ext:TextField>
        </form>
    </body>
    </html>
  5. #5
    Quote Originally Posted by Daniil View Post
    Here you are.

    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 Example</title>
    
        <script type="text/javascript">
            var onKeyUp = function () {
                var v = this.el.dom.value;
                if (!Ext.isEmpty(v)) {
                    this.removeClass("empty");
                    this.addClass("non-empty");
                } else {
                    this.removeClass("non-empty");
                    this.addClass("empty");
                }
            }
        </script>
    
        <style type="text/css">
            .empty {
                background-color: yellow;
                background-image: none;
            }
            .non-empty {
                border-bottom-color: yellow;
                border-bottom-width: 5px;
            }
        </style>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:TextField runat="server" Cls="empty" EnableKeyEvents="true">
            <Listeners>
                <KeyUp Fn="onKeyUp" />
            </Listeners>
        </ext:TextField>
        </form>
    </body>
    </html>
    Thanks, working perfectly

Similar Threads

  1. TextField Background
    By mrd in forum 1.x Help
    Replies: 3
    Last Post: Feb 27, 2012, 12:06 PM
  2. [CLOSED] V2.0 TextField background
    By Aurelio in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Jan 16, 2012, 8:46 AM
  3. Dynamically change textfield background color
    By VALUELAB in forum 1.x Help
    Replies: 0
    Last Post: Mar 04, 2011, 4:50 PM
  4. [CLOSED] the css background-color:Transparent does not work for TextField
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 10, 2010, 3:17 PM
  5. Replies: 2
    Last Post: May 20, 2009, 3:21 PM

Posting Permissions