アーカイブしようとしているものは、そのままでは使用できません。
チェックボックスを常に表示したいと思いますか?それ以外の場合、CellEditorプラグインはすでに探しているものです。
しかし、とにかく開始する必要があります (私は推測します)。ExtJS のクラスと画像を使用して、celleditior と共にセル内に一種の偽のコンボを表示するサンプル コードを次に示します。まだ修正する必要があると思われるものが 1 つあります。編集を開始する前に cellcontent をオーバーライドする必要があるため、celleditor はデフォルトのタイプのみを削除するように見えます。
この先行くの?もちろん、チェックボックスを一意の ID で変更し、Ext.Element をフェッチして、イベントを登録できるようにすることもできます。ただし、このアプローチには欠点が 1 つあります。レンダリング時間に注意する必要があります。そうしないと、取得しようとしているときにコンボが存在しません。したがって、このアプローチをお勧めします。レンダリングを開始する前にイメージを簡単に消去できます。
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{"name":"Lisa", "email":"lisa@simpsons.com", "phone":true},
{"name":"Bart", "email":"bart@simpsons.com", "phone":false},
{"name":"Homer", "email":"home@simpsons.com", "phone":true},
{"name":"Marge", "email":"marge@simpsons.com", "phone":true}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{header: 'Name', dataIndex: 'name', editor: 'textfield'},
{header: 'Email', dataIndex: 'email', flex:1},
{header: 'Phone', dataIndex: 'phone',
editor: { xtype: 'checkbox', inputValue: 'true', uncheckedValue: 'false' }, renderer: function(value){
return value ? '<span class="x-form-cb-checked"><div class="x-form-checkbox"></div></span>' : '<div class="x-form-checkbox"></div>';
}
}
],
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
これがJSFiddleです