ExtJS编辑器网格/网格中的无线电组 [英] Radio Group in ExtJS Editor Grid/Grid

问题描述

我需要extjs网格中的无线电组。我可以把radiogroup作为编辑器，但是用户想直接从收音机中选择该选项。

O是O不可能

而不是默认为yes，一旦选择了单元格，它将被转换为radio组（如编辑器网格工程），他们希望默认行为作为这个选项。 （他们不想下拉）

解决方案

我创建了一个收音机组件：

  Ext.define（'Ext.ux.grid.column.RadioGroupColumn'，{
 extends：'Ext.grid.column .Column'，
 alias：'widget.radiogroupcolumn'，
 
 / *作者：匈牙利亚历山大·伯格* / 
 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：[{
 $$$$$$$$$$$$$$$ $ b $，
fieldValue：可能，
fieldDisplay：可能
} 
]，
dataIndex 
}  

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)

解决方案

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

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