Radiofield setName and boxLabel binding problem

Hi,

I'm developing a test application with ExtJS 5.0.1. The test has multiple questions, each one with 5 answers. I created a view to show a single question with its answers (radiofields), and it is instantiated several times inside a card container.

The problem occurs when the user selects the second answer. The first question's answer is lost, since all the radiofields share the same group name. I'd like to set the name of the radiofields dynamically, so they can be grouped for each question, but there's no setName method in the radiofield component. Is there some equivalent method?

Also, I don't know why the binding isn't working with the boxLabel property when creating the question views. The following error shows up in the console:

Cannot read property 'setHtml' of null.

Despite not being sure if I'm using it correctly, it works great for the displayfield.

Main view:

Code:

Ext.define('Test.view.main.Main', {
    extend: 'Ext.panel.Panel',


    xtype: 'app-main',
    
    controller: 'main',
    viewModel: 'main',


    layout: 'card',
    
    title: 'Test Application',
    
    bbar: [{
        xtype: 'button',
        text: 'Previous',
        reference: 'previousButton',
        handler: 'onPreviousClick'
    }, {
        xtype: 'tbspacer',
        flex: 1
    }, {
        xtype: 'button',
        text: 'Next',
        reference: 'nextButton',
        handler: 'onNextClick'
    }]
});

Main controller:

Code:

Ext.define('Test.view.main.MainController', {
    extend: 'Ext.app.ViewController',


    alias: 'controller.main',


    init: function() {
        var me = this;
        var store = me.getStore('testStore');
        store.on('load', function(store, records) {
            var length = records.length;
            var view = me.getView();
            for (var i = 0; i < length; i++) {
                var data = records[i].data;
                var question = Ext.create('Test.view.main.Question');
                var questionVM = question.getViewModel();
                questionVM.set('question', data.question);
                questionVM.set('answer1', data.answer1);
                questionVM.set('answer2', data.answer2);
                questionVM.set('answer3', data.answer3);
                questionVM.set('answer4', data.answer4);
                questionVM.set('answer5', data.answer5);
                view.add(question);
            }
        });
    },
    
    onPreviousClick: function() {
        var me = this;
        me.step(-1);
    },
    
    onNextClick: function() {
        var me = this;
        me.step(1);
    },
    
    step: function(dir) {
        ...
    }
});

Question view:

Code:

Ext.define('Test.view.main.Question', {
    extend: 'Ext.container.Container',


    xtype: 'question',
    
    requires: [
        'Test.view.main.QuestionModel'
    ],
    
    viewModel:  'question',
    
    layout: 'vbox',
    
    defaults: {
        xtype: 'radiofield',
        name: 'radiogroup'
    },
    
    items: [{
        xtype: 'displayfield',
        hideLabel: true,
        bind: '{question}'
    },{
        bind: {
            boxLabel: '{answer1}'
        }
    },{
        bind: {
            boxLabel: '{answer2}'
        }
    },{
        bind: {
            boxLabel: '{answer3}'
        }
    },{
        bind: {
            boxLabel: '{answer4}'
        }
    },{
        bind: {
            boxLabel: '{answer5}'
        }
    }]
});

Thanks!

Arthur

Radiofield setName and boxLabel binding problem