PDA

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



ViDom
Jun 20, 2013, 2:43 PM
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(!chec kBoxExt.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(!check BoxExt.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
Jun 20, 2013, 7:23 PM
Hi @ViDom,

For your requirement it is better to use the Cls property.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.AbstractComponent-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
Jun 20, 2013, 11:02 PM
Hi @ViDom,

For your requirement it is better to use the Cls property.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.AbstractComponent-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
Jun 20, 2013, 11:53 PM
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/#!/api/Ext.dom.AbstractElement-method-hasCls

Daniil
Jun 21, 2013, 5:44 AM
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
Jun 21, 2013, 9:46 AM
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
Jun 21, 2013, 11:57 AM
I think yes, you should use the newValue argument.

ViDom
Jun 21, 2013, 1:04 PM
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
Jun 21, 2013, 1:30 PM
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/#!/api/Ext.form.field.Base-cfg-readOnly

ViDom
Jun 21, 2013, 1:40 PM
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/#!/api/Ext.form.field.Base-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:)

Daniil
Jun 21, 2013, 2:35 PM
You should use the setReadOnly method if you want to change it on the fly via JavaScript.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.Base-method-setReadOnly

ViDom
Jun 25, 2013, 10:28 AM
You should use the setReadOnly method if you want to change it on the fly via JavaScript.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.Base-method-setReadOnly

yes it is the proper way to do that:)
Thread can be closed:)