1. #1
    Sencha Premium Member
    Join Date
    Mar 2010
    Posts
    111
    Vote Rating
    -1
    predator has a little shameless behaviour in the past

      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
    228
    Vote Rating
    43
    Misiu has a spectacular aura about Misiu has a spectacular aura about Misiu has a spectacular aura about

      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
    3,840
    Vote Rating
    67
    Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough

      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
    Get on the Fast Track with Sencha Training http://sencha.com/training

Thread Participants: 2