What's New?

[CLOSED] checkbox value via fieldlabel click

  1. #1
    Oct 19, 2009, 3:30 PM

    [CLOSED] checkbox value via fieldlabel click

    hi;

    you can set the value of checkbox in formlayout via clicking the fieldlabel of the checkbox, in firefox and chrome, not in IE.
    but the value of the checkbox set only at the client side. you can not get the right value from server side.

    please see the sample page.

    <%@ Page Language="C#" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" 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>
    <script runat="server">                     

        protected void Save(object sender, AjaxEventArgs args)
        {                 
         
           bool value1 = cb3.Checked;
           bool value2 = cb4.Checked;
           bool value3= cb5.Checked;
           int value4 = int.Parse(tf1.Text);            
           bool value5 = cb1.Checked;
           bool value6 = cb2.Checked;
           object s1 = cb5.Value; //same with cb5.Checked
            
        }        
    </script>
    <ext:ScriptManager ID="ScriptManager1" runat="server"></ext:ScriptManager>                        
</head>
<body>
    <form id="form1" runat="server">
        <ext:Panel ID="Panel5" runat="server" ButtonAlign="Right">
                    <Body>
                        <ext:ColumnLayout ID="ColumnLayout2" runat="server">
                            <ext:LayoutColumn ColumnWidth=".6">
                                <ext:FormPanel ID="FormPanel1" runat="server">
                                    <Body>
                                        <ext:FormLayout ID="FormLayout1" runat="server" LabelWidth="240">
                                            <ext:Anchor>
                                                <ext:Checkbox runat="server" FieldLabel="option1" ID="cb1"></ext:Checkbox>
                                            </ext:Anchor>
                                            <ext:Anchor>
                                                <ext:Checkbox runat="server" FieldLabel="option2" ID="cb2"></ext:Checkbox>
                                            </ext:Anchor>
                                            <ext:Anchor>
                                                <ext:TextField runat="server" Width="60" MaxLength="3" MaskRe="/[0-9\$\.]/" ID="tf1" FieldLabel="option3"></ext:TextField>
                                            </ext:Anchor>
                                        </ext:FormLayout>
                                    </Body>
                                </ext:FormPanel>                        
                            </ext:LayoutColumn>
                            <ext:LayoutColumn ColumnWidth="0.4">
                                <ext:FormPanel ID="FormPanel2" runat="server">
                                    <Body>
                                        <ext:FormLayout ID="FormLayout2" runat="server" LabelWidth="235">
                                            <ext:Anchor>
                                                <ext:Checkbox runat="server" FieldLabel="option4" ID="cb3"></ext:Checkbox>
                                            </ext:Anchor>
                                            <ext:Anchor>
                                                <ext:Checkbox runat="server" FieldLabel="option5" ID="cb5"></ext:Checkbox>
                                            </ext:Anchor>
                                            <ext:Anchor>
                                                <ext:Checkbox runat="server" FieldLabel="option6" ID="cb4"></ext:Checkbox>
                                            </ext:Anchor>
                                        </ext:FormLayout>
                                    </Body>
                                </ext:FormPanel>       
                            </ext:LayoutColumn>
                        </ext:ColumnLayout>                                                                       
                    </Body>
                    <Buttons>
                        <ext:Button runat="server" Text="Save Settings" Icon="Disk" ID="ButtonSaveSettings">
                            <AjaxEvents>
                                <Click OnEvent="Save">
                                    <EventMask ShowMask="true" Msg="Saving" />
                                </Click>
                            </AjaxEvents>
                        </ext:Button>
                    </Buttons>
                </ext:Panel>                   
    </form>
