I am creating a grid with checkcolumn and celledit. I have 3 columns 1 is for checkboxes and other is editable text field and 3rd is the productname, using celledit to edit the price.
When I will check a checkbox on a record the focus should be on the textfield for that particular record.
Here is the code sample:
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);
}
});
With the help of listener(use edit event), if it has been checked, get the reference of record and apply focus() method.
Refer below link for reference.
http://docs.sencha.com/extjs/4.0.7/#!/api/Ext.grid.plugin.CellEditing-event-edit
see the edit event in the above link.
Thanks
I solved this as follows:
checkchange : function( CheckColumn, rowIndex, checked, eOpts ){
//me.getPlugin('cellplugin').startEdit(record,1);
me.getPlugin('cellplugin').startEditByPosition({row: rowIndex, column: 1});
}}
This worked.... Hariharan thanks for your answer!!
来源:https://stackoverflow.com/questions/16079921/how-to-focus-on-editable-textfield-when-checkbox-is-checked-in-extjs-grid