Extjs4.2 GridPanel中显示单选按钮

Posted 2020-09-18 沈阳晓东

效果：如上图。

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

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