PDA

View Full Version : Grid Cell Editing: having combos automatically expand when editing the cell



martin.povolny
7 Dec 2011, 10:57 PM
I needed combos to automaticaly expand when used as field editors in a grid with cell editing.

I tried to call combo.expand() on focus.

Problem: focus is not called when navigating using keyboard (tab, alt-tab) while editing.

Below is the code I use to create the combo editor:



/*
* create grid editor combobox with values given in an array [ [], [], [] ]
* FIXME: po uprave ajaks.jsp zrusit 'Ext.flatten'
*/
function createComboEditorFromArray( data ) {
return {
xtype: 'combobox',
store: Ext.flatten( data ),
triggerAction: 'all',
mode: 'local',
lazyRender: true,
listClass: 'x-combo-list-small',
editable: true,
allowBlank: false,
forceSelection: true,
lazyInit: false,
listeners: {
//focus: function() {
// this.expand(); /* expand on focus */
//},
edstartedit: function() {
this.expand(); /* expand on edstartedit */
}
}
};
}


The commented out focus handler is what I expected to work. The edstartedit handler is what I had to add together widh the override below:



/* override Ext.Editor to add new event: *
* edstartedit -- called when editing widget is created and activated
*
*/
Ext.override(Ext.Editor, {
startEdit : function(el, value) {
var me = this,
field = me.field;


me.completeEdit();
me.boundEl = Ext.get(el);
value = Ext.isDefined(value) ? value : me.boundEl.dom.innerHTML;


if (!me.rendered) {
me.render(me.parentEl || document.body);
}


if (me.fireEvent('beforestartedit', me, me.boundEl, value) !== false) {
me.startValue = value;
me.show();
field.reset();
field.setValue(value);
me.realign(true);
field.focus(false, 10);
if (field.autoSize) {
field.autoSize();
}
me.editing = true;


// Changed here: added a new event
me.field.fireEvent('edstartedit', me.field);
}
},
});


I wonder if there is a better way to do get the combos expanded.

-mp

mitchellsimoens
9 Dec 2011, 9:14 AM
Please post in the appropriate forum. I have moved this to the Ext JS 3 Help forum for you.