在 ExtJS Grid 中选中复选框时如何专注于可编辑的文本字段？答案

【问题标题】：How to focus on editable textfield when checkbox is checked in ExtJS Grid?在 ExtJS Grid 中选中复选框时如何专注于可编辑的文本字段？
【发布时间】：2014-06-26 05:01:57
【问题描述】：

我正在使用 checkcolumn 和 celledit 创建一个网格。我有 3 列 1 用于复选框，其他是可编辑的文本字段，第三列是产品名称，使用 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);

} 
});

【问题讨论】：

标签： extjs grid extjs4

【解决方案1】：

在监听器的帮助下（使用edit事件），如果已经勾选，则获取记录的引用并应用focus()方法。

请参阅以下链接以供参考。

http://docs.sencha.com/extjs/4.0.7/#!/api/Ext.grid.plugin.CellEditing-event-edit

查看以上链接中的编辑事件。

谢谢

【讨论】：

【解决方案2】：

我解决了这个问题：

  checkchange : function( CheckColumn, rowIndex, checked, eOpts ){

         //me.getPlugin('cellplugin').startEdit(record,1);     
         me.getPlugin('cellplugin').startEditByPosition({row: rowIndex, column: 1});        

   }}

这有效.... Hariharan 感谢您的回答！

【讨论】：