首页 > 代码库 > Extjs4.2 GridPanel中显示单选按钮
Extjs4.2 GridPanel中显示单选按钮
效果:如上图。
代码:其中需要显示单选按钮的列
{ 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 = http://www.mamicode.com/rec.inputValue; "_Grdi_Column_Radio_"+record.data.Id+"_"+rowIndex; html += "<input name=‘" + name + "‘ type=‘radio‘ " + (checked ? "checked" : "") + " colIndex=‘" + colIndex + "‘ rowIndex=‘" + rowIndex + "‘ value=http://www.mamicode.com/‘" + 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: 0, initComponent: function () { var me = this; var store = Ext.create("Yxd.store.Project", { autoLoad: true }); Ext.applyIf(me, { store: store, columns: [ { flex: 1, dataIndex: ‘Id‘, text: ‘Id‘, hidden: true, align: ‘center‘ }, { text: ‘序号‘, xtype: ‘rownumberer‘, width: 50, tdCls: ‘tdValign‘, align: ‘center‘ }, { dataIndex: ‘Name‘, text: ‘项目名称‘, flex: 1, align: ‘left‘, tdCls: ‘tdValign‘ }, { 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 =http://www.mamicode.com/ rec.inputValue; var boxLabel = rec.boxLabel; var checked = inputValue =http://www.mamicode.com/= 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=http://www.mamicode.com/‘" + 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); }); } });
Extjs4.2 GridPanel中显示单选按钮
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。