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

You can elaborate your values defining the convert or the calculate configs on the desired field, so you can totally avoid working on the store listeners.

The main difference is that the first one let you quickly convert the value of the field while the last one give you the possibility to create a new property/field based on the elaboration of the other record's info.

    // Example *convert* to change the case of a property
    {
        name: 'firstName',
        type: 'string',
        convert: function (value) {
            return value.toUpperCase();
        }
    }

    // Example *calculate* to create the new property "fullName" based on other properties
    {
        name: 'fullName',
        type: 'string',
        convert: function (data) {
            return data.firstName + ' ' + data.lastName;
        }
    }

Answer 2

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