Radio Group in ExtJS Editor Grid/Grid

问题:

I need radio group in extjs grid. I can have the radiogroup as editor but users wants to directly select the option from radio.

e.g. O yes O no O maybe

instead of having yes as by default and once they select the cell, it gets converted to radio group (like how the editor grid works), they wants the default behavior as this options. (They dont want the drop down)

回答1:

I created a radio group component:

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

    /* author: Alexander Berg, Hungary */ 
    defaultRenderer: function(value, metadata, record, rowIndex, colIndex, store, view) {
      var column = view.getGridColumns()[colIndex];
      var 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(record.internalId, store.storeId, rowIndex, radioValue, radioDisplay, 'checked');
              } else {
                  html = html + column.getHtmlData(record.internalId, store.storeId, rowIndex, radioValue, radioDisplay);
              }
          }
      }
      return html;
    },

    getHtmlData: function(recordId, storeId, rowIndex, value, display, optional) {
        var me = this, clickHandler, readOnly;
        var name = storeId + '_' + recordId;
        var clickHandler;
        if (me.readOnly) {
            readOnly = 'readonly';
            onClick = '';
        } else {
            readOnly = '';
            onClick = "onclick=\"this.checked=true;Ext.StoreManager.lookup('" + storeId + "').getAt(" + rowIndex + ").set('" + me.dataIndex + "', '" + value + "');\"'";
        }
        return ' ' + display + ' ';
    }
});

Usage 1:

{
    "xtype" : "radiogroupcolumn",
    "text" : "Radio Group Test",
    "width" : 160,
    "radioValues" : ["yes", "no", "maybe"],
    "dataIndex" : "radio"
}

Usage 2:

{
    "xtype" : "radiogroupcolumn",
    "text" : "Radio Group Test",
    "width" : 160,
    "radioValues" : [{
            "fieldValue" : "yes",
            "fieldDisplay" : "Yes"
        }, {
            "fieldValue" : "no",
            "fieldDisplay" : "No"
        }, {
            "fieldValue" : "maybe",
            "fieldDisplay" : "Maybe"
        }
    ],
    "dataIndex" : "radio"
}