CODEWITHSUNDEEP
loopsextjsuser-interfacegridstore
kiextended
kiextended

Reputation: 11

Loading one by one and refreshing records in ExtJS store

I am trying to load and refresh the grid as the records are loading in ExtJS 4.2. Unfortunately in a tight loop while (i--) waits until ALL records are loaded before rendering the UI, basically blocking. I need to render UI as I am loading each record , as I have tons of records to load as the spinner would be spinning for a minute.

Is there any way I could trigger a refresh and keep loading them one by one .. or trigger a refresh say at an interval of say 2 seconds ? or each 10 records ..

Here is my code:

// In the parent function:

while (i--)
{
  gr.l('ao', 'Running pool');
  me.drawCell(store, rList[i]);
  // need to refresh the grid at this point ..
  // printing console.log outputs but UI is not refreshed ..
}


// The function which does the adding to the store ..

drawCell: function (store, roster)
{
  var me = this;
  if (!roster)
    return false;

  // fix the common issues
  firstName = roster.firstName ? roster.firstName : roster.userId;
  lastName = roster.lastName ? roster.lastName : '';
  companyName = roster.companyName ? roster.companyName : '';
  phoneNumbers = me.localStore.getPhoneNumbers(roster);
  userId = roster.userId;

  // add to list
  store.add(
  {
    firstName: firstName,
    firstNameGroup: firstName.charAt(0).toUpperCase(),
    userId: userId,
    lastName: lastName,
    companyName: companyName,
    iconCls: 'avatar-' + userId,
    status: (roster.status == 'offline') ? 'offline':roster.status,
    locationStatus: 'office',
    locationStatusDetail: 'Office',
    icon: me.getAvatarUrl(userId),
    systemMetadata: roster.systemMetadata,
    middleInitials: roster.middleInitials,
    userMetadata: roster.userMetadata,
    statusGroup: me.getStatusGroup(roster.status),
    group: (roster.systemMetadata && roster.systemMetadata.tags && 
  });

},

Upvotes: 1

Views: 440

Answers (1)

rixo
rixo

Reputation: 25001

You must indeed give some execution time for the UI to render.

You can replace your blocking while loop with a non-blocking function executing at a given interval.

Example:

var interval = setInterval(function() {
    if (i--) {
        // load some records

        // refresh grid
    } else {
        cancelInterval(interval);
    }
}, 50);

You don't need to set a high interval like 1s or 2s, that would only cause uneeded delay. You just need to let the execution escape from the loop, then it will render etc., and it will come back only when the other javascript execution has finished. If the rendering code takes more than 50ms, then the loop function will be executed again only when it has finished, it can be longer.

Upvotes: 1

Related Questions