效果:如上图。

代码:其中需要显示单选按钮的列

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

最新文章

  1. Oracle RAC客户端tnsnames.ora相关配置及测试
  2. mysql求最大第二,最大第三个数
  3. struts入门实例
  4. wc
  5. codevs 3143 二叉树的序遍历
  6. 使用HackRF+GNU Radio 破解吉普车钥匙信号
  7. JavaScript Garden
  8. Flink Program Guide (8) -- Working with State :Fault Tolerance(DataStream API编程指导 -- For Java)
  9. HTTP2.0协议
  10. Spring+Redis(keyspace notification)实现定时任务(订单过期自动关闭)
  11. redis多端口,多实例。
  12. 19_Python元组总结
  13. 看雪.TSRC 2017CTF秋季赛第三题
  14. Electron的代码调试
  15. [Redis]Redis的设计与实现-链表/字典/跳跃表
  16. leetcode 之 Two Sum II - Input array is sorted c++
  17. console.log在IE浏览器中会有异常
  18. 详解FPGA中的建立时间与保持时间
  19. 解决import caffe 时no module named protobuf的报错
  20. 03.设计模式_抽象工厂模式(Abstract Fcatory)

热门文章

  1. 理解vue 修饰符sync
  2. 七.django模型系统(一)
  3. 第一周java学习总结
  4. ModBus-RTU详解
  5. postman接口测试笔记
  6. 部署kubernetes-dashboard
  7. Windows 10中Oracle数据库导出到Access数据库(MDB)
  8. uCosII中的任务
  9. linxu上安装mongodb3.6实战
  10. matlab 常用函数