CODEWITHSUNDEEP
javascriptextjs
zerkms
zerkms

Reputation: 254926

Infinite scrolling grid and MVC

Let's say we follow an original article http://www.sencha.com/learn/the-mvc-application-architecture and have such store:

Ext.define('AM.store.Users', {
    extend: 'Ext.data.Store',
    model: 'AM.model.User',
    autoLoad: true,

    proxy: {
        type: 'ajax',
        url: 'data/users.json',
        reader: {
            type: 'json',
            root: 'users',
            successProperty: 'success'
        }
    }
});

And we decided to implement an infinite scrolling grid. To do that we need to remove autoLoad: true and invoke store.guaranteeRange(...) manually.

So what is the best place for doing so?

Upvotes: 0

Views: 1259

Answers (2)

khmurach
khmurach

Reputation: 484

Ext.define('AM.store.Users', {
    extend: 'Ext.data.Store',
    model: 'AM.model.User',
    autoLoad: true,
    remoteSort: true,
    buffered: true,
    pageSize: 100,
    proxy: {
        type: 'ajax',
        url: '/postdata/list',
        limitParam: 'size',
        startParam: undefined,
        reader: {
            type: 'json',
            root: 'data',
            successProperty: 'success'
        }
    }
});

Demo here http://ext4all.com/post/extjs-4-1-grid-infinite-scroll-in-mvc

Upvotes: 1

sha
sha

Reputation: 17860

Somewhere where you render your grid. You can overwrite afterRender() method, or if it's modal grid/dialog - load the store before presenting it.

Couple side note (I'm trying to make a point that autoLoad usually is false for all stores:

  • if you ever will use any authentication in your application - you will have to disable autoLoad on all stores.
  • if you have more then couple stores (say 5-10+?) it's highly recommended to disable that too. You don't want all of them loading at the same time when application is starting.
  • very often you need to have guarantee that something happened after the store is loaded and then again you disable autoLoad, subscribe to load event and load() the store manually.

Upvotes: 1

Related Questions