Ext.ux.grid.column.RadioGroupColumn

Following extension would give you option to put radio group in a grid column. I found this code in a gist but it was broken so I fix it to work with 4.2.2.

Code:

Ext.define('Ext.ux.grid.column.RadioGroupColumn', {
    extend: 'Ext.grid.column.Column',
alias: 'widget.radiogroupcolumn',

readOnly: false ,

defaultRenderer: function (value, metadata, record, rowIndex, colIndex, store, view) {
        var  column = view.getGridColumns()[colIndex],
html = '';

if  (column.radioValues) {
            for  (var  x in  column.radioValues) {
                var  radioValue = column.radioValues[x],
radioDisplay;
if  (radioValue && radioValue.fieldValue) {
                    radioDisplay = radioValue.fieldDisplay;
radioValue = radioValue.fieldValue;
} else  {
                    radioDisplay = radioValue;
}
                if  (radioValue == value) {
                    html = html + column.getHtmlData(x, store.store.storeId, rowIndex, radioValue, radioDisplay, 'checked');
} else  {
                    html = html + column.getHtmlData(x, store.store.storeId, rowIndex, radioValue, radioDisplay, '');
}
            }
        }

        return  html;
},

getHtmlData: function (x, storeId, rowIndex, value, display, checked) {
        var  me = this ,
radioid = '_radioid'+rowIndex+ x,
onClick;

if  (me.readOnly) {
            onClick = "onclick=\"javascript: return false;\"";
} else  {
            onClick = "onclick=\"this.checked=true;Ext.StoreManager.lookup('" + storeId + "').getAt(" + rowIndex + ").set('" + me.dataIndex + "', '" + value + "');\"";
}

        return  "<input " + onClick + " type='radio' " + checked + " id='"+radioid+"' > <label for='"+radioid+"'>"+display+"</label>";
}
});

Use it like this in your grid:

Code:

{
    xtype: 'radiogroupcolumn',
itemId: 'scores',
radioValues: [
        {
            fieldValue: 1,
fieldDisplay: 'Seldom'
},{
            fieldValue: 2,
fieldDisplay: 'Sometimes'
},{
            fieldValue: 3,
fieldDisplay: 'Often'
},{
            fieldValue: 4,
fieldDisplay: 'Frequently'
},{
            fieldValue: 5,
fieldDisplay: 'Always'
}
    ],
dataIndex: 'score',
width: 330,
text: 'Score'
}

Somebody needs to do something about posting code in here, formatting is getting ed up every time.



Ext.ux.grid.column.RadioGroupColumn