How to blank a combo in an Editor Grid?

Posted in xn--kfs74mzzid01b.com edit by anonym on January 7th, 2009

There is a thread in another forum with no responses that describes my problem:
http://extjs.com/forum/showthread.php?t=28077

Is there a relatively easy way to address this problem?

Thanks.

-------------------------------------------------------------------------------

I have a an editor grid that is very similar to the one in Ext examples here: http://extjs.com/deploy/dev/examples...edit-grid.html

What I am trying to do is clear a field that has a ComboBox underneath. For example in the above example when you blank a field, on "blur" it gets populated back with the original value. I have tried adding allowBlank and all kinds of other options to the ComboBox and or Ext.Editor and nothing seems to work.

editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'light',
lazyRender:true,
allowBlank: true,
forceSelection: false,
validateOnBlur: false,
validationEvent: false,
emptyText: "Me Empty"
}

Its late at night and I must be missing something obvious. Any pointers in the right direction will be much appreciated.

Thanks.

I was testing it for a while to no avail. I'll get back to it later today or early tomorrow.

I don't know how about transformed combos but if I delete the text in combo (backspace or delete key) and I press enter in my in-editor-grid combos they get cleared.

My combo is not a transformed combo and is tied to a data store and it behaves exactly like the one in this example: http://extjs.com/deploy/dev/examples/grid/edit-grid.html

What are you doing differently that allows your combos (in-editor-grid) to clear?

Can you post a simplified showcase? Combos in the above example are transformed combos.

Can you post a simplified showcase? Combos in the above example are transformed combos.

Sure. Here is a simplified and modified version of the official Ext editor grid example that uses a ComboBox with a data store instead of a transform. When I try this in both IE 6 and FF 2.x I am unable to blank the combobox. I have tried a different variations of this script with no luck. I am probably overlooking something very small somewhere.

Ext.onReady(function(){
var lights = new Ext.data.SimpleStore({
fields: ['id', 'light'],
id:0,
data : [
['0', "Shage"],
['1', "Mostly Shady"],
['2', "Sun or Shade"],
['3', "Mostly Sunny"],
['4', "Sunny"]
]
});

function formatLight(value){
if (value) {
return lights.getById(value).get('light');
}
else {
return '';
}
}

var cm = new Ext.grid.ColumnModel([{
header: "Light",
dataIndex: 'id',
width: 130,
renderer: formatLight,
editor: new Ext.form.ComboBox({
valueField: 'id',
displayField:'light',
triggerAction: 'all',
store: lights,
lazyRender:true,
mode: 'local',
selectOnFocus:true,
typeAhead: true
})
}]);

var store = new Ext.data.SimpleStore({
fields: ['id'],
id:0,
data : [['1']]
});

// create the editor grid
var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
renderTo: 'editor-grid',
width:200,
height:100,
title:'Edit Plants?',
frame:true,
clicksToEdit:1
});
});

I was testing it for a while to no avail. I'll get back to it later today or early tomorrow.

Thanks. Your assistance in resolving this issue is much appreciated.

I've finally found a solution that could be workable but I haven't tested it thoroughly:

var cm = new Ext.grid.ColumnModel([{
header: "Light",
dataIndex: 'id',
width: 130,
renderer: formatLight,
editor: new Ext.form.ComboBox({
displayField:'light',
valueField: 'id',
triggerAction: 'all',
allowBlank:true,
store: lights,
lazyRender:true
,mode: 'local'
,listeners:{
blur:{fn:function() {
if(!this.getRawValue()) {
this.setValue();
}
}}
}
,selectOnFocus:true
,typeAhead: true
})
}]);

The main problem is that even if you clear text of combo it retains it underlying value. The above listener clears the value if the input text box is blank.

This mostly works. When the user clicks elsewhere, the blur event is triggered and the field is blanked. However if the user hits enter the old entry comes back. I added a 'specialkey' event listener so that I could catch the keypress. But it does not get called at all.

var cm = new Ext.grid.ColumnModel([{
header: "Light",
dataIndex: 'id',
width: 130,
renderer: formatLight,
editor: new Ext.form.ComboBox({
displayField:'light',
valueField: 'id',
triggerAction: 'all',
allowBlank:true,
store: lights,
lazyRender:true
,mode: 'local'
,listeners:{
blur:{fn:function() {
if(!this.getRawValue()) {
this.setValue();
}
}},
specialkey:{fn:function(field, e) {
if ((keyPressed == e.ENTER) && (!this.getRawValue())) {
this.setValue();
}
}}
}
,selectOnFocus:true
,typeAhead: true
})
}]);

Bump. Is anybody able to help with this?

Thanks in advance.

I don't know how about transformed combos but if I delete the text in combo (backspace or delete key) and I press enter in my in-editor-grid combos they get cleared.

I was trying many things but the only solution that is somehow workable is to add a "blank" record to combo. Such as:

var lights = new Ext.data.SimpleStore({
fields: ['id', 'light'],
id:0,
data : [
[null,'---'],
['0', "Shage"],
['1', "Mostly Shady"],
['2', "Sun or Shade"],
['3', "Mostly Sunny"],
['4', "Sunny"]
]
});

Editor Grid probably somewhere stops the event. Anyway, if it's going to be more complex than a couple of lines of listener code I'd consider extending combo.

I thought of it too, but I was hoping to avoid going this route. If I had only one component using this store, it would not be a big issue. However I have several other components that use this store and all of a sudden they start to behave in an undesired fashion. For example the grids have an extra row with a ---- entry. I could of course go modify all these components so that they handle this one specific record as a special case and ignore it. But that would start to get hairy as well. But if that is the only option to clear a EditorGrid field with a combo, I am all for using it.

However this brings up another question. I dont know how to easily hide a grid row. I usually remove the underlying record in the store, but in this case that is not an option.

Thanks.

I was trying many things but the only solution that is somehow workable is to add a "blank" record to combo. Such as:

var lights = new Ext.data.SimpleStore({
fields: ['id', 'light'],
id:0,
data : [
[null,'---'],
['0', "Shage"],
['1', "Mostly Shady"],
['2', "Sun or Shade"],
['3', "Mostly Sunny"],
['4', "Sunny"]
]
});

#If you have any other info about this subject , Please add it free.#

How to blank a combo in an Editor Grid?

Archives

Meta