Extjs 6.0 RadioButton列
问题描述:
我有一个非常特殊的情况,我需要一个数据网格上的5个不同的列,并且他们中的哪一个具有单个单选按钮。Extjs 6.0 RadioButton列
由于对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元素,此元素所返回的类与常规单选按钮不匹配。
答
在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: '[email protected]',
phone: '555-111-1224'
}, {
name: 'Bart',
email: '[email protected]',
phone: '555-222-1234'
}, {
name: 'Homer',
email: '[email protected]',
phone: '555-222-1244'
}, {
name: 'Marge',
email: '[email protected]',
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()
});