</body>
</html>
    Thanx.


  2. #2
    Oct 19, 2009, 4:18 PM

    RE: [CLOSED] checkbox value via fieldlabel click

    Hi maras54,

    I can confirm the label does not appear to function as expected on Checkbox Components in v0.8.x.


    I can also confirm that this defect has been fixed in the upcoming v1.0 release.


    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
    Oct 19, 2009, 5:52 PM

    RE: [CLOSED] checkbox value via fieldlabel click

    Hi,

    Move ScriptManager inside the form to get checkboxes on server side
  4. #4
    Oct 19, 2009, 6:57 PM

    RE: [CLOSED] checkbox value via fieldlabel click


    hi;

    there is no problem with getting checkboxes at server side, the problem is; value of the checkboxes is wrong.
    I moved the scriptmanager into form but does not work.
    I also realized that ;

    "checkbox.checked" is different that "checkbox.getValue()" at the client side. The right one is the "checkbox.checked", so i am assuming there is a problem with getValue() method.

    i tried to add a custom js handler (setValue) which fires via checkbox 'check' event.

    That is my new page, it sometimes works. So if you have a better or final solution it will be great.

    And when is the v1.0 release?

    <%@ Page Language="C#" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" 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>
    <script runat="server">                     

        protected void Save(object sender, AjaxEventArgs args)
        {                 
         
           bool value1 = cb3.Checked;
           bool value2 = cb4.Checked;
           bool value3= cb5.Checked;
           int value4 = int.Parse(tf1.Text);            
           bool value5 = cb1.Checked;
           bool value6 = cb2.Checked;
           object s1 = cb5.Value; //same with cb5.Checked
            
        }        
    </script>
    <script type="text/javascript">
        var fireSelect = function(elem) {
                                     
              setValue(elem.id, elem.checked);
        }
        function setValue(cmp, ref) {
            cmp = Ext.getCmp(cmp);
            if (!Ext.isEmpty(cmp)) {
                cmp.suspendEvents();
                cmp.setValue(ref);
                cmp.resumeEvents();               
            }
        }
    </script>
                         
</head>
<body>
    <form id="form1" runat="server">
    <ext:ScriptManager ID="ScriptManager1" runat="server"></ext:ScriptManager>   
        <ext:Panel ID="Panel5" runat="server" ButtonAlign="Right">
                    <Body>
                        <ext:ColumnLayout ID="ColumnLayout2" runat="server">
                            <ext:LayoutColumn ColumnWidth=".6">
                                <ext:FormPanel ID="FormPanel1" runat="server">
                                    <Body>
                                        <ext:FormLayout ID="FormLayout1" runat="server" LabelWidth="240">
                                            <ext:Anchor>
                                                <ext:Checkbox runat="server" FieldLabel="option1" ID="cb1">
                                                    <Listeners>
                                                        <Check Handler="fireSelect(this);" />
                                                    </Listeners>
                                                </ext:Checkbox>
                                            </ext:Anchor>
                                            <ext:Anchor>
                                                <ext:Checkbox runat="server" FieldLabel="option2" ID="cb2">
                                                    <Listeners>                                                        
                                                        <Check Handler="fireSelect(this);" />
                                                    </Listeners>
                                                </ext:Checkbox>
                                            </ext:Anchor>
                                            <ext:Anchor>
                                                <ext:TextField runat="server" Width="60" MaxLength="3" MaskRe="/[0-9\$\.]/" ID="tf1" FieldLabel="option3"></ext:TextField>
                                            </ext:Anchor>
                                        </ext:FormLayout>
                                    </Body>
                                </ext:FormPanel>                        
                            </ext:LayoutColumn>
                            <ext:LayoutColumn ColumnWidth="0.4">
                                <ext:FormPanel ID="FormPanel2" runat="server">
                                    <Body>
                                        <ext:FormLayout ID="FormLayout2" runat="server" LabelWidth="235">
                                            <ext:Anchor>
                                                <ext:Checkbox runat="server" FieldLabel="option4" ID="cb3">
                                                    <Listeners>
                                                        <Check Handler="fireSelect(this);" />
                                                    </Listeners>
                                                </ext:Checkbox>
                                            </ext:Anchor>
                                            <ext:Anchor>
                                                <ext:Checkbox runat="server" FieldLabel="option5" ID="cb5">
                                                    <Listeners>
                                                        <Check Handler="fireSelect(this);" />
                                                    </Listeners>
                                                </ext:Checkbox>
                                            </ext:Anchor>
                                            <ext:Anchor>
                                                <ext:Checkbox runat="server" FieldLabel="option6" ID="cb4">
                                                    <Listeners>
                                                        <Check Handler="fireSelect(this);" />
                                                    </Listeners>
                                                </ext:Checkbox>
                                            </ext:Anchor>
                                        </ext:FormLayout>
                                    </Body>
                                </ext:FormPanel>       
                            </ext:LayoutColumn>
                        </ext:ColumnLayout>                                                                       
                    </Body>
                    <Buttons>
                        <ext:Button runat="server" Text="Save Settings" Icon="Disk" ID="ButtonSaveSettings">
                            <AjaxEvents>
                                <Click OnEvent="Save">
                                    <EventMask ShowMask="true" Msg="Saving" />
                                </Click>
                            </AjaxEvents>
                        </ext:Button>
                    </Buttons>
                </ext:Panel>                   
    </form>
