PDA

View Full Version : [CLOSED] V2.1 FieldCls Change



Aurelio
Aug 30, 2012, 8:55 PM
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

geoffrey.mcgill
Aug 30, 2012, 11: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.

Aurelio
Aug 31, 2012, 3:05 PM
Hi..geoffrey

It's OK..

Thanks
Aurelio