CODEWITHSUNDEEP
inputextjscomboboxexpand
Giku Promitt
Giku Promitt

Reputation: 610

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',
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.

Upvotes: 1

Views: 16430

Answers (4)

user69820
user69820

Reputation:

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

Upvotes: 3

user123444555621
user123444555621

Reputation: 152956

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

Upvotes: 0

ndtreviv
ndtreviv

Reputation: 3614

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

});

Upvotes: 1

RageZ
RageZ

Reputation: 27313

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?

Upvotes: 0

Related Questions