Setting the pageSize of Extjs bufferedstore based on a config file

Question

I have an Extjs bufferedstore as below:

Ext.define('myStore', {
extend: 'Ext.data.BufferedStore',

requires: [
    'myStoremodel' // model that the store takes in 
],

storeId: 'myTeststore',

model: 'myStoremodel',

remoteSort: true,
buffered: true,
leadingBufferZone: 2,
trailingBufferZone: 2,
pageSize: 10,
proxy: {
    type: 'ajax',
    url: "/fetch/getNameList" // the API which returns data to load,
    timeout: 5 * 60 * 1000,
    reader: {
        rootProperty: 'data.name',
        totalProperty: 'data.recordSize'
    },
    simpleSortMode: true
}
});

I am looking to make the pageSize variable (change the size according to change made in config file). How can I read the value from an external config file? How can this be achieved?

Answer 1

Just to give you one pretty basic but possibile solution, you could create an API to get your frontend defaults config (like the pageSize of ExtJs stores).

Then at the opening of your webapp, as the very first step, you could make a single call to that api and save the result where you prefer (window object, cookies,...).

Image having an object in response like below and saving it in a window static variable:

window.myFrontEndConfigs = {
    pageSize: 20
};

So in your store definition you could use something like this:

Ext.define('myStore', {
    extend: 'Ext.data.BufferedStore',
    ...
    pageSize: window.myFrontEndConfigs.pageSize
    ...
}

I repeat this is a pretty "Stone-Age" solution, but knowing little to zero info on your front/back end leave me with low options...

-Edit-

Nothing stops you to just have a new js file dedicated to contain exclusively a function that return your configs. Just add it on your page and boom, done, config loaded and available. It is just that I like having the config on my backend cause I never know in the future if it needs to be dynamic it self based on user, group,...

myConfigs.js

function myFrontEndConfigs() {
    return {
        pageSize: 20
    };
}

And then in your store:

Ext.define('myStore', {
    extend: 'Ext.data.BufferedStore',
    ...
    pageSize: myFrontEndConfigs().pageSize
    ...
}