PDA

View Full Version : How to hook beforestartedit



john76543
11 Nov 2011, 5:40 AM
I'm quite new to ExtJS. I have a grid with comboboxes as columns, and I want to hook beforestartedit. But this is an event on Editor, and I'm not sure how to hook it?

Should I add the listener to the Column, the Field, or somewhere else? I'm generating my grid column layout via JSON so that format is preferred.

Thanks in advance! Ext 4.0.7

mitchellsimoens
11 Nov 2011, 6:28 PM
You can specify the editor config on the column as an actual Ext.grid.CellEditor instance. This is how I did it for someone else using the cell editing example:


editor : Ext.create('Ext.grid.CellEditor', {
editorId: 'availColumn',
revertInvalid : true,
field: Ext.create('Ext.form.field.Date', {
format: 'm/d/y',
minValue: '01/01/06',
disabledDays: [0, 6],
disabledDaysText: 'Plants are not available on the weekends'
})
})

Now you can specify the listeners as a config of the CellEditor.

john76543
12 Nov 2011, 1:18 AM
Would that be nested inside the column definition? So I could use xtype and do this from JSON?

At the moment I've worked around my problem by overriding startEdit on Ext.Editor but that seems a bit extreme!

mitchellsimoens
12 Nov 2011, 7:26 AM
This should work. This is a column definition from the cell editing example:


{
header: 'Available',
dataIndex: 'availDate',
width: 95,
renderer: formatDate,
editor : Ext.create('Ext.grid.CellEditor', {
editorId: 'availColumn',
field: Ext.create('Ext.form.field.Date', {
format: 'm/d/y',
minValue: '01/01/06',
disabledDays: [0, 6],
disabledDaysText: 'Plants are not available on the weekends'
})
}),
listeners : {
beforestartedit: function(editor, boundEl, value, opts) {
//do whatever
}
}
}

john76543
15 Nov 2011, 5:28 AM
So the beforestartedit definition is applied to the column, not the editor? I've tried this (but using xtypes) and it doesn't seem to fire..

mitchellsimoens
15 Nov 2011, 6:28 AM
I'm sorry, try putting it within the Ext.create for the editor

john76543
15 Nov 2011, 9:27 AM
Here's my column definition:



{
"text": "My column heading",
"width": 90,
"sortable": false,
"dataIndex": "userdet",
"editor": {
"xtype": "editor",
"field": {
"xtype": "combo",
"store": mystore,
"valueField": "userdet",
"displayField": "text",
"listClass": "x-combo-list-small",
"multiSelect": false
},
listeners: {
beforestartedit: myroutine
}
},
"tdCls": "wrapcell",
"renderer": myrenderer
}


But I get an errot when using an editor like this. In the column's startEdit method it calls field.reset() and reset is undefined.

The docs say column.editor is the same as column.field but I can only the field definition to work on the .field property, not the .editor...