How to change the data in extJS combo dropdown?

Question

How to change the data in extJS combo dropdown ?

I have Combo box and I am trying to load the data. I want to sanatiize my data for some Reg expression.

Here is my Stroe code.

Ext.define("MyApp.store.combo.country", {
    extend: "Ext.data.Store",
    alias:"widget.country",
    //autoLoad:true,
     fields: [{
            name: 'name',type:'string'
        },{
            name: 'key',type:'int'
        }],
    proxy: {
        type: 'ajax',
        method: 'GET',
        url: '/myCountry/getName',
        reader: {
            type: 'json'                
        }
    },
    listeners: {
        beforeload ( store, operation, eOpts ) {
            console.log("combo before load");
        },

        load: function (_this, records, successful, operation, eOpts) {
            var length = records.length;
            var htmlRegex = new RegExp("<(\"[^\"]*\"|'[^']*'|[^'\">])*>");
            for(var i=0; i<length; i++){
                if(htmlRegex.test(records[i].data.name)){
                    records[i].data.name = records[i].data.name.replace( /(<([^>]+)>)/ig, '');
                }
            }
        }
     }
});

Now when I click on COmbobox I can not see the data in the dropdown is sanatize (Executing without passing RegExp). For the second time this is working fine.

So my question is how can I alter my data in this situation.

What I ahve tried taht you can see in load method.(Even In before load method also nothing is happening.)

Any work around

Answer 1

In my opinion the best way to do this is to use the calculate feature.

This ensures that everytime you load or change the records in the store, the regex validation will happen. The only downside is that you have another field.

Ext.define("MyApp.store.combo.country", {
    extend: "Ext.data.Store",
    alias: "widget.country",
    fields: [{
        name: 'regexedName',
        type: 'string',
        calculate: function (data) {
            const htmlRegex = new RegExp("<(\"[^\"]*\"|'[^']*'|[^'\">])*>");

            if (htmlRegex.test(data.name)) {
                return data.name.replace(/(<([^>]+)>)/ig, '');
            } else {
                return data.name;
            }
        }
    }, {
        name: 'name', type: 'string'
    }, {
        name: 'key', type: 'int'
    }],
    proxy: {
        type: 'ajax',
        method: 'GET',
        url: '/myCountry/getName',
        reader: {
            type: 'json'
        }
    }
});