1. #1
    Sencha Premium Member
    Join Date
    Mar 2010
    Posts
    115
    Vote Rating
    3
    predator is on a distinguished road

      1  

    Default Ext.ux.grid.column.RadioGroupColumn

    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.
    Last edited by Gary Schlosberg; 6 Oct 2014 at 2:04 PM. Reason: jsbeautify code

  2. #2
    Sencha User Misiu's Avatar
    Join Date
    Jun 2012
    Location
    Poland
    Posts
    256
    Vote Rating
    58
    Misiu is a jewel in the rough Misiu is a jewel in the rough Misiu is a jewel in the rough

      0  

    Default


    Thanks for posting, but could You show a demo? maybe using fiddle?

  3. #3
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    4,055
    Vote Rating
    69
    Gary Schlosberg has a spectacular aura about Gary Schlosberg has a spectacular aura about Gary Schlosberg has a spectacular aura about

      0  

    Default


    I ran your code through jsbeautify and it seems to be fine now, sorry for the trouble you had.

    Guessing you started with the code from this thread, but if not, please post the link so the author can get some credit.
    https://gist.github.com/onia/ce603b6e49d0883eb209


    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager:
    sheryl@sencha.com

Thread Participants: 2