</body>
</html>
    Thank you
  5. #5
    Oct 19, 2009, 7:10 PM

    RE: [CLOSED] checkbox value via fieldlabel click

    Hi,

    For me the Value/Checked are correct on server side even if I remove your js code (fire select).
    What version do you use? Did you try to update from SVN?


    Plese create separate solution with that example and your local assemblies, zip it and post. I have to test it with your assemblies.


    Under what browser do you have that issue?
  6. #6
    Oct 19, 2009, 7:23 PM

    RE: [CLOSED] checkbox value via fieldlabel click

    hi vladimir;

    I am using v0.8.
    I stated at my first post that
    "you can set the value of checkbox in formlayout via clicking the fieldlabel of the checkbox, in firefox and chrome, not in IE.
    but the value of the checkbox set only at the client side. you can not get the right value from server side."

    please make sure that you set the values via clicking the fieldlabel not actual checkbox element.
    (everything is fine when the user set the value via clicking the actual checkbox)

    - if you click fieldlabel under IE, it does not even set the value.
    - if you click fieldlabel under chrome or mozilla, it set the cb.Checked = true, but cb.getValue() = false at clientside and
    cb.checked=false , cb.value=false at server side.

    Thank You



  7. #7
    Oct 19, 2009, 7:51 PM

    RE: [CLOSED] checkbox value via fieldlabel click

    Hi,

    You can try the following fix
    http://www.extjs.com/forum/showthread.php?t=44603


    1. The script (after line with red color text)
    2. Css rules


    Place to the header
    <ext:ScriptContainer runat="server" />
    and after it that script and css


    We will discuss about this problem and may be include that fix to the SVN
  8. #8
    Oct 20, 2009, 10:56 AM

    RE: [CLOSED] checkbox value via fieldlabel click


    hi vladimir;

    thanx for the reply.
    I tried to use the script and css from the post you sent but I could not make it work. It gives exception "Ext is not defined".

    If you can post sample how to use it, it will be great.

    This is how I use them in the head section.
    I also tried using scriptcontainer but no success.

    <head runat="server">
    <title></title>   
        
    <script runat="server">                     

        protected void Save(object sender, AjaxEventArgs args)
        {                 
         
           bool value1 = cb3.Checked;
           bool value2 = cb4.Checked;
           bool value3= cb5.Checked;
           int value4 = int.Parse(tf1.Text);            
           bool value5 = cb1.Checked;
           bool value6 = cb2.Checked;
           object s1 = cb5.Value; //same with cb5.Checked
            
        }        
    </script>    
    <ext:ScriptManager ID="ScriptManager1" runat="server"></ext:ScriptManager>
    <script type="text/javascript">
        
        Ext.override(Ext.form.Checkbox, {
            onRender: function(ct, position) {
                Ext.form.Checkbox.superclass.onRender.call(this, ct, position);
                if (this.inputValue !== undefined) {
                    this.el.dom.value = this.inputValue;
                }
                //this.el.addClass('x-hidden');
                this.innerWrap = this.el.wrap({
                    //tabIndex: this.tabIndex,
                    cls: this.baseCls + '-wrap-inner'
                });
                this.wrap = this.innerWrap.wrap({ cls: this.baseCls + '-wrap' });
                this.imageEl = this.innerWrap.createChild({
                    tag: 'img',
                    src: Ext.BLANK_IMAGE_URL,
                    cls: this.baseCls
                });
                if (this.boxLabel) {
                    this.labelEl = this.innerWrap.createChild({
                        tag: 'label',
                        htmlFor: this.el.id,
                        cls: 'x-form-cb-label',
                        html: this.boxLabel
                    });
                }
                //this.imageEl = this.innerWrap.createChild({
                //tag: 'img',
                //src: Ext.BLANK_IMAGE_URL,
                //cls: this.baseCls
                //}, this.el);
                if (this.checked) {
                    this.setValue(true);
                } else {
                    this.checked = this.el.dom.checked;
                }
                this.originalValue = this.checked;
            },
            afterRender: function() {
                Ext.form.Checkbox.superclass.afterRender.call(this);
                //this.wrap[this.checked ? 'addClass' : 'removeClass'](this.checkedCls);
                this.imageEl[this.checked ? 'addClass' : 'removeClass'](this.checkedCls);
            },
            initCheckEvents: function() {
                //this.innerWrap.removeAllListeners();
                this.innerWrap.addClassOnOver(this.overCls);
                this.innerWrap.addClassOnClick(this.mouseDownCls);
                this.innerWrap.on('click', this.onClick, this);
                //this.innerWrap.on('keyup', this.onKeyUp, this);
            },
            onFocus: function(e) {
                Ext.form.Checkbox.superclass.onFocus.call(this, e);
                //this.el.addClass(this.focusCls);
                this.innerWrap.addClass(this.focusCls);
            },
            onBlur: function(e) {
                Ext.form.Checkbox.superclass.onBlur.call(this, e);
                //this.el.removeClass(this.focusCls);
                this.innerWrap.removeClass(this.focusCls);
            },
            onClick: function(e) {
                if (e.getTarget().htmlFor != this.el.dom.id) {
                    if (e.getTarget() !== this.el.dom) {
                        this.el.focus();
                    }
                    if (!this.disabled &amp;&amp; !this.readOnly) {
                        this.toggleValue();
                    }
                }
                //e.stopEvent();
            },
            onEnable: Ext.form.Checkbox.superclass.onEnable,
            onDisable: Ext.form.Checkbox.superclass.onDisable,
            onKeyUp: undefined,
            setValue: function(v) {
                var checked = this.checked;
                this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
                if (this.rendered) {
                    this.el.dom.checked = this.checked;
                    this.el.dom.defaultChecked = this.checked;
                    //this.wrap[this.checked ? 'addClass' : 'removeClass'](this.checkedCls);
                    this.imageEl[this.checked ? 'addClass' : 'removeClass'](this.checkedCls);
                }
                if (checked != this.checked) {
                    this.fireEvent("check", this, this.checked);
                    if (this.handler) {
                        this.handler.call(this.scope || this, this, this.checked);
                    }
                }
            },
            getResizeEl: function() {
                //if(!this.resizeEl){
                //this.resizeEl = Ext.isSafari ? this.wrap : (this.wrap.up('.x-form-element', 5) || this.wrap);
                //}
                //return this.resizeEl;
                return this.wrap;
            }
        });
        Ext.override(Ext.form.Radio, {
            checkedCls: 'x-form-radio-checked'
        });
        //
