无法在extjs grid TextField列中执行左箭头和右箭头键操作
在上面的phone no字段代码中,我添加了html文本框。若我按下键盘上的左/右键,它将移动到左单元格或右单元格,而不是移动文本字段中的光标。有人能给出这个问题的解决方案吗?我使用的是extjs 4.0.7。网格上有捕捉按键的事件。 与其尝试在单元格的值中插入html代码,不如使用原始示例中指定的默认cellediting插件 只需将编辑器块从电子邮件列移动到电话列:无法在extjs grid TextField列中执行左箭头和右箭头键操作,extjs,Extjs,在上面的phone no字段代码中,我添加了html文本框。若我按下键盘上的左/右键,它将移动到左单元格或右单元格,而不是移动文本字段中的光标。有人能给出这个问题的解决方案吗?我使用的是extjs 4.0.7。网格上有捕捉按键的事件。 与其尝试在单元格的值中插入html代码,不如使用原始示例中指定的默认cellediting插件 只需将编辑器块从电子邮件列移动到电话列: var tmp= "<table border='0' cellspacing='0' cellpadding='0'&
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()
});
这对我来说很有用,如果您将clicksToEdit从1更改为2,则单击一次或两次,默认情况下您现在处于编辑模式文本字段,然后您可以使用按键箭头导航您的电话号码
使用此解决方案,无需创建tmp变量html代码,因此无需进行事件竞赛。感谢您的回复。实际上,我的要求是,在网格中,我需要动态地为列设置文本框。有些行可能根本没有文本框。这就是为什么我使用HTML代码来添加文本框。我明白了。也许你可以看看斯基特尔书房旁的组件栏:。有了这个插件,你可以在你的列上有一个渲染器,在给定列的每个单元格上显示一个“textfield”。如果值为空,您甚至可以决定是否显示文本字段。。。似乎符合你的要求。
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()
});