Question

I’m a new ExtJS user and I’ve a question.

I have a store with cars and I create a menu with buttons to see all cars by brand or model.
Now I want to display a window with a grid panel containing all my cars for a particular brand/model.
Actually when I create my buttons i do that :

var aCarButton = Ext.create('Ext.Button', {
    text: aTextButton,
    handler: function() {
        var aResultWindow = new ResultWindow(aTextButton, myCarStore, 'Brand', aBrandValue);
        aResultWindow.create();
    }
});
aMenuPanel.add(aCarButton);

For my functions I do that :

function ResultWindow(aTitle, aStore, aFilter, aFilterValue) {
    this.myTitle = aTitle;
    this.myStore = aStore;
    this.myFilter = aFilter;
    this.myFilterValue = aFilterValue;
    this.myStore.filter(aFilter, aFilterValue); 
}

ResultWindow.prototype.create = function() {
    var grid = Ext.create('Ext.grid.Panel', {
        store: this.myStore,
        columns: [
            ...
        ]
    });
    var window = Ext.create('Ext.window.Window', {
        layout: 'fit',
        maximizable: true,
        title: this.myTitle,
        items: [ grid ],
        width: 1024,
        height: 768
    });
    window.show();
}

Firstly I’m not sure that is the best way to display what I want.
And Secondly I have a button that display all cars (no filters) but that take about 2 min to display all my 12000 record.

So my first question is to know if my solution to display what I want is correct ?
And my second question if is it possible to display all cars faster ?

PS : Sorry for my English if I did some errors.

Answer 1

That is certainly a way to do it but i don’t think it is the best way to do it in Ext, i’ll do something among these lines:

var aCarButton = Ext.create('Ext.Button', {
text: aTextButton,
handler: function() {
        myCarStore.filter('Brand', aBrandvalue);
        var win = Ext.create("Ext.window.Window", {
            title: aTextButton,
            layout: 'fit',
            maximizable: true,
            width: 1024,
            height: 768,
            items:[{
                xtype: 'grid',
                store: myCarStore,
                columns: [
                    ...
                ]
            }]
        });
        win.show();
});
aMenuPanel.add(aCarButton);

I’m declaring the Window inline just for the sake of the example, i would probably go for a custom Window with the grid included and some custom functions to filter on the grid but, the main point: you don’t need to mess with prototype here, there is no need really, if all you want is control how your Window is created, then define one like this:

Ext.define("CarsWindow", {
    extend: 'Ext.window.Window',
    items:[
        ...
    ],
    filterByBrand: function(brandValue){
        this.down('grid').getStore().filter('Brand', brandValue);
    },
    ...
});

And then you can instantiate it via:

Ext.create("CarsWindow", { title: 'YourTitle', ...}).show();

For your second question, there is a way to show large datasets in Ext without losing too much performance, you can set buffered: true on your store definition and, then, call ´store.loadPage(1)´ more on this: store.buffered

Hope that helps.