PDA

View Full Version : CellEditing textfield editor disappears on selectText()



jasewell
20 Mar 2013, 9:32 AM
I've got a large grid with a CellEditing plugin and numberfields and textfields. I want to select all the text in a cell when the user clicks or tabs into it, so I extended the CellEditing plugin and added that behavior to the showEditor method. It works fine for numberfields, but on textfields the editor appears and then immediately disappears, leaving just the grid cell, selected. Any theories on why this happens?

Here's the extended CellEditing plugin:


Ext.define('My.grid.plugin.CellEditorWithSelectAll', {
extend: 'Ext.grid.plugin.CellEditing',
showEditor: function (ed, context, value) {
this.callParent(arguments);
ed.field.selectText && ed.field.getValue() && ed.field.selectText();
}
});

Here's a typical column definition for a textfield:


{
"text": "Letter",
"displayText": "Post Letter",
"dataIndex": "post_letter",
"width":50,
"type": "string",
"editor":{
"xtype":"textfield",
"regex": "/^[a-zA-Z]+$/",
"regexText": "Please enter letters only"
}
},

And a typical column definition for a numberfield (these are the ones that are working):

{
"text": "Post",
"displayText": "Post",
"dataIndex": "post6",
"width":50,
"type": "string",
"editor":{
"xtype":"numberfield",
"minValue":0,
"maxValue":100
},
"summaryType":"gradebookDefaultColumnSummaryAverage",
"summaryRenderer":"gradebookDefaultColumnSummaryRoundedRenderer"
},

scottmartin
21 Mar 2013, 8:00 AM
See if this is what you are looking for:



Ext.create('Ext.data.Store', {
storeId : 'simpsonsStore',
fields : ['name', 'email', 'change'],
data : {'items' : [
{ 'name' : 'Lisa', 'email' : '[email protected]', 'change' : 100 },
{ 'name' : 'Bart', 'email' : '[email protected]', 'change' : -20 },
{ 'name' : 'Homer', 'email' : '[email protected]', 'change' : 23 },
{ 'name' : 'Marge', 'email' : '[email protected]', 'change' : -11 }
]},
proxy : {
type : 'memory',
reader : {
type : 'json',
root : 'items'
}
}
});

var editor = {
xtype: 'textfield',
allowBlank: false,
selectOnFocus: true
};

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});

Ext.create('Ext.grid.Panel', {
title : 'Simpsons',
store : Ext.data.StoreManager.lookup('simpsonsStore'),
columns : [
{ header: 'Name', dataIndex: 'name', editor: editor },
{ header: 'Email', dataIndex: 'email', flex: 1, editor: editor },
{ header: 'Change', dataIndex: 'change', editor: editor }
],
height : 200,
width : 400,
plugins : [ cellEditing ],
renderTo : Ext.getBody()
});


Scott.

jasewell
21 Mar 2013, 8:14 AM
See if this is what you are looking for:

(The example code from the Ext.grid.plugin.CellEditing doc page.)

Scott.
Not really, no.
Let me restate my issue more succinctly: Calling selectText() on the textfield created by CellEditing to edit a grid cell causes the field to vanish. I don't know if this is a bug, a feature, or something that would work better if I came at it from a different direction.

scottmartin
21 Mar 2013, 8:20 AM
would work better if I came at it from a different direction

Curious .. was my approach not working as you expected?

Scott.

jasewell
21 Mar 2013, 8:48 AM
Curious .. was my approach not working as you expected?

Scott.
Aha! Now that's I've looked it over more closely, yes, it works great. I was looking at CellEditing, and didn't notice that you'd set selectOnFocus on the editor. Thank you.