//        var fireSelect = function(elem) {

//            //elem.toggleValue();
//             setValue(elem.id, elem.checked);
//        }
        function setValue(cmp, ref) {
            cmp = Ext.getCmp(cmp);
            if (!Ext.isEmpty(cmp)) {
                cmp.suspendEvents();
                cmp.setValue(ref);
                cmp.resumeEvents();
            }
        }
       
    </script>     
    
    <style type="text/css">
.x-form-check-group .x-form-check-wrap,.x-form-radio-group .x-form-radio-wrap{height:auto;}
.ext-ie .x-form-check-group .x-form-check-wrap,.ext-ie .x-form-radio-group .x-form-radio-wrap{height:auto;}
.x-form-check-wrap,.x-form-radio-wrap{padding:1px 0 3px;line-height:18px;}
.ext-ie .x-form-check-wrap,.ext-ie .x-form-radio-wrap{padding-top:3px;}
.ext-strict .ext-ie7 .x-form-check-wrap,.ext-strict .ext-ie7 .x-form-radio-wrap{padding-bottom:1px;}
.x-form-check-wrap-inner,.x-form-radio-wrap-inner{display:inline;padding:0;}
.x-form-check,.x-form-radio{height:13px;width:13px;vertical-align:bottom;margin:2px 0;}
.ext-ie .x-form-check,.ext-ie .x-form-radio{margin-top:1px;}
.ext-strict .ext-ie7 .x-form-check,.ext-strict .ext-ie7 .x-form-radio{margin-bottom:4px;}
.ext-opera .x-form-check,.ext-opera .x-form-radio{margin-top:3px;}
.x-form-check-focus .x-form-check,.x-form-check-over .x-form-check,.x-form-check-focus .x-form-radio,.x-form-check-over .x-form-radio{background-position:-13px 0;}
.x-form-check-down .x-form-check,.x-form-check-down .x-form-radio{background-position:-26px 0;}
.x-item-disabled .x-form-check,.x-item-disabled .x-form-radio{background-position:-39px 0;}
.x-form-check-checked,.x-form-radio-checked{background-position:0 -13px;}
.x-form-check-focus .x-form-check-checked,.x-form-check-over .x-form-check-checked,.x-form-check-focus .x-form-radio-checked,.x-form-check-over .x-form-radio-checked{background-position:-13px -13px;}
.x-form-check-down .x-form-check-checked,.x-form-check-down .x-form-radio-checked{background-position:-26px -13px;}
.x-item-disabled .x-form-check-checked,.x-item-disabled .x-form-radio-checked{background-position:-39px -13px;}
.x-form-check-wrap-inner input,.x-form-radio-wrap-inner input{position:absolute;-ms-filter:"alpha(opacity=0)";filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}
</style>
                         
