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也许

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

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

用法一:

{
    "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屋！