CODEWITHSUNDEEP
extjsstore
realnot
realnot

Reputation: 753

How do you create dynamic local store based on record property

I have an integer field on backend. This field is an offset (CPI Index delay) that could takes values from 0 -> N. On frontend I want to display a combo box with this value / label:

{key: 0, label: "0 - 21/06/2020"}
{key: 1, label: "1 - 21/06/2021"}
{key: 2, label: "2 - 21/06/2022"}
{key: 3, label: "3 - ...       "}

The number of option is calculated this way: rent_end_date.year - first_due_date.year. Each time the first_due_date change, the options of the combo box must be calculated again.

To achieve this I've initialed a variabile indexOffsetChoices with relative formula to calculate choices each time a first_due_date changes:

viewModel: {
    type: 'rentsdetailformmodel',
    data: {
        hideRentsDetailGrids: false,
        indexOffsetChoices: []
    },
    formulas: {
        calculateIndexOffsetChoices: {
            bind: '{detailRecord.first_due_date}',
            get: function (firstDueDate) {
                var detailRecord = this.get('detailRecord'),
                    indexOffset = detailRecord.get('index_offset'),
                    rentEndDate = detailRecord.get('end_date');
                if (indexOffset !== undefined && rentEndDate !== undefined) {
                    var choices = [];
                    for (i = 0; i < (rentEndDate.getFullYear() - firstDueDate.getFullYear()); i++) {
                        var RawCPIDate = new Date(firstDueDate.setFullYear(firstDueDate.getFullYear() + i)),
                            CPIDateFmt = Ext.Date.format(new Date(RawCPIDate), 'd/m/Y'),
                            label = i + ' - ' + CPIDateFmt;
                        choices.push({"key": i, "label": label});
                    }
                    this.indexOffsetChoices = choices;
                }
            }
        }
    }
},

Then I added my combo box with an inline local store that point to the viewModel variable indexOffsetChoices:

items: [{
    xtype: 'combobox',
    name: 'index_offset',
    reference: 'index_offset',
    fieldLabel: 'CPI Application Delay',
    valueField: 'key',
    displayField: 'label',
    queryMode: 'local',
    bind: '{detailRecord.index_offset}',
    store: {
        type: 'store',
        storeId: 'rent__index_offset',
        idProperty: 'key',
        fields: ['key', 'label'],
        data: this.indexOffsetChoices
    }
}]

But the data are not loaded. This is the right approach? How do you create local store based on records / dynamic data? What I'm missing?

Upvotes: 0

Views: 65

Answers (1)

starlight93
starlight93

Reputation: 136

You did the hardest way sir! The 'data' property in viewModel is actually not used to store large of array data except you will work hard to modify them.

Setting dynamic options in combobox can be achieved by updating (or re-setting) it's options (using yourcombofield.setOptions([/*new array data*/]) like here ) or it's data store (using yourcombofield.getStore().setData([/* new array data*/]) like here) or if you declare your store in viewModel 'stores' property like here and have linked to your combobox's store property, you don't need to access combobox again, just modify the array data of the store and your combobox's options which has been linked to the store will be updated automatically. The important thing, try to give the easiest way to modify you array data inside the store.

Now, let's talk about when and where will you place your code to update this combobox's data? This is about the event's owner which you want to listen (and also affects your case). You said "Each time the first_due_date change". If first_due_date is affected by another field, just put your code inside it's change/keyup/keydown listeners and then re-treat you data by filtering,removing,adding, etc and the last, update the old data with the new data where ever the data has been stored before.

Upvotes: 1

Related Questions