How to add tab access [tabindex] functionality to tpl of extjs4

Question

I am working in extjs4. I have tpl view for displaying questions and multiple options as-

Ext.define('Balaee.view.qb.qbqns.QbqnsReview', {
    extend: 'Ext.view.View',
    id: 'qbqnsViewId',
    alias: 'widget.QbqnsReviewView',
    height: 500,
    store: 'qb.QbqnsStore',
    autoScroll: true,
    config: {
        tpl: '<tpl for=".">' +
            '<div id="main">' +
            '</br>' +

            '<h1 id="q">Question :-</h1> {question}</br>' +

            '<tpl for="options">' +
            '<tpl if="parent.Correctoption==optionId">' +
            '<p style="color:Green"><input type="radio" name="{option}">{option}</p>' +
            '<tpl elseif="parent.UsersOption==optionId">' +
            '<p style="color:Red"><input type="radio" name="{option}">{option}</p>' +
            '<tpl else>' +
            '<p><input type="radio" name="{optionId}" value="{option}">&nbsp{option}</p>' +
            '</tpl>' +
            '</tpl>' +
            '<p>---------------------------------------------------------</p>' +
            '</div>' +

            '</tpl>',
        itemSelector: 'div.main'
    }
});

Its working correctly. its displaying 20 questions and its related options correctly. I want to add tabindex property to it. i.e. if user solved question and press the tab button then focus should go to next question. So how to add tab access functionality to tpl in extjs4

Answer 1

You should be able to add tabindex property on elements in your template: http://www.w3schools.com/tags/att_global_tabindex.asp