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