ExtJS 编辑器网格/网格中的单选组 [英] Radio Group in ExtJS Editor Grid/Grid

问题描述

我需要 extjs 网格中的无线电组.我可以让 radiogroup 作为编辑器，但用户想直接从 radio 中选择选项.

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

例如O 是 O 否 O 也许

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)

推荐答案

我创建了一个无线电组组件:

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

用法 1:

{
    "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"
}

这篇关于ExtJS 编辑器网格/网格中的单选组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！