</head>
    Thank You
  9. #9
    Oct 20, 2009, 11:01 AM

    RE: [CLOSED] checkbox value via fieldlabel click

    Hi,

    You need to use ScriptContainer in head instead ScriptManager (ScriptManager should be in form)
    See my previous post, i said about ScriptContainer


    Hope this helps
  10. #10
    Oct 20, 2009, 11:23 AM

    RE: [CLOSED] checkbox value via fieldlabel click

    Hi;

    yeah I confused about container and manager, sorry.

    So everything is perfect right now. It works under IE as well.

    Thank you for quick replies and help

Similar Threads

  1. How to: Change checkbox editor value on mouse click
    By retto in forum 1.x Help
    Replies: 1
    Last Post: Jun 05, 2012, 1:54 PM
  2. [CLOSED] FieldLabel click event
    By amitpareek in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Oct 13, 2011, 7:03 PM
  3. [CLOSED] Rowexpander toggles on checkbox click
    By deejayns in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Dec 15, 2010, 9:42 PM
  4. [CLOSED] CheckboxSelectionmodel Header Checkbox Click event(version 0.8)
    By yobnet in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 30, 2010, 8:20 AM
  5. check/uncheck checkbox on click of another checkbox in gridpanel
    By ubaid in forum 1.x Help
    Replies: 1
    Last Post: Aug 13, 2009, 9:37 AM

Posting Permissions