[CLOSED] The best way for handle changing class if control when checkbox are checked or unchecked

[ViDom]

Hi,
I've dynamically creating pair of Ext.net control and ext.net.checkbox.
id of control is like a PropertyName and checkbox id is always PropertyName_checkbox (PropertyName here is dynamically so it's change in every pair).

Now I would like to change class in control(let it be a table tag of control or input) when checkbox is checked class='editable' and when unchecked class='uneditable'. Should I use for this Listeners or DirectEvent of checkbox?

I've tryed with DirectEvent here is what I've create but it doesn't check anything on DOM:
code of directevent check of checkbox

 protected void Check_Event(object sender, DirectEventArgs e)
        {
            Ext.Net.Checkbox checkBoxExt = (Ext.Net.Checkbox)sender;
            string name = ((Ext.Net.Checkbox)sender).ID;
            Control ctrl = checkBoxExt.Parent.FindControl(name.Replace("_checkbox", ""));
            
            switch (ctrl.GetType().Name.ToLower())
            { 
                 case "textfield":
                    ((Ext.Net.TextField)ctrl).ReadOnly = !checkBoxExt.Checked;
                    ((Ext.Net.TextField)ctrl).FieldStyle = ((Ext.Net.TextField)ctrl).FieldStyle.Replace(!checkBoxExt.Checked ? "editable" : "uneditable", "");
                    ((Ext.Net.TextField)ctrl).FieldStyle = checkBoxExt.Checked ? "editable" : "uneditable";
                    break;
                case "checkbox":
                    ((Ext.Net.Checkbox)ctrl).Disabled = checkBoxExt.Checked;
                    break;
                case "textarea":
                    ((Ext.Net.TextArea)ctrl).ReadOnly = !checkBoxExt.Checked;
                    ((Ext.Net.TextArea)ctrl).FieldStyle = ((Ext.Net.TextArea)ctrl).FieldStyle.Replace(!checkBoxExt.Checked ? "editable" : "uneditable","");
                    ((Ext.Net.TextArea)ctrl).FieldStyle = checkBoxExt.Checked ? "editable" : "uneditable";
                    break;
            }
        }

So what your suggestion with that problem. Which style property should I use to make it happend or maybe should I try something better for this like Listner?

Thanks,
ViDom

[Daniil]

Hi @ViDom,

For your requirement it is better to use the Cls property.
http://docs.sencha.com/extjs/4.2.1/#...ponent-cfg-cls

this.TextField1.Cls = "editable";

To change it on the fly you can listen to a Checkbox's Change event (client side, i.e. a Checkbox's Listeners) and use the JavaScript addCls and removeCls methods:

App.TextField1.removeCls("editable");
App.TextField1.addCls("non-editable");

[ViDom]

Hi @ViDom,

For your requirement it is better to use the Cls property.
http://docs.sencha.com/extjs/4.2.1/#...ponent-cfg-cls

this.TextField1.Cls = "editable";

To change it on the fly you can listen to a Checkbox's Change event (client side, i.e. a Checkbox's Listeners) and use the JavaScript addCls and removeCls methods:

App.TextField1.removeCls("editable");
App.TextField1.addCls("non-editable");

ok but how to listen this when I'm not sure which cls should I remove at time of changing it's should working in both sides editable-> non-editable as well as non-editable -> editable. Any suggestion?

[Baidaly]

Hello!

ok but how to listen this when I'm not sure which cls should I remove at time of changing it's should working in both sides editable-> non-editable as well as non-editable -> editable. Any suggestion?

I think in your case it's better to add listener on the Client-Side and use hasCls to check: http://docs.sencha.com/extjs/4.2.1/#...-method-hasCls

[Daniil]

Also you can remove both the classes:

App.TextField1.removeCls(["editable", "non-editable"]);

Then add a class according a Checkbox's checked.

App.TextField1.addCls(checked ? "editable", "non-editable");

[ViDom]

Also you can remove both the classes:

App.TextField1.removeCls(["editable", "non-editable"]);

Then add a class according a Checkbox's checked.

App.TextField1.addCls(checked ? "editable", "non-editable");

ok so I had write this in codebehind:

checkbox.Listeners.Change.Handler = "#{"+control.ID+"}.removeCls(['" + editable + "','" + unEditable + "']); " +
                                                    "#{" + control.ID + "}.addCls(checked? '" + editable + "':'" + unEditable + "');";

And this returns js error checked is undefined. Should I use newValue instead of checked?

[Daniil]

I think yes, you should use the newValue argument.

[ViDom]

I think yes, you should use the newValue argument.

Ok with Cls it working I guess. 1 more thing related how in ext js make field readonly(this should be done on input tab of HTML)?

if I good understand is the Top of Ext.Net controls yes for example TextField top html tag will be table yes?

[Daniil]

Yes, a TextField is rendered as an HTML table element.

To make a field read-only, please use the ReadOnly property.
http://docs.sencha.com/extjs/4.2.1/#...e-cfg-readOnly

[ViDom]

Yes, a TextField is rendered as an HTML table element.

To make a field read-only, please use the ReadOnly property.
http://docs.sencha.com/extjs/4.2.1/#...e-cfg-readOnly

just for be sure I should write this:

#{" + control.ID + "}.readOnly(newValue);

If yes thread can be closed.
Thanks a lot guys for help:)