PDA

View Full Version : How to make a grid cellediting combobox to be editable only by mouse.



swalker@pintnight.com
19 Feb 2013, 1:47 PM
I have a grid that is cellediting. I have a combobox that I only want it to be editable by the mouse, I do not want the user to use the keyboard to type (edit) the combobox. So, I do I go about making the combobox only accept mouse events?

scottmartin
19 Feb 2013, 2:38 PM
You can create a quick override to skip editing on enter key:



Ext.define('MyEditing', {
override : 'Ext.grid.plugin.Editing',

// do nothing
onEnterKey: function(e) { }

});


Scott.

swalker@pintnight.com
19 Feb 2013, 2:54 PM
Where exactly do I add override and onEnterKey? Does the enter key prevent the user from typing anything in cell? I don't want the user to be able to type anything as if the cell is not editable, but it is with a mouse.

The code below is just part of what I extracted, but hopefully there is enough that will provide what I'm trying to do.



Ext.define('Todo.view.Todo', {
extend: 'Ext.panel.Panel',

requires: [
'Ext.selection.CellModel',
'Ext.ux.CheckColumn'
],

renderTo: 'maincontentarea-body',

header: false,

layout: {
type: 'hbox',
align: 'stretch'
},

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'gridpanel',
flex: 5,

id: 'grid_formatconfig',

store: todoStore,

border: false,

stateful: true,
stateId: 'stateGrid',
maximizable: true,

trackOver: false,

multiSelect: true,

selModel: {
selType: 'cellmodel'
},
plugins: [cellEditing],

columns: [
{
header: abc.gettext("Subject"),
xtype: 'gridcolumn',
dataIndex: 'subject',
flex: 3,
id: 'grid-subject',
sortable: true
},
{
header: abc.gettext("Status"),
dataIndex: 'status',
width: 160,
id: 'grid-status',
sortable: true,
renderer: formatStatus,
field: {
xtype: 'combobox',
typeAhead: true,
allowBlank: false,
editable: true,
triggerAction: 'all',
selectOnTab: false,
store: storeStatusList,
displayField: 'status',
valueField: 'status_id',
lazyRender: true,
listClass: 'x-combo-list-small',
lastQuery: ''
}
},
],
listeners: {
celldblclick: function(gridView, htmlElement, columnIndex, dataRecord) {
// We only want the subject to be able to double click on to open
return (columnIndex == 0) ? true : false;
},
selectionchange: function(selModel, selected, options) {
console.log("selectionchange: " + selModel + selected + options);
}
},
}
],
});

Ext.QuickTips.init();

me.callParent(arguments);
}
}

scottmartin
19 Feb 2013, 3:00 PM
See if this is what you are looking for:
http://jsfiddle.net/fWvRm/

Editing still allows enter to finish edit.

Scott.

swalker@pintnight.com
19 Feb 2013, 3:58 PM
I'm not able to see that the enter or editing the "Type" combobox is having any effect. I've added a alert("in onEnterKey");, clicked on "Update" which reloads with my changes. I didn't see any alert popups when typing or hitting the enter key.

swalker@pintnight.com
20 Feb 2013, 11:14 AM
Bump?

scottmartin
20 Feb 2013, 12:02 PM
Can you specify which update you are referring to? I see many versions on jsFiddle

Perhaps I am missing the new issue .. I posted the code to disable access to editing using the enter key (only mouse) and the keys still work in the combo after edit mode ..

Can you explain in a little more detail?

Scott.

swalker@pintnight.com
20 Feb 2013, 12:33 PM
What I mean in that in your example in the "Type" column, you can use the mouse to drop down to choose either "Child" or "Parent". But you can also click on the text and change "Child" and "Parent" to something else, I don't want anybody to be able to do that, I want that combobox to be a read-only state such as not "editable: false", but that disables the combobox dropdown access with the mouse to choose "Child" or "Parent".

What I want is to only allow the user to choose what is in the combobox, they cannot type ahead or edit it to something else.

scottmartin
20 Feb 2013, 1:07 PM
such as not "editable: false", but that disables the combobox dropdown access with the mouse to choose "Child" or "Parent".

The combo is select only .... but I can still select Parent/Child ... is this correct?

http://jsfiddle.net/fWvRm/6/

swalker@pintnight.com
20 Feb 2013, 1:17 PM
Thanks, what I found out was that having 'typeAhead: true' was messing up what I was trying to do.

Thanks for helping me out here!

Daniil
1 Jul 2013, 7:03 AM
Hi @scottmartin,

Are you not considering it a bug?

Expected behavior on Enter: the selected item in ComboBox's list actually applies to the edited cell and the editor moves to the next cell.

Current behavior on Enter: a ComboBox just collapses and the selected item is lost, i.e. not applies to the edited cell.

Daniil
4 Jul 2013, 8:12 PM
Current behavior on Enter: a ComboBox just collapses and the selected item is lost, i.e. not applies to the edited cell.

I am wrong here. The selected item does apply to the edited cell. So, it is OK here. Though, it would be nice to have a config option to get the editor of the next row activated in this scenario. But it is definitely not a bug, maybe, a feature request.