我需要 extjs 网格中的广播组。我可以将收音机组作为编辑器,但用户希望直接从收音机中选择选项。
例如 O 是 O 不是 O 也许
而不是默认情况下是,一旦他们选择了单元格,它就会被转换为单选组(就像编辑器网格的工作方式一样),他们希望默认行为作为这个选项。(他们不想要下拉菜单)
我需要 extjs 网格中的广播组。我可以将收音机组作为编辑器,但用户希望直接从收音机中选择选项。
例如 O 是 O 不是 O 也许
而不是默认情况下是,一旦他们选择了单元格,它就会被转换为单选组(就像编辑器网格的工作方式一样),他们希望默认行为作为这个选项。(他们不想要下拉菜单)
我创建了一个无线电组组件:
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 + ' ';
}
});
用法一:
{
"xtype" : "radiogroupcolumn",
"text" : "Radio Group Test",
"width" : 160,
"radioValues" : ["yes", "no", "maybe"],
"dataIndex" : "radio"
}
用法二:
{
"xtype" : "radiogroupcolumn",
"text" : "Radio Group Test",
"width" : 160,
"radioValues" : [{
"fieldValue" : "yes",
"fieldDisplay" : "Yes"
}, {
"fieldValue" : "no",
"fieldDisplay" : "No"
}, {
"fieldValue" : "maybe",
"fieldDisplay" : "Maybe"
}
],
"dataIndex" : "radio"
}