checkcolumn と celledit でグリッドを作成しています。3 つの列 1 はチェックボックス用、もう 1 つは編集可能なテキスト フィールド、3 番目は製品名で、celledit を使用して価格を編集します。
レコードのチェックボックスをチェックするとき、フォーカスはその特定のレコードのテキスト フィールドにある必要があります。
コードサンプルは次のとおりです。
Ext.define('MyApp.view.EntryPage',
{
extend : 'Ext.grid.Panel',
alias : 'widget.entryPage',
title : 'Product Price Entry',
store : 'ProductStore',
loadMask: true,
plugins: [Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit: 1})],
initComponent:function(){
var me = this;
this.selModel = {xtype:'cellmodel'},
this.columns = {
defaults:{sortable : true,hideable : true,menuDisabled : true,align : 'left',style : 'text-align:left'},
items:[
{
xtype: 'checkcolumn',
header: 'Check Me',
dataIndex : 'active',
listeners:{
checkchange : function( CheckColumn, rowIndex, checked, eOpts ){
// Select the textfield
}}
},
{
text : 'Price',
flex:0.75,
sortable : false,
hideable : false,
dataIndex : 'unitprice',
editor: 'textfield'
},
{
text : 'Product Name',
flex:2,
dataIndex : 'pname'
}
]};
//this.features = [];
this.callParent(arguments);
}
});