首页 > 代码库 > 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中显示单选按钮