Clearing ExtJS combobox input field

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',
empty开发者_如何学运维Text: '',
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.

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

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);
    }

});

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?

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(); } }