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