Extjs 6.0 RadioButton列

Question

我有一个非常特殊的情况，我需要一个数据网格上的5个不同的列，并且他们中的哪一个具有单个单选按钮。

由于对ExtJS的，我没有发现任何“radiocolumn”元素，我创造了它自己，是这样的：

Ext.define('Ext.grid.column.RadioColumn', { 
extend: 'Ext.grid.column.CheckColumn', 

alternateClassName: 'Ext.ux.RadioColumn', 

alias: 'widget.radiocolumn', 

groupField: undefined, 

allowUncheck: false, 

renderer : function(value, meta) { 

    var classer = "PROBLEM_UNCHECKED"; 

    meta.innerCls = ""; 
    if (this.disabled) { 
     meta.tdCls += ' ' + this.disabledCls; 
    } 
    if (value) { 
     classer = "PROBLEM_CHECKED"; 
    } 

    return "<span class='"+ classer + "' role='button' tabIndex='0'></span>"; 
}, 

所以我的问题是，你可以看到我的分级员的值为“ PROBLEM_CHECKED“和”PROBLEM_UNCHECKED“，而不是其实际的类值。我搜索了所有的分机和在线，我无法找到单选按钮的默认类值（即通常使用的ext），即使使用inpsect元素，此元素所返回的类与常规单选按钮不匹配。

Answer 1

您可以使用xtype widgetcolumn将单选按钮添加到网格列。 Here's演示的一个小例子。

Answer 2

在ExtJS有'widgetcolumn'组件你可以使用这个。

窗口小部件列配置了窗口小部件配置对象，该对象指定xtype以指示哪个类型的窗口小部件或组件属于此列的单元格中。

我已经创建了一个Sencha Fiddle演示。它会显示如何工作。希望这会帮助你。

Ext.create('Ext.data.Store', { 
    storeId: 'simpsonsStore', 
    fields: ['name', 'email', 'phone', { 
     name: 'checked', 
     type: 'boolean', 
     defaultValue: true 
    }], 
    data: [{ 
     name: 'Lisa', 
     email: 'lisa@simpsons.com', 
     phone: '555-111-1224' 
    }, { 
     name: 'Bart', 
     email: 'bart@simpsons.com', 
     phone: '555-222-1234' 
    }, { 
     name: 'Homer', 
     email: 'homer@simpsons.com', 
     phone: '555-222-1244' 
    }, { 
     name: 'Marge', 
     email: 'marge@simpsons.com', 
     phone: '555-222-1254' 
    }] 
}); 

Ext.create('Ext.grid.Panel', { 
    title: 'Simpsons', 
    store: Ext.data.StoreManager.lookup('simpsonsStore'), 
    columns: [{ 
     text: 'Name', 
     dataIndex: 'name' 
    }, { 
     text: 'Email', 
     dataIndex: 'email', 
     flex: 1 
    }, { 
     text: 'Phone', 
     dataIndex: 'phone' 
    }, { 
     text: 'Status', 
     width: 150, 
     xtype: 'widgetcolumn', 
     dataIndex: 'checked', 
     onWidgetAttach: function (column, widget, record) { 
      widget.down(`[inputValue=${record.get('checked')}]`).setValue(true); 
     }, 
     widget: { 
      xtype: 'radiogroup', 
      items: [{ 
       boxLabel: 'Yes', 
       inputValue: true 
      }, { 
       boxLabel: 'No', 
       inputValue: false 
      }] 
     } 
    }], 
    height: 200, 
    width: 400, 
    renderTo: Ext.getBody() 
});