Question

var tmp= "<table border='0' cellspacing='0' cellpadding='0'><tr>";
tmp += "<td  height='35' align='left' valign='middle' ><input name='' id='' type='text'></td>";
tmp += "</tr></table>";
Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data:{'items':[
        {"name":'KK', "email":"lisa@simpsons.com", "phone":tmp},
        {"name":'AB', "email":"bart@simpsons.com", "phone":tmp},
        {"name":'FGF', "email":"home@simpsons.com", "phone":tmp},
        {"name":'dfsd', "email":"marge@simpsons.com", "phone":tmp}
    ]},
    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'},
        {header: 'Email', dataIndex: 'email', flex:1},
        {header: 'Phone', dataIndex: 'phone'}
    ],
    selType: 'cellmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

在上面的手机无代码字段中，我添加了html文本框。如果我按下键盘中的左/右键，它将移动到左侧单元格或右侧单元格，而不是在文本字段中移动光标。任何人都能为这一个提供解决方案吗？我正在使用extjs 4.0.7。

Answer 1

网格上有一些事件正在抓住按键。而不是试图在单元格的值中“插入”html代码，为什么不直接使用默认的“cellediting”插件，如原始示例中所指定的那样？

只需将editor块从电子邮件列移至电话栏：

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        {header: 'Name',  dataIndex: 'name'},
        {header: 'Email', dataIndex: 'email', flex:1},
        {header: 'Phone', dataIndex: 'phone',
            editor: {
                xtype:'textfield',
                allowBlank:false
            }
        }
    ],
    selType: 'cellmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

这适用于我，一次点击一次（如果将clicksToEdit从1更改为2，则为两次），您现在处于编辑模式（默认为文本字段），然后您可以“导航”您的手机使用关键箭头编号。

使用此解决方案，您不需要创建“tmp”变量（html代码），因此不会发生事件竞争。

无法在extjs grid textfiled列中执行向左箭头和向右箭头键操作

1 个答案: