我正在使用Ext.grid.plugin.CellEditing插件来启用网格单元格的编辑。在一种情况下,我想以编程方式进入特定单元格的编辑模式。看起来旧的方法是使用startEdit方法:
http://docs.sencha.com/extjs/6.2.1/classic/Ext.grid.plugin.CellEditing.html#method-startEdit
但它现在被标记为已弃用,注意:
使用网格的可操作模式激活单元格内容。启动 使用指定的列定义编辑指定的记录 定义正在编辑的字段。
可操作模式采用一个布尔值,打开/关闭ARIA可操作模式。在打开该模式后,我不知道我需要做什么,实际上开始编辑单元格。有什么建议吗?
答案 0 :(得分:1)
实际上setActionableMode方法有两个参数
@param {Boolean} enabled
@param {Ext.grid.CellContext} position
如何获取CellContext
?
grid.getView().getPosition(record, grid.getColumns()[0])
在此 FIDDLE 中,我使用grid
,cellediting
和setActionableMode
创建了一个演示。我希望这有助于/指导您实现您的要求。
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: ['name', 'email', 'phone']
});
Ext.create('Ext.data.Store', {
storeId: 'myStore',
model: 'MyModel',
data: [{
name: 'Lisa',
email: 'lisa@simpsons.com',
phone: '555-111-1224'
}, {
name: 'Bart',
email: 'bart@simpsons.com',
phone: '555-222-1234'
}, {
name: 'Homer',
email: 'homer@simpsons.com',
phone: '555-222-1244'
}, {
name: 'Marge',
email: 'marge@simpsons.com',
phone: '555-222-1254'
}]
});
Ext.create('Ext.grid.Panel', {
title: 'My Data',
store: 'myStore',
columns: [{
header: 'Name',
dataIndex: 'name',
flex: 1,
editor: 'textfield'
}, {
header: 'Email',
dataIndex: 'email',
flex: 1,
editor: {
completeOnEnter: false,
// If the editor config contains a field property, then
// the editor config is used to create the Ext.grid.CellEditor
// and the field property is used to create the editing input field.
field: {
xtype: 'textfield',
allowBlank: false
}
}
}, {
header: 'Phone',
flex: 1,
dataIndex: 'phone'
}],
selModel: 'cellmodel',
plugins: {
ptype: 'cellediting',
clicksToEdit: 1
},
renderTo: Ext.getBody(),
tools: [{
type: 'plus',
handler: function () {
var grid = this.up('grid'),
store = grid.getStore(),
rec = Ext.create('MyModel', {
name: '',
email: '',
phone:'1234567890'
}),
context;
store.add(rec);
//Get Ext.grid.CellContext of first cell using getColumns()[0]
context = grid.getView().getPosition(rec, grid.getColumns()[0])
//Start editing in first cell
grid.setActionableMode(true, context);
}
}]
});
}
});