CODEWITHSUNDEEP
extjs
stackato
stackato

Reputation: 1145

ExtJS -- dynamically change dropdown/picker

I have an ExtJS 6 application. I am using the TagField component with a custom picker which is a grid with a toolbar and some buttons. In some cases, I would like to use a different picker. The picker to be used will be determined by the stores record count.

So if record count is > 50 I want to show picker A, else show picker B.

The issue I am facing is that the picker is created before its store (which makes sense) and once the picker is created it cant be changed AFAIK. And by the time the store loads and I check the record count, its already too late to change the picker.

So is there any way I can destroy the picker and set a new one? I need something like a "setPicker()" method.

Thanks

Upvotes: 0

Views: 583

Answers (2)

michwalk
michwalk

Reputation: 313

I'd just use one picker and change it's store to keep things simple. After the picker (combobox) renders you can determine which store to use for it based on the record count of picker A's store

        {
        xtype: 'combobox',
        fieldLabel: 'Label',
        listeners: {
            afterrender: {
                fn: 'onComboboxAfterRender',
                scope: 'controller'
            }
        }
    }

In the controller:

    onComboboxAfterRender: function(component, eOpts) {
    var store1 = this.getViewModel().getStore('store1'),
        store2 = this.getViewModel().getStore('store2');

    if(store1.count > 50){
        component.bindStore(store1);
    }else{
        component.bindStore(store2);
    }
}

Upvotes: 0

ASP
ASP

Reputation: 854

A more pragmatic solution would be to create two TagField components. One using picker A, the other one using picker B. Then you just have to add a listener for the stores load event and show/hide the appropriate component based on your condition.

Not so neat, but easy and fast to implement.

Upvotes: 1

Related Questions