2014-11-21 26 views
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":"[email protected]", "phone":tmp}, 
     {"name":'AB', "email":"[email protected]", "phone":tmp}, 
     {"name":'FGF', "email":"[email protected]", "phone":tmp}, 
     {"name":'dfsd', "email":"[email protected]", "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。无法在extjs网格文本文件列中执行左箭头和右箭头键操作

回答

0

网格上有事件捕捉按键。 为什么不像在原始示例中指定的那样使用默认的“cellediting”插件,而是试图将“html代码”插入到单元格的值中?

刚刚从电子邮件柱移动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() 
}); 

这个工作对我来说,一个(如果从1改变clicksToEdit 2或两次),你点击一次,你是现在处于编辑模式(默认情况下为文本框),然后您可以使用箭头键“导航”您的电话号码。

使用此解决方案,无需创建“tmp”变量(html代码),因此无需事件竞赛。

+0

谢谢你的回应。其实我的要求是,在网格中,我需要动态地为列设置文本框(某些行根本没有文本框)。这就是为什么我使用HTML代码来添加文本框。 – 2014-11-23 12:40:37

+0

我明白了。也许你可以看看“Skirtle's Den”的组件列:http://skirtlesden.com/ux/component-column。有了这个插件,你可以在你的列上有一个“渲染器”,在每个单元格(给定的列)上显示一个“文本字段”。你甚至可以决定是否显示文本框,如果该值是空的......似乎符合你的要求。 – 2014-11-24 16:20:47