PDA

View Full Version : How to share an cell editing editor between columns, or is that a bad idea?



Patrick Bennett
4 Mar 2014, 8:20 AM
Hi, I am building a grid with the following code to create columns in sets of 2 (one for revenue, one for expense). My questions:

1) Is it inefficient to have the two in-line definitions of the editor that are the same?
2) Can I pull that out into one object?
3) Would it be good to extend number field and if so how best to do that?

Here's the code



columns: [{ xtype: 'numbercolumn', text: 'Revenue', renderer: 'usMoney', align: 'right', lockable: false, style: 'text-align: center;', editor: { xtype: 'numberfield', minValue: 0, selectOnFocus: true, keyNavEnabled: false, allowExponential: false, allowOnlyWhitespace: false, hideTrigger: true, enableKeyEvents: true, listeners: { keydown: function(field, e, eopts) { if (e.getKey() == e.V && e.ctrlKey) { var objEditor = field.up(); objEditor.cancelEdit(); objEditor.grid.ownerCt.fireEvent('gridPaste'); } }, scope: this } }, dataIndex: 'initiative_' + item.data.id + '_revenue'}, { xtype: 'numbercolumn', text: 'Expense', renderer: 'usMoney', align: 'right', lockable: false, style: 'text-align: center;', editor: { xtype: 'numberfield', minValue: 0, selectOnFocus: true, keyNavEnabled: false, allowExponential: false, allowOnlyWhitespace: false, hideTrigger: true, enableKeyEvents: true, listeners: { keydown: function(field, e, eopts) { if (e.getKey() == e.V && e.ctrlKey) { var objEditor = field.up(); objEditor.cancelEdit(); objEditor.grid.ownerCt.fireEvent('gridPaste'); } }, scope: this } }, dataIndex: 'initiative_' + item.data.id + '_expense'}]

scottmartin
4 Mar 2014, 9:39 AM
Extend the 'numberfield' xtype and create your own .. and then use that xtype



Ext.define('MyApp.view.field.MyNumberField', {
extend : 'Ext.form.field.NumberField',
xtype : 'mynumberfield',

..

});

editor: {
xtype: 'mynumberfield',
..
}

Patrick Bennett
4 Mar 2014, 10:16 AM
Thanks for your reply! I actually work in Sencha Architect exclusively so I created a new panel under Views, dropped in a number field, right clicked on it and selected "Promote To Class". Then I set all the settings I had in the editor, including the "keydown" event, and gave it an alias of "gridnumberfield". Then the code you had after the define worked as expected.

Final code for the class:



Ext.define('SEI.view.GridNumberField', { extend: 'Ext.form.field.Number', alias: 'widget.gridnumberfield',
allowOnlyWhitespace: false, enableKeyEvents: true, selectOnFocus: true, hideTrigger: true, keyNavEnabled: false, spinDownEnabled: false, spinUpEnabled: false, allowExponential: false, minValue: 0,
initComponent: function() { var me = this;
Ext.applyIf(me, { listeners: { keydown: { fn: me.onNumberfieldKeydown, scope: me } } });
me.callParent(arguments); },
onNumberfieldKeydown: function(textfield, e, eOpts) { if (e.getKey() == e.V && e.ctrlKey) { var objEditor = textfield.up(); objEditor.cancelEdit(); objEditor.grid.ownerCt.fireEvent('gridPaste'); } }
});