ExtJS 编辑器网格/网格中的无线电组

Question

我需要 extjs 网格中的广播组。我可以将 radiogroup 作为编辑器，但用户希望直接从 radio 中选择选项。

例如 O是O不是O也许

而不是默认情况下是，一旦他们选择了单元格，它就会被转换为单选组（就像编辑器网格的工作方式一样），他们希望默认行为作为这个选项。 （他们不想要下拉菜单）

Answer 1

我创建了一个广播组组件：

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 + ' ';
    }
});

用法一：

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

用法2：

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