ExtJS 4.1 Grid panel loading is too long with over 10k entries

Question

I've a new problem today (first one : ExtJS 4.1 How to create a window with grid dynamically)

So, to resume my application is to display data about cars. I load all my cars (over 10k) like this :

Ext.create('Ext.data.Store', {
    storeId: 'CarStore',
    model: 'Car_Model',
    proxy: {
        type: 'ajax',
        url: './cars.json',
        reader: 'json'
    },
    autoLoad: {
        callback: displayMenu
    }
});

My displayMenu function display a menu with buttons like this :

- Brand1
    - Model1
    - Model2
- Brand2
    -Model1
- Etc
- All Cars

So when I create my buttons (depending of brand/model in my json store) I do this (exemple for a model button) :

var CarStore = Ext.data.StoreManager.lookup('CarStore');
var aCarButton= Ext.create('Ext.Button', {
    text: myModelText,
    handler: function(button, e) {
        var grid = Ext.create("CarsGrid", { store: CarStore });
        grid.filterByModel(myModelText);
        var win = Ext.create("CarsWindow", { title: myModelText, items: [ grid ] });
        win.show();
    }
});
aMenuPanel.add(aAircraftButton);

Thus when I click on a button that display all cars for a brand/model in a grid that is in a window.

My problem is that the loading before display my data take about 5 second for a model, 10 for a brand and 2 min for all my cars.

PS : I use the same store for my button creation and all grids to display but with a filter (by brand, model, or none) like you see in grid.filterByModel(myModelText);
In my previous Answer VoidMain advised me to use buffered: true but that produce an error when I click a button.

You want to load 10k records in a browser? Good luck, either use paging or buffering. — Johan Haest, Dec 14 '12 at 09:42
Yes I know it's completely crazy but I don't know how to use the buffered mode. — Gerald, Dec 14 '12 at 09:54
The buffered grid in 4.1 is still a bit buggy in my opinion, I use paging personally. But if you want to use the buffered grid, then this is a good starting point: look insade the files and see how they do it. http://docs.sencha.com/ext-js/4-1/#!/example/grid/buffer-grid.html Remember that you store will call your backend like paging (sending start en limit parameter). — Johan Haest, Dec 14 '12 at 10:09
If you have no other option than download your full dataset (your 12K records) well, you'll have to manage paging or buffering by hand but, thats not so complicated, you can use a custom memory proxy to acomplish that, let me know if you need help with the proxy. — VoidMain, Dec 14 '12 at 16:12

score 0 · Answer 1 · answered Dec 27 '12 at 20:51

If paging or buffering is absolutely not an option, you could try bumping up the timeout setting:

Ext.create('Ext.data.Store', {
    storeId: 'CarStore',
    model: 'Car_Model',
    proxy: {
        type: 'ajax',
        url: './cars.json',
        reader: 'json',
        timeout: 180000 //3 minutes * 60 sec/min * 1000 millis/sec
    },
    autoLoad: {
        callback: displayMenu
    }
});

score 0 · Answer 2 · answered Jan 08 '13 at 16:08

You're creating a menu with submenus right?

1)Don't add all models from all brands on this menu. It's 10K elements dude, nobody will browser that whole menu!! And worse, if visitor is searching for a specific car model.......... (imagine how much time to find it in a big menu like that!).

Ok, the solution.

First, use caching in PHP. IDK what framework/CMS you're using, Wordpress has built-in cache interface that can be implemented by plugins. Instead of making a query on every pageload, you store the result in HD and use it.

Second, make a better organization of your site. Instead of having trusting all its content access in a single big menu, create posts for each model, categories for brands, etc. Make a page listing brands, linking to a page listing models, etc. You already have this data in a DB, PHP can build dynamic HTML to list them, and with CSS you can make those lists very beautiful.

ExtJS 4.1 Grid panel loading is too long with over 10k entries

2 Answers2