1. #1
    Ext User nevf's Avatar
    Join Date
    Sep 2007
    Location
    Victoria, Australia
    Posts
    50
    Vote Rating
    0
    nevf is on a distinguished road

      0  

    Question Set Checkbox boxLabel dynamically

    Set Checkbox boxLabel dynamically


    I want to change the Label for a Checkbox dynamically. I have tried:

    Ext.get('cb_folders').update( 'New Label' );

    which gives an "Unknown runtime error" in IE8 and does nothing in Firefox and Firebug reports no errors.

    This seems like it should be simple to accomplish. I have searched the forums and tried everything I can think of without success.

    The config is:

    Code:
        var fp = new Ext.FormPanel({
            frame: true,
            bodyStyle: 'padding:5px 5px 0',
            height: 110,
            anchor: '100%',
            items: [
                    { xtype: 'label',
                      text: 'Search in:'
                    },
                    {
                        xtype: 'checkboxgroup',
                        id: 'search-in',
                        hideLabel: true,
                        autoWidth: true,
                        columns : [66, 66],
                        items: [
                            { boxLabel: 'Folders', id: 'cb_folders',
                              handler: function( checkbox, checked ) { checkbox_handler( checkbox, checked ); }
                            },
                            { boxLabel: 'Articles', id: 'cb_articles', checked: true,
                              handler: function( checkbox, checked ) { checkbox_handler( checkbox, checked ); }
                            }
                        ]
                    },
    ...

  2. #2
    Ext User nevf's Avatar
    Join Date
    Sep 2007
    Location
    Victoria, Australia
    Posts
    50
    Vote Rating
    0
    nevf is on a distinguished road

      0  

    Question


    I've made no further progress with this, can anyone help.

  3. #3
    Ext User americos's Avatar
    Join Date
    Aug 2007
    Posts
    21
    Vote Rating
    0
    americos is on a distinguished road

      0  

    Default


    Same problem here... I have not been able to do this.

  4. #4
    Sencha User chesstrix's Avatar
    Join Date
    Apr 2008
    Posts
    117
    Vote Rating
    1
    chesstrix is on a distinguished road

      0  

    Default


    Ext.form.CheckBox does not have a method to do this. You would need to change the value of the <label> that Ext creates when it makes a cbox and also use the setRawValue method to keep them in synch.

    Wouldn't it be easier to have two cboxes and toggle their visibility?

  5. #5
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Try:
    Code:
    checkbox.wrap.child('.x-form-cb-label').update('other boxLabel');

  6. #6
    Sencha User chesstrix's Avatar
    Join Date
    Apr 2008
    Posts
    117
    Vote Rating
    1
    chesstrix is on a distinguished road

      0  

    Default


    Hi Condor,

    the doco says wrap "Creates and wraps this element with another element ".

    Don't suppose you could explain that in English if you have a second?

  7. #7
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    No, that is Ext.Element.wrap() .

    Ext.form.Checkbox.wrap is an Ext.Element instance holding the <div> that surrounds the <input type="checkbox">.

    Ext.form.Checkbox.wrap is actually created using this.wrap = this.el.wrap({...}); (where el is the <input type="checkbox"> element).

  8. #8
    Ext User nevf's Avatar
    Join Date
    Sep 2007
    Location
    Victoria, Australia
    Posts
    50
    Vote Rating
    0
    nevf is on a distinguished road

      0  

    Thumbs up


    Quote Originally Posted by Condor View Post
    Try:
    Code:
    checkbox.wrap.child('.x-form-cb-label').update('other boxLabel');
    Condor, thanks so much that works beautifully. It would be great to see a SetLabel() function added to Checkbox though.

  9. #9
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    You could use:
    Code:
    Ext.override(Ext.form.Checkbox, {
    	setBoxLabel: function(boxLabel){
    		this.boxLabel = boxLabel;
    		if(this.rendered){
    			this.wrap.child('.x-form-cb-label').update(boxLabel);
    		}
    	}
    });

  10. #10
    Ext JS Premium Member
    Join Date
    Sep 2009
    Posts
    29
    Vote Rating
    2
    allardp is on a distinguished road

      0  

    Default Extjs4

    Extjs4


    Hi, I agree that a SetBoxLabel() method would be nice to be added, because in Ext4 it does not work with the suggested code... Anyone knows how to set the boxlabel dynamically in Ext4 ?

    I tried this:
    Code:
    var el = wnd.query("checkboxfield[name=private]")[0];el.wrap.child('.x-form-cb-label').update('other boxLabel');
    but el.wrap does not exist..