[CLOSED] [1.x] - No effect when change Label.StyleSpec inside a CompositeField

[drkoh]

Hi, I have following code, and the label's color doesn't changed. Anyway to force update on the label after applying style? Thanks.

<ext:FormPanel ID="FormPanel_Test" runat="server" LabelAlign="Right" LabelWidth="140" Border="false">
        <Items>
            <ext:CompositeField runat="server" FieldLabel="Trading Group Type">
                <Items>
                    <ext:ComboBox runat="server" ID="combo1" FieldLabel="Test" SelectOnFocus="true" Width="100" TriggerAction="All" Resizable="true" Editable="false" TypeAhead="true" AllowBlank="false" SelectedIndex="0">
                        <Items>
                            <ext:ListItem Text="A" Value="A" />
                            <ext:ListItem Text="B" Value="B" />
                            <ext:ListItem Text="C" Value="C" />
                        </Items>
                        <Listeners>
                            <Select Handler="if (#{combo1}.getValue() == 'A') { #{label1}.styleSpec = 'color:gray'; } else { #{label1}.styleSpec = 'color:black'; }" />
                        </Listeners>
                    </ext:ComboBox>
                    <ext:Label runat="server" ID="label1" Text="TestLabel" StyleSpec="margin:3px" />
                    <ext:Checkbox runat="server" ID="checkbox1" />
                </Items>
            </ext:CompositeField>
</Items>
</ext:FormPanel>

[Baidaly]

Hello!

Try the following Handler:

<Select Handler="if (#{combo1}.getValue() == 'A') { #{label1}.el.setStyle('color', 'gray'); } else { #{label1}.el.setStyle('color', 'black'); }" />

[Daniil]

Hi @drkoh,

Just to clarify. The StyleSpec is a config option. Changing it after rendering doesn't make any sense.

[ViDom]

Hi @drkoh

You should consider make it by adding and removing class of your label.

pls try change this :

if (#{combo1}.getValue() == 'A') { #{label1}.styleSpec = 'color:gray'; } else { #{label1}.styleSpec = 'color:black'; }

to

if (#{combo1}.getValue() == 'A') { if(!#{label1}.hasClass('myGray') && !#{label1}.hasClass('myBlack')){ #{label1}.addClass('myGray');}else{#{label1}.replaceClass('myBlack','myGray'); }} else { if(!#{label1}.hasClass('myBlack') && !#{label1}.hasClass('myGray')){#{label1}.addClass('myBlack');}else{ #{label1}.replaceClass('myGray','myBlack');  }}

and in css:

.myGray{
   color: gray;
}
.myBlack{
   color: black;
}

You sould check if

#{label}

element doesn't contain class 'myGray'. ofcourse you can managa as well on styles but this way is more maintainable. for example if you will need for some reasons change kolor from gray to green you need to do it only in css and it will be work:) You can think about this solution like an investments for future.

hope this help:)

[drkoh]

Thanks @Baidaly for solution (please close thread - works).
And thanks @Danil for clarification and @ViDom for suggestion.