在ExtJS网格中勾选复选框时，如何专注于可编辑的文本框？ [英] How to focus on editable textfield when checkbox is checked in ExtJS Grid?

问题描述

我正在使用checkcolumn和celledit创建一个网格。我有3列1是复选框，其他是可编辑的文本字段，第3是产品名称，使用celledit编辑价格。

当我将检查记录上的复选框时，重点应在该特定记录的文本框上。

以下是代码示例：

  Ext.define（' MyApp.view.EntryPage'，
 {
 extends：'Ext.grid.Panel'，
 alias：'widget.entryPage'，
 title：'Product Price Entry' 
存储：'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：{
 
 checkcha nge：function（CheckColumn，rowIndex，checked，eOpts）{
 //选择文本框
 
}} 
}，
 {
文本： 
 flex：0.75，
可排序：false，
可隐藏：false，
 dataIndex：'unitprice'，
编辑器：'textfield'
 }，
 {
 text：'Product Name'，
 flex：2，
 dataIndex：'pname'
} 
]}; 
 
 //this.features = []; 
 this.callParent（arguments）; 
 
} 
}）; 
  

解决方案

我解决了如下：

  checkchange：function（CheckColumn，rowIndex，checked，eOpts）{
 
 //me.getPlugin('cellplugin'） .startEdit（记录，1）; 
 me.getPlugin（'cellplugin'）。startEditByPosition（{row：rowIndex，column：1}）; 
 
}} 
  

这个工作....哈里兰感谢你的回答！

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);

} 
});

解决方案

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!!

这篇关于在ExtJS网格中勾选复选框时，如何专注于可编辑的文本框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！