效果：如上图。
代码：其中需要显示单选按钮的列
{
dataIndex: 'FeeModel',
text: '收費模式',
flex: 1,
align: 'left',
radioValues: [{ "inputValue": "1", "boxLabel": "高級收費模式" }, { "inputValue": "2", "boxLabel": "简单收费模式" }, { "inputValue": "3", "boxLabel": "不收费模式" }],
renderer:function(value, metaData, record, rowIndex, colIndex, store, view) {
var column = view.getGridColumns()[colIndex],
html = '';
Ext.each(column.radioValues, function(rec) {
var inputValue = rec.inputValue;
var boxLabel = rec.boxLabel;
var checked = inputValue == value;
var name = view.id+"_Grdi_Column_Radio_"+record.data.Id+"_"+rowIndex;
html += "<input name='" + name + "' type='radio' " + (checked ? "checked" : "") + " colIndex='" + colIndex + "' rowIndex='" + rowIndex + "' value='" + inputValue + "'/>" + boxLabel;
});
return html;
},
tdCls: 'tdValign'
}
给表格加入事件
me.on('afterrender', function (grid, eOpts) {
this.el.on('click', function (event) {
var radio = event.getTarget('input[type="radio"]');
if (radio) {
var rowIndex = radio.getAttribute("rowIndex");
var colIndex = radio.getAttribute("colIndex");
this.getStore().getAt(rowIndex).set('FeeModel',radio.value);
}
}, this);
});
表格全部代码:
Ext.define('Yxd.view.FeeModelSet.ProjectGrid', {
extend: 'Yxd.ux.BaseGridPanel',
xtype: 'FeeModelSet_ProjectGrid',
border: ,
initComponent: function () {
var me = this;
var store = Ext.create("Yxd.store.Project", {
autoLoad: true
});
Ext.applyIf(me, {
store: store,
columns: [
{
flex: ,
dataIndex: 'Id',
text: 'Id',
hidden: true,
align: 'center'
}, {
text: '序号',
xtype: 'rownumberer',
width: ,
tdCls: 'tdValign',
align: 'center'
},
{
dataIndex: 'Name',
text: '项目名称',
flex: ,
align: 'left',
tdCls: 'tdValign'
}, {
dataIndex: 'FeeModel',
text: '收費模式',
flex: ,
align: 'left',
radioValues: [{ "inputValue": "", "boxLabel": "高級收費模式" }, { "inputValue": "", "boxLabel": "简单收费模式" }, { "inputValue": "", "boxLabel": "不收费模式" }],
renderer:function(value, metaData, record, rowIndex, colIndex, store, view) {
var column = view.getGridColumns()[colIndex],
html = '';
Ext.each(column.radioValues, function(rec) {
var inputValue = rec.inputValue;
var boxLabel = rec.boxLabel;
var checked = inputValue == value;
var name = view.id+"_Grdi_Column_Radio_"+record.data.Id+"_"+rowIndex;
html += "<input name='" + name + "' type='radio' " + (checked ? "checked" : "") + " colIndex='" + colIndex + "' rowIndex='" + rowIndex + "' value='" + inputValue + "'/>" + boxLabel;
});
return html;
},
tdCls: 'tdValign'
}]
});
me.callParent(arguments);
me.on('afterrender', function (grid, eOpts) {
this.el.on('click', function (event) {
var radio = event.getTarget('input[type="radio"]');
if (radio) {
var rowIndex = radio.getAttribute("rowIndex");
var colIndex = radio.getAttribute("colIndex");
this.getStore().getAt(rowIndex).set('FeeModel',radio.value);
}
}, this);
});
}
});