What's New?

[CLOSED] V2.1 FieldCls Change

  1. #1
    Aug 30, 2012, 7:55 PM

    [CLOSED] V2.1 FieldCls Change

    Hi, is possible change the FieldCls client-side whit javascrip ?

    I test this but not change the color of the background 

    <%@ 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></title>
    <style type="text/css">
    
     .green
    {
         background-color: Green !important;
         background-image: none; 
         text-transform:uppercase;       
    }
    
     .yellow
    {
         background-color: Yellow !important;
         background-image: none; 
         text-transform:uppercase;       
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="">
    </ext:ResourceManager>
   <ext:FormPanel ID="FormPanel1" runat="server" Region="Center" title="Test fieldCls">
            <Items>
                <ext:RadioGroup ID="rbArtTip" runat="server" FieldLabel="Background color" >
                    <Items>
                        <ext:Radio ID="rbStandard" runat="server" BoxLabel="Green" Checked="true" MarginSpec="0 0 0 -5" >
                        
                            <Listeners>
                                <Change Handler="changeColorGreen();" />
                            </Listeners>
                            
                        </ext:Radio>
                        <ext:Radio ID="rbTaglieColori" runat="server" BoxLabel="Yellow" MarginSpec="0 0 0 -70" >
                            <Listeners>
                                <Change Handler="changeColorYellow();" />
                            </Listeners>
                        </ext:Radio>
                    </Items>
                    
                </ext:RadioGroup>
                <ext:TextField ID="txtColor" runat="server" FieldCls="green">
                </ext:TextField>
            </Items>
        </ext:FormPanel>

      
        <script type="text/javascript">

            function changeColorGreen() {

                if (rbStandard.checked) {
                    txtColor.fieldCls = "green";
                }

            };

            function changeColorYellow() {

                if (rbTaglieColori.checked) {
                    txtColor.fieldCls = "yellow";
                }

            }
       
       
        </script>
       
    </form>
</body>
</html>
    Thanks
    Aurelio
    Last edited by Daniil; Aug 31, 2012 at 2:46 PM. Reason: [CLOSED]
  2. #2
    Aug 30, 2012, 10:02 PM
    Hi,
    You can use the following JavaScript to change the color of the input field.

    Example

    text.inputEl.replaceCls(oldColor, newColor);
    The following code sample demonstrates the complete scenario, with some code clean-up of your original.

    Example

    <%@ Page Language="C#" %> 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<!DOCTYPE html>


<html>
<head runat="server">
    <title>Ext.NET Example</title>
    
    <style type="text/css">
        .green {
            background-color : green !important;
            background-image : none; 
            text-transform   : uppercase;       
        }
     
        .yellow {
            background-color : yellow !important;
            background-image : none; 
            text-transform   : uppercase;       
        }
    </style>
       
    <script type="text/javascript">
        var changeColor = function (radio, text, oldColor, newColor) {
            if (radio.checked) {
                text.inputEl.replaceCls(oldColor, newColor);
            }
        };
    </script>
</head>
<body>
<form runat="server">
    <ext:ResourceManager runat="server" Namespace="" />


    <ext:FormPanel runat="server" title="Example">
        <Items>
            <ext:RadioGroup runat="server" FieldLabel="Background Color" >
                <Items>
                    <ext:Radio runat="server" BoxLabel="Green" Checked="true">
                        <Listeners>
                            <Change Handler="changeColor(this, txtColor, 'yellow', 'green');" />
                        </Listeners>
                    </ext:Radio>


                    <ext:Radio runat="server" BoxLabel="Yellow">
                        <Listeners>
                            <Change Handler="changeColor(this, txtColor, 'green', 'yellow');" />
                        </Listeners>
                    </ext:Radio>
                </Items>
            </ext:RadioGroup>


            <ext:TextField ID="txtColor" runat="server" FieldCls="green" />
        </Items>
    </ext:FormPanel>
</form>
</body>
</html>
    Hope this helps.
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Aug 31, 2012, 2:05 PM
    Hi..geoffrey

    It's OK..

    Thanks
    Aurelio

Similar Threads

  1. [CLOSED] Change background color of textfield, textarea, combobox after text change
    By Sharon in forum 1.x Legacy Premium Help
    Replies: 12
    Last Post: Jun 17, 2009, 12:07 PM

Posting Permissions