Clearing ExtJS combobox input field - input

Question

I have an Ext.form.ComboBox with the following properties:
fieldLabel: 'Regiune',
valueField: 'id',
displayField: 'reg',
id: 'cbRegR',
typeAhead: true,
store: new Ext.data.JsonStore({...}),
mode: 'local',
emptyText: '',
listeners:{...}
The problem is that I have to manually delete the combobox' input field after selecting a value from the dropdown list to view all the list items. The matter is the list displays only the items that begin with letters in input field.
How can I clear the input field on expanding dropdown list? I tried the following but it doesn't work:
listeners: { 'expand': function() { cbRegR.clearValue(); } }
Seems to be easy but it ain't so for me.. Any bright ideas? Thanks in advance.

Answer 1

Adding the config property to your combobox
triggerAction: 'all'
might do the trick, without the need to register an expand event handler or clearing the combobox's value

Answer 2

It is an intrinsic behaviour of Ext JS ComboBox-es to filter the list items based on the field value, as you already know.
You could perceivably override the expand() method, making additions to clear out the value before it renders the list. EG:
Ext.override(Ext.form.ComboBox, {
expand : function(){
if(this.isExpanded() || !this.hasFocus){
return;
}
//ADDITIONS HERE:
this.clearValue();
this.doQuery("", true);
//ADDITIONS END HERE
if(this.title || this.pageSize){
this.assetHeight = 0;
if(this.title){
this.assetHeight += this.header.getHeight();
}
if(this.pageSize){
this.assetHeight += this.footer.getHeight();
}
}
if(this.bufferSize){
this.doResize(this.bufferSize);
delete this.bufferSize;
}
this.list.alignTo.apply(this.list, [this.el].concat(this.listAlign));
// zindex can change, re-check it and set it if necessary
this.list.setZIndex(this.getZIndex());
this.list.show();
if(Ext.isGecko2){
this.innerList.setOverflow('auto'); // necessary for FF 2.0/Mac
}
this.mon(Ext.getDoc(), {
scope: this,
mousewheel: this.collapseIf,
mousedown: this.collapseIf
});
this.fireEvent('expand', this);
}
});

Answer 3

The expand event is the good one but you have to be careful about the scope.
listeners: {
'expand': function() {
cbRegR.clearValue();
},
scope:this
}
Does setting the scope helps?

Answer 4

Using cbRegR won't work, because it's an undefined variable. Either use
listeners: { 'expand': function() { Ext.getCmp('cbRegR').clearValue(); } }
or, a more sophisticated approach:
listeners: { 'expand': function(self) { self.clearValue(); } }