1. #1
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Germany, Frankfurt
    Posts
    142
    Vote Rating
    1
    enpasos is on a distinguished road

      0  

    Default Set Checkbox boxLabel dynamically ?

    Set Checkbox boxLabel dynamically ?


    How to do it ?
    There is a thread (with answer) for an earlier extjs version.

  2. #2
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Germany, Frankfurt
    Posts
    142
    Vote Rating
    1
    enpasos is on a distinguished road

      0  

    Default


    Can one do better than

    PHP Code:
    var checkbox = ...;
    var 
    text '...';
    checkbox.el.down('.x-form-cb-label').update(text); 

  3. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    898
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Think this is a reusable method to do this. Should take into account if anyone changes the Ext.baseCSSPrefix.

    Code:
    Ext.override(Ext.form.field.Checkbox, {
        setBoxLabel : function(text) {
            var cbEl    = this.el,
                labelEl = cbEl.down('.' + this.boxLabelCls);
    
            labelEl.update(text);
        }
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #4
    Sencha User
    Join Date
    Nov 2007
    Posts
    13
    Vote Rating
    1
    nooneyet is on a distinguished road

      0  

    Default Mitchell, this updates the text, but it doesn't re-render the box (ExtJS 4.0.7)

    Mitchell, this updates the text, but it doesn't re-render the box (ExtJS 4.0.7)


    Mitchell, I was hoping this thread would solve my problem, but your code is just a pretty wrapper for
    Code:
    X.boxLabelEl.update(...)
    My problem is that when I put a checkbox inside a field container with an hbox layout, updating the boxLabel only updates its text, but doesn't adjust its width.

    Moreover, the closest I got to a solution (the 'Update and force layout' button in the example below), was doing a forceComponentLayout() on the field container - this at least makes the new label readable, but it heightens the container instead of readjusting the width.

    Code:
    Ext.onReady(function(){
    	Ext.create('Ext.FormPanel', {
            title: 'Test',
            frame: true,
            width: 430,
            renderTo:Ext.getBody(),
            bodyPadding: 10,
            items: [
                {
    				xtype: 'fieldcontainer',
    				id: 'fld-ct',
    				width: 400,
    				layout: 'hbox',
    				fieldLabel: '',
    				items: [
    					{
    						xtype: 'checkbox',
    						id: 'TESTCHECK',
    						fieldLabel: '',
    						boxLabel: 'Box Label'
    					},
    					{
    						xtype: 'textfield',
    						fieldLabel: ''
    					}
    				]
    			},{
    				xtype: 'fieldcontainer',
    				id: 'fld-ct2',
    				width: 400,
    				layout: 'hbox',
    				fieldLabel: '',
    				items: [
    					{
    						xtype: 'checkbox',
    						id: 'TESTCHECK2',
    						fieldLabel: '',
    						boxLabel: 'Another Box Label'
    					},
    					{
    						xtype: 'textfield',
    						fieldLabel: ''
    					}
    				]
    			}
    
            ],
            buttons: [{
                text: 'Update boxLabel',
                handler: function(){Ext.getCmp('TESTCHECK').boxLabelEl.update('SOME LONGER LABEL');}
            },{
                text: 'Update and force layout',
                handler: function(){
    				Ext.getCmp('TESTCHECK').boxLabelEl.update('AN EXTREMELY LONG LABEL');
    				Ext.getCmp('TESTCHECK').forceComponentLayout();
    			}
            }]
        });
    });

Thread Participants: 2