suamikim
10 Oct 2012, 10:31 PM
Hy there,
i just created a simple grid with 2 columns (1 text-col & 1 action-col) and enabled the cell-editing for the text-column. Unfortunately it is not possible to navigate between the inline-editors by pressing the tab-key.
Working example: http://jsfiddle.net/4tp7M/
Ext.onReady(function() {
var grid, store;
store = Ext.create('Ext.data.Store', {
fields: ['name'],
data: { 'items': [
{ 'name': 'Lisa' },
{ 'name': 'Bart' },
{ 'name': 'Maggie' },
{ 'name': 'Homer' },
{ 'name': 'Marge' }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
grid = Ext.create('Ext.grid.Panel', {
title: 'grid',
width: 200,
height: 200,
store: store,
columns: [{
header: 'Name',
dataIndex: 'name',
flex: 1,
field: 'textfield'
},{
xtype: 'actioncolumn',
width: 20,
align: 'right',
items: [{
iconCls: 'add-trigger',
handler: function() {
alert('Action column pressed!');
}
}]
}],
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
renderTo: Ext.getBody()
});
});
What i would like to do here step-by-step:
* Open the first inline-editor by clicking with the mouse on the "Lisa"-cell (working)
* Simultaneously open the next inline-editor (for the "Bart"-cell) and close the active one by pressing the tab-key
* This should also work in the other direction by pressing Shift+Tab
This is working with ExtJS 4.1.1 as you can see in my second working example (same code, only different framework-version): http://jsfiddle.net/4tp7M/1/
Unfortunately i cannot change the framework by now so i need a fix for this in 4.0.2a and would really appreciate if someone could help me out with this or at least point me in the right direction.
Thanks,
mik
i just created a simple grid with 2 columns (1 text-col & 1 action-col) and enabled the cell-editing for the text-column. Unfortunately it is not possible to navigate between the inline-editors by pressing the tab-key.
Working example: http://jsfiddle.net/4tp7M/
Ext.onReady(function() {
var grid, store;
store = Ext.create('Ext.data.Store', {
fields: ['name'],
data: { 'items': [
{ 'name': 'Lisa' },
{ 'name': 'Bart' },
{ 'name': 'Maggie' },
{ 'name': 'Homer' },
{ 'name': 'Marge' }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
grid = Ext.create('Ext.grid.Panel', {
title: 'grid',
width: 200,
height: 200,
store: store,
columns: [{
header: 'Name',
dataIndex: 'name',
flex: 1,
field: 'textfield'
},{
xtype: 'actioncolumn',
width: 20,
align: 'right',
items: [{
iconCls: 'add-trigger',
handler: function() {
alert('Action column pressed!');
}
}]
}],
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
renderTo: Ext.getBody()
});
});
What i would like to do here step-by-step:
* Open the first inline-editor by clicking with the mouse on the "Lisa"-cell (working)
* Simultaneously open the next inline-editor (for the "Bart"-cell) and close the active one by pressing the tab-key
* This should also work in the other direction by pressing Shift+Tab
This is working with ExtJS 4.1.1 as you can see in my second working example (same code, only different framework-version): http://jsfiddle.net/4tp7M/1/
Unfortunately i cannot change the framework by now so i need a fix for this in 4.0.2a and would really appreciate if someone could help me out with this or at least point me in the right direction.
Thanks,
mik