Render custom Radio button in ExtJS 3

Question

I want to customize the radio button where I need to display text box, or Date field besides radio button instead of text.

There is a similar question Add custom item to radio button in extjs, but the answer is for ExtJs 4. Can someone please help me with similar implementation for ExtJs 3?

I tried using contentEl, but the div gets appended below the radio input tag, so is not visible. After looking at Ext code I tried overriding private getContentTarget function and it seems working but doesn't feel the right approach

@royhowie it is specific to one use case. The solution in Ext 4 in similar question is simple enough.. Don't understand why it looks broad — sidgate
The answer given for EXT 4 is working for EXT 3.1.0 as well..what is the problem that you are facing — BhandariS
@BhandariS doesn't work. boxLabelEl introduced in Ext 4 so gives undefined error — sidgate

MarthyM MarthyM · Accepted Answer · 2015-05-23T22:26:24

Here is a workaround based on the ExtJs 4 answer. Instead of boxLabelEl, you can use getEl().down('label.x-form-cb-label') like so:

listeners: {
    render: function( radio ) {
        var boxLabelEl = radio.getEl().down('label.x-form-cb-label');
        boxLabelEl.update("");
        radio.field = Ext.create('Ext.form.field.Number', {
            renderTo: boxLabelEl,
            width: 40,
            disabled: !radio.getValue()
        });
        boxLabelEl.setStyle('display','inline-block');
    },
    change: function( radio ) {
        radio.field.setDisabled(!radio.getValue());
    }
}

This should work for ExtJs 3.

Render custom Radio button in ExtJS 3

1 Answers