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" 而不是它们的真实 class 值。我已经搜索了所有的分机和在线，但我找不到单选按钮的默认 class 值（分机通常使用），即使使用 inpsect 元素，这个元素检索的 class 也没有'匹配常规的单选按钮。

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()
});

Extjs 6.0 RadioButton 列

Extjs 6.0 RadioButton Column

javascript

extjs

radio-button

extjs6