Extjs 6.0 RadioButton Column

Question

私は、データグリッド上に5つの別個の列が必要で、そのうちの1つに単一のラジオボタンがある、本当に特殊なケースがあります。

はExtJSの上ので、私は自分自身をそれを作成し、任意の「radiocolumn」要素を発見し、このような何かを行くしませんでした：あなたは、「私のクラッサ値である見ることができるように

Ext.define('Ext.grid.column.RadioColumn', { 
extend: 'Ext.grid.column.CheckColumn', 

alternateClassName: 'Ext.ux.RadioColumn', 

alias: 'widget.radiocolumn', 

groupField: undefined, 

allowUncheck: false, 

renderer : function(value, meta) { 

    var classer = "PROBLEM_UNCHECKED"; 

    meta.innerCls = ""; 
    if (this.disabled) { 
     meta.tdCls += ' ' + this.disabledCls; 
    } 
    if (value) { 
     classer = "PROBLEM_CHECKED"; 
    } 

    return "<span class='"+ classer + "' role='button' tabIndex='0'></span>"; 
}, 

だから私の問題は、あります実際のクラス値の代わりに「PROBLEM_CHECKED」および「PROBLEM_UNCHECKED」を使用します。私はすべての内線とオンラインを検索しましたが、inpsect要素でも、この要素が検索するクラスが通常のラジオボタンと一致しない場合でも、ラジオボタンのデフォルトクラス値（一般的にextが使用する）は見つかりませんでした。

Answer 1

xtype widgetcolumnを使用すると、ラジオボタンをグリッド列に追加できます。 Here'sデモンストレーションのための小さな例。

Answer 2

ExtJSには'widgetcolumn'コンポーネントがあります。これを使用することができます。

ウィジェット列は、この列のセルに属するウィジェットまたはコンポーネントのタイプを示すxtypeを指定するウィジェット設定オブジェクトで構成されます。

Sencha Fiddleデモを作成しました。どのように働いているかを示します。これがあなたを助けることを願っています。

Ext.create('Ext.data.Store', { 
    storeId: 'simpsonsStore', 
    fields: ['name', 'email', 'phone', { 
     name: 'checked', 
     type: 'boolean', 
     defaultValue: true 
    }], 
    data: [{ 
     name: 'Lisa', 
     email: 'lisa@simpsons.com', 
     phone: '555-111-1224' 
    }, { 
     name: 'Bart', 
     email: 'bart@simpsons.com', 
     phone: '555-222-1234' 
    }, { 
     name: 'Homer', 
     email: 'homer@simpsons.com', 
     phone: '555-222-1244' 
    }, { 
     name: 'Marge', 
     email: 'marge@simpsons.com', 
     phone: '555-222-1254' 
    }] 
}); 

Ext.create('Ext.grid.Panel', { 
    title: 'Simpsons', 
    store: Ext.data.StoreManager.lookup('simpsonsStore'), 
    columns: [{ 
     text: 'Name', 
     dataIndex: 'name' 
    }, { 
     text: 'Email', 
     dataIndex: 'email', 
     flex: 1 
    }, { 
     text: 'Phone', 
     dataIndex: 'phone' 
    }, { 
     text: 'Status', 
     width: 150, 
     xtype: 'widgetcolumn', 
     dataIndex: 'checked', 
     onWidgetAttach: function (column, widget, record) { 
      widget.down(`[inputValue=${record.get('checked')}]`).setValue(true); 
     }, 
     widget: { 
      xtype: 'radiogroup', 
      items: [{ 
       boxLabel: 'Yes', 
       inputValue: true 
      }, { 
       boxLabel: 'No', 
       inputValue: false 
      }] 
     } 
    }], 
    height: 200, 
    width: 400, 
    renderTo: Ext.getBody() 
});