PDA

View Full Version : Grid roweditor weird focus to button



Hakkert
28 Jan 2013, 6:48 AM
Hi

I have an editable grid with a textfield of vtype



Ext.apply(Ext.form.VTypes, { 'customDecimalText': 'Bedrag moet in formaat : -1234.56',
'customDecimalMask': /[\-\+0-9\.]/,
'customDecimalRe': /^[-]\d+([.]{1}\d{1,2})?$/,
'customDecimal': function (v) {
return this.customDecimalRe.test(v);
}
});

I only want negative numbers so i'll start with - Since this is not a valid customdecimal the editor will disable the save button of the roweditor. Then i type a number so the field is valid. When this happens the save button is enabled but the field loses focus. I tried to set the focus on validitychange but it seems that the loss of focus happens after that.

Is this a bug or is there a way around this? I know i can do the checks when i click on the save button but if i do that can i disable the validation while typing? Or do i have to manually check the fields?

Thnx

scottmartin
28 Jan 2013, 11:52 AM
Please provide an example of what you are trying to achieve. You can use the API grid example to start with:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel

Scott.

Hakkert
28 Jan 2013, 11:32 PM
Hi Scott

Hereby some code. You already have the vtype.


var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', { clicksToEdit: 2,
id: 'rowEditor',
name: 'rowEditor',
listeners: {

afteredit: {
fn: function (rowEditor, obj, data, rowIndex) {
SOME SAVE CODE
}
},
canceledit: function (rowEditor, data, eOpt) {

}
}
});




The grid:



var creditGrid = Ext.create('Ext.grid.Panel', {
store: store,
loadMask: true,
region: 'center',
layout: 'fit',
name: 'creditGrid',
id: 'creditGrid',
columns: [
{ text: 'factuurnummer', dataIndex: 'factuurnummer', width: 100, editor: { xtype: 'textfield', allowBlank: true, minLength: 1, maxLength: 64 } },
{
text: 'creditbedrag', dataIndex: 'creditbedrag',
editor: {
xtype: 'numberfield',
vtype: 'customDecimal',
allowBlank: true

}
},
{ text: 'creditomschrijving', dataIndex: 'creditomschrijving', width: 300, editor: { xtype: 'textfield', allowBlank: true, minLength: 1, maxLength: 64} }
],
columnLines: true,
width: '100%',
height: '100%',
title: 'Crediteren',
plugins: [rowEditing],
listeners: {
itemdblclick: function (view, rec, item, index, eventObj) {

},


beforeedit: function (rowEditor, rec) {
if (rec.record.get('imn_mfn') == 1) {
rowEditor.grid.getPlugin().editor.form.findField('factuurnummer').disable();
}
}
}
});




Now i double click on the grid line. I type - in the box "creditbedrag". This value is not valid on its own but since i want negative numbers only it needs to be typed. When i the - the "save" button of the row editor is disabled (which is correct) and the focus stays in "creditbedrag". Then i type for example a 1. This is a valid value for "creditbedrag". The save button is enabled but the focus does not return to "creditbedrag". So i need to click the field again to type.

I tried textfield with the vtype but also the same problem. I tried to set the focus on validityChange but thats to soon cause after that the field looses focus.

So what i want is this. When i type the 1 after the - the button save should be enabled, but the focus should also return to the field is was in.

